سلايد شو slideshow يقوم بعرض المواضيع على حسب التسميات

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

كيفية تركيب سلايد شو في المدونة:

قبل التركيب يمكنك معاينة السلايد شو.
- من لوحة تحكم مدونة ثم المظهر ثم تحرير html وابحث عن الوسم التالي.
</head>
عند ايجاده ضع فوقه الكود التالي.
<style type="text/css">
#featuredbwidget{position:relative;overflow: hidden;width:800px;height:350px;margin:5px auto;}
.featslider{height:100%;width:100%;overflow:hidden;}
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative;height:100%;width:100%;}
ul.featured-widget-list li{display:none}
ul.featured-widget-list li:nth-child(1){display:block;line-height:0}
ul.featured-widget-list img{border:0;width:100%;height:100%}
ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}
ul.featured-widget-list .featuredbg:hover{opacity:.1}
ul.featured-widget-list
h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px Droid Arabic Kufi;overflow:hidden}
ul.featured-widget-list li:hover h5{bottom:30px}
ul.featured-widget-list .featured-meta{font: 11px Droid Arabic Kufi;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}
ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}
.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.feat-prev{float:left;}
.feat-next{float:right;}
.feat-buttons a.feat-prev::before,
.feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
- اعد البحث عن الوسم التالي.
</body>
عند ايجاده ضع اعلاه (فوقه) الكود التالي.
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://mo3awindz.blogspot.com",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
* يجب عليك التعديل على الكود السابق وذلك بتغيير رابط مدونتي https://mo3awinz.blogspot.com برابط مدونتك.
* السلايد يظهر جميع المواضيع المدونة ولجعله يظهر حسب التسميات قم بتغير كلمة false التي ملونة باللون أحمر في المود السابق الى التسمية التي تريد.

- نأتي الان لوضع الكود المسؤول عن اظهار سلايد، ويمكن وضعه في اي مكان تريده انت في القالب، في حال لم تعرف يمكن اخبارنا في تعليق وسيسرنا مساعدتك.
<div id="featuredbwidget"/>
بعد انتهاء قم بحفظ المظهر وشاهد النتيجة.
ملاحظة: في حال لم يشتغل معك السلايد شو هذا معناه ان مدونتك لا يوجد بها مكتبة الجي كويري و يمكنك اضافتها من خلال التدوينة التي بعنوان كيفية اضافة مكتبة الجي كويري لبلوجر.

الى هنا نصل الى نهاية تدوينة اليوم، اتمنى ان تكون قد استفدت من هذا الشرح، اذا واجهت اي مشكلة في تركيب اترك لنا تعليق وسيسرنا مساعدتك، كان هذا كل شيء سلام.

شارك المقالة مع أصدقائك

mo3awin

هناك 3 تعليقات:

  1. اخي كيف احدد تسميه معينه يظهر السلايد شو المواضيع الخاصه بها برجاء توضيح الشرح اكثر

    ردحذف
    الردود
    1. أخي الكود واضح ..
      اذا أردت السلايد ان يظهر حسب التسميات فقط قم بوضع التسمية في الكود الثاني مكان كلمة false ...
      قم بقراءة تدوينة جيدا .. حتى تفهم تحياتي ...

      حذف
  2. اخي رجاء التوضيح كيف يعمل مع التسميات ؟!!

    ردحذف