اضافة سلايد شو يعرض المواضيع على حسب التسميات

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

اضافة سلايد شو يعرض المواضيع على حسب التسميات

تركيب سلايد شو الذي يعرض المواضيع حسب التسميات:

قبل التركيب يمكنك معاينة السلايد شو حتى تقرر ان كان يناسبك ام لا.

* اولا اتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.

</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://www.mo3awin.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://www.mo3awin.com برابط مدونتك.

* السلايد يظهر جميع المواضيع المدونة ولجعله يظهر حسب التسميات قم بتغير كلمة false التي في الكود السابق الى التسمية التي تريد.

الان نأتي الان لوضع الكود المسؤول عن اظهار سلايد، ويمكن وضعه في اي مكان تريده انت في القالب ، في حال لم تعرف يمكن اخبارنا في تعليق وسيسرنا مساعدتك.

<div id="featuredbwidget"/>

* بعد انتهاء قم بحفظ المظهر وشاهد النتيجة.

ملاحظة: في حال لم يشتغل معك السلايد شو هذا معناه ان مدونتك لا يوجد بها مكتبة الجي كويري و يمكنك اضافتها من خلال التدوينة التي بعنوان كيفية اضافة مكتبة الجي كويري لبلوجر.


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

تعليقات