سكربت عرض المواضيع بـ 5 أقسام بشكل احترافى لمدونات بلوجر

سكربت عرض المواضيع بشكل جديد سكربت عرض المواضيع حسب التسميات بشكل احترافى جديد فى هذا الموضوع سوف أعرض لكم هذا السكربت الجديد، وهذا السكربت يعمل حسب التسميات بخمس اقسام بشكل رائع جدا مما يعنى أن سوف تتمكنك من عرض مواضيع مدونتك بـ 5 أقسام وقمنا من قبل بعرض هذا السكربت على المدونة بشكل اخر ويمكنك الحصول عليها من الموضوع الخاص به وكان الموضوع باسم سكربت لعرض المواضيع حسب التسميات بشكل جديد يمكنك الحصول على هذا السكربت ايضا من الموضوع الخاص به.

ويمكنك معاينة السكربت من الرابط فى الأسفل لمشاهد جميع مميزات الإضافة وايضا سوف تجد رابط تحميل الأكواد الخاصه بالسكربت حتى تتمكن من الحصول على السكربت وتركيبه على مدونتك وكما العادة سوف تقوم بوضع شرح على الأكواد فى الموضوع ولكن سوف يكون عليك تحميل الأكواد حتى تستطيع الحصول على السكربت.

سكربت عرض المواضيع بـ 5 أقسام بشكل احترافى لمدونات بلوجر

تحميل ومعاينة الإضافة

معاينة تحميل الأكواد  

صورة من الإضافة

شرح التركيب

سوف يكون عليك أولا البحث عن هذا الوسم]]></b:skin>ثم تقوم بوضع الكود التالى فوقه.

.recent-labpost {
  background: #037893;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.rctab-button {
  background-color: #108AA6;
}
.rctab-button > span {
  cursor: pointer;
  position: relative;
  color: #FFF;
  display: inline-block;
  font-weight: 100;
  width: 20%;
  padding: 5px;
  text-align: center;
}
.rctab-button > span.active {
  background-color: #037893;
}
.rctab-content {
  padding: 3px;
  position: relative;
  min-height: 100px;
  overflow: auto;
}
.rctab-item {
  float: right;
  width: 25%;
  margin: 0;
  background: #CACACA;
  border: 1px solid #037893;
  transition: all .3s;
  height: 215px;
}
.rctab-item img {
  float: right;
  width: 100%;
  height: 140px;
}
.rctab-item h3 {
  float: right;
  padding: 5px;
}
.rctab-item h3 a {
  color: #981823;
  font-size: 12px;
}

الأن سوف تقوم بالبحث عن هذا الوسم</head>ثم تقوم بوضع الكود التالى فوقه ومن الممكن أن تجد الوسم فى بعض المواضيع بهذا الشكل&lt;/head&gt;&lt;!--<head/>--&gt;ضع الكود فوقه ايضا.

<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qARr1CmoCqkeS5g34DNLWr8X8cBWXkzM-uI8zaXAa08LT0FYl4ohdBnhZDNDnZRFV5Hh6OKZFSNSvGBhZOW-Ivh5abIP_PjmIfz7jKdMPr-a-2vwxBGP4xETVEKlLpyOK2HZC8tHnAQ/s1600/thumb.png",t[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qARr1CmoCqkeS5g34DNLWr8X8cBWXkzM-uI8zaXAa08LT0FYl4ohdBnhZDNDnZRFV5Hh6OKZFSNSvGBhZOW-Ivh5abIP_PjmIfz7jKdMPr-a-2vwxBGP4xETVEKlLpyOK2HZC8tHnAQ/s1600/thumb.png"),t}function load_w_tab(a){var t=a.find(".rctab-content>.active"),e=t.attr("data-load");$.ajax({type:"GET",url:"/feeds/posts/summary/-/"+e+"?max-results=20&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){if(a.feed.entry){t.append('<div class="wtab-inner"></div>');for(var e=0;e<a.feed.entry.length;e++){for(var i=a.feed.entry[e],d=0;d<a.feed.entry[e].link.length;d++)if("alternate"==a.feed.entry[e].link[d].rel){var s=a.feed.entry[e].link[d].href;break}var n=i.title.$t,l=getMeImg(i.media$thumbnail),r='<div class="rctab-item"><div class="rctab-item-inner"><a href="'+s+'"><img src="'+l[0]+'"/></a><h3><a href="'+s+'">'+n+'</a></h3><div style="clear:both"></div></div></div>';t.find(".wtab-inner").append(r)}t.addClass("hide-load")}}})}function getwtabs(e){for(var labelArr=eval(e.attr("data-label")),html='<div class="rctab-button">',i=0;i<labelArr.length;i++)html+='<span data-target="'+labelArr[i]+'-genova">'+labelArr[i]+"</span>";html+='</div><div class="rctab-content">';for(var i=0;i<labelArr.length;i++)html+='<div data-load="'+labelArr[i]+'" data-container="'+labelArr[i]+'-genova">'+loaderHTML+"</div>";html+="</div>",e.append(html),e.find(".rctab-button>span").first().addClass("active"),e.find(".rctab-content>div").hide(0),e.find(".rctab-content>div").first().show(0).addClass("active loaded"),setTimeout(function(){load_w_tab(e)},500),e.find(".rctab-button>span").click(function(){var a=$(this).attr("data-target"),t=$(this),i="";e.find(".rctab-content>div").each(function(){$(this).attr("data-container")==a&&(e.find(".rctab-button>span").removeClass("active"),t.addClass("active"),e.find(".rctab-content>div").removeClass("active").hide(0),$(this).fadeIn().addClass("active"),i=$(this))}),i.hasClass("loaded")||(i.addClass("loaded"),setTimeout(function(){load_w_tab(e)},500))})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';$(function(){getwtabs($(".recent-labpost"))});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qARr1CmoCqkeS5g34DNLWr8X8cBWXkzM-uI8zaXAa08LT0FYl4ohdBnhZDNDnZRFV5Hh6OKZFSNSvGBhZOW-Ivh5abIP_PjmIfz7jKdMPr-a-2vwxBGP4xETVEKlLpyOK2HZC8tHnAQ/s1600/thumb.png",t[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qARr1CmoCqkeS5g34DNLWr8X8cBWXkzM-uI8zaXAa08LT0FYl4ohdBnhZDNDnZRFV5Hh6OKZFSNSvGBhZOW-Ivh5abIP_PjmIfz7jKdMPr-a-2vwxBGP4xETVEKlLpyOK2HZC8tHnAQ/s1600/thumb.png"),t}function getauthor(a){for(var t=0;t<a.length;t++)var e="<span class='author'>&#xf007; "+a[t].name.$t+"</span>";return e}function getmeta(a){var t=[];t[1]="Jan",t[2]="Feb",t[3]="Mar",t[4]="Apr",t[5]="May",t[6]="Jun",t[7]="Jul",t[8]="Aug",t[9]="Sep",t[10]="Oct",t[11]="Nov",t[12]="Dec";var e=a.substring(0,4),s=a.substring(5,7),n=a.substring(8,10),i="<span class='date'>&#xf017; "+t[parseInt(s,10)]+" "+n+" "+e+"</span>";return i}function t(a){var a,t,e=[];for(t=0;a>t;t++)e.push(t);return shuffle(e)}function getmashrandom(a){var e="/feeds/posts/summary/?max-results=500&alt=json-in-script",s=a.find("div.tab-mash-random");s.find("span#tab-mash-random").addClass("loaded"),s.append('<ul class="random-inner"></ul>'),$.ajax({type:"GET",url:e,async:!0,contentType:"application/json",dataType:"jsonp",success:function(a){s.addClass("hide-load");for(var e=a.feed.entry,n=e.length,i=t(n),r=0;5>r;r++){for(var d=0;d<a.feed.entry[i[r]].link.length;d++)if("alternate"==e[i[r]].link[d].rel){var l=a.feed.entry[i[r]].link[d].href;break}var c=getMeImg(e[i[r]].media$thumbnail),o=e[i[r]].title.$t,u=e[i[r]].published.$t,h=getmeta(u),f=getauthor(e[i[r]].author),m='<li><a href="'+l+'"><img  class="toLoad" src="'+c[0]+'"/></a><div class="recent-list-c"><h3><a href="'+l+'">'+o+'</a></h3><div class="meta">'+f+" "+h+"</div></div></li>";s.find("ul").append(m)}}})}function getmashrecent(a){a.find("span#tab-mash-recent").addClass("loaded"),$.ajax({type:"GET",url:"/feeds/posts/summary?max-results=20&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(t){if(t.feed.entry){a.find("div.tab-mash-recent").append('<ul class="recent-post-list"></ul>');for(var e=0;e<t.feed.entry.length;e++){for(var s=t.feed.entry[e],n=0;n<t.feed.entry[e].link.length;n++)if("alternate"==t.feed.entry[e].link[n].rel){var i=t.feed.entry[e].link[n].href;break}var r=s.title.$t,d=getmeta(s.published.$t),l=getauthor(s.author),c=getMeImg(s.media$thumbnail),o="<li class='recent-post-item'><a href='"+i+"'><img src='"+c[0]+"'/></a><div class='recent-list-content'><h3><a href='"+i+"'>"+r+"</a></h3><div class='recent-list-meta'>"+d+l+"</div></div></li>";a.find("div.tab-mash-recent ul").append(o)}}}})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';shuffle=function(a){for(var t,e,s=a.length;s;t=parseInt(Math.random()*s),e=a[--s],a[s]=a[t],a[t]=e);return a},$(function(){$(".thetabs").each(function(){var a=$(this);a.append("<div class='tab-mash-outer'><div class='tab-mash-button'><span class='active' id='tab-mash-recent'><i class='fa fa-rss'></i> Recent</span><span id='tab-mash-random'><i class='fa fa-random'></i> Random</span></div><div class='tab-mash-content'><div class='tab-mash-recent min-height-need'></div><div class='tab-mash-random min-height-need' style='display:none;'>"+loaderHTML+"</div></div></div>"),getmashrecent(a),a.find(".tab-mash-button>span").click(function(){var t=$(this),e=a.find(".tab-mash-content>div");e.each(function(){$(this).hasClass(t.attr("id"))?($(this).fadeIn(),a.find(".tab-mash-button>span").removeClass("active"),t.addClass("active"),t.hasClass("loaded")||("tab-mash-random"==t.attr("id")?(t.addClass("loaded"),setTimeout(function(){getmashrandom(a)},500)):"tab-mash-comment"==t.attr("id")&&(t.addClass("loaded"),setTimeout(function(){getmashcomment(a)},2e3)))):$(this).hide(0)})})})});
//]]>
</script>

الأن مع اخر كود وسوف تقوم بوضعه فى المكان الذى تريده فى مدونتك أم فوق المواضيع أو أسفلها ويمكنك وضعه اسفل هذا الوسم<div class='post-wrapper'> ليظهر فوق المواضيع.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='recent-labpost' data-label='[&quot;رياضة&quot;,&quot;سياحة&quot;,&quot;رياضة&quot;,&quot;طبيعة&quot;,&quot;سياحة&quot;]'/>
</b:if>

سوف تقوم الأن بعد وضع الكود بتغيير التسميات بتسميات من عندك وبعد ذلك تقوم بحفظ القالب ومبورك عليك الاضافة.


هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .