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

الأربعاء، 9 أغسطس، 2017

سكربت عرض المواضيع بـ 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://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png",t[1]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/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://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png",t[1]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/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>

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


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

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

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

    عاوز اشيل الصورة دي من المدونة لو بعت الموقع لحد بتظهر
    www.promasri.com
    https://avatars.hsoubcdn.com/6a9f67d15b2e5a8fbab28b58f4cdc90a?s=300&d=mm

    أبحث عن هذا الرابط وغيرها بصورة لك
    https://goo.gl/oRwyvd

    طب لو سمحت عاوز اعمل تاثير علي صورة التدوينة

    اخي الكريم اتمنى نموذج تسجيل الدخول او انشاء حساب للبلوجر ممكنhihi :)

    هل يمكنك عرض الخط الذي تستخدمه في صور الفوتوشوب

    هليمكنك تقديم الخط الذي تستخدمه في تصيم صور المواضيع

    لما الماوس ييجي علي صورة التدوينة بيعمل زوم كده ع الصوره

    هل تقصد تاثير التكبير

    السلام عليكم أخي الكريم
    ممكن لو تكرمت ترسلي قالب مدونتك صراحة قالب مميز
    وجدت نسخة منه في غوغل لكن ليس كقالبك
    عندي مدونة طبخ و اريد تغيير قالبها لهذا
    هذا الايميل : aissabelm43@gmail.com

    سوف تجد أخى على المدونة النسخة السابق لهذه النسخة وهى تشبها بنسة 90 %
    وقريبا سوف يتم عرض هذه النسخة

    يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
    الأبتساماتأخفاء الأبتسامات

    جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر