كود شريط التمرير أو سلايد شو في الشريط الجانبي أو السيدبار

اليوم أعزائي زوار مدونة Sory Mohajer سأقدم لكم كود رائع ولا يحتاج لخبرى مسبقى أو معرفة بالأكواد ولا يقل جمال وسهولة عن المقالات السابقة.
كود شريط التمرير أو سلايد شو في الشريط الجانبي أو السيدبار
كود شريط التمرير أو سلايد شو في الشريط الجانبي أو السيدبار
الكود المقدم اليوم شريط التمرير أو سلايد شو في الشريط الجانبي أو السيدبار. هذا كود شريط التمرير متحرك يتضمن آخر المواضيع التي تم نشرها , وهو مثير جدا للاهتمام لأنه سوف يعرض قائمة من أحدث المقالات مع الصور المصغرة وتأثير المنزلق الذي سوف يستمر في العمل تلقائيا. ليس ذلك فحسب ، بل يمكن إعداد هذه الأداة أيضاً في عرض أحدث المقالات استناداً إلى التصنيفات أو حسب التسمية التي تحددها أنت.
أذا اردة مشاهدة الأضافة بأمكانك الضغط هنا لرؤيتها
عبر هذه المطابقة المصغرة المضافة يمكنك وضعها على صفحة الشريط الجانبي للمدونة ، نظراً لحجمها الصغير يمكن أن يتم تثبيتها في الشريط الجانبي. حسنا الأن ، أذا أعجبتك الفكرة لتركيب السلايد شو اتبع البرنامج الشرح أدناه

تثبيت أحدث أداة لشريط التمرير في الشريط الجانبي

في البداية أذهب الى التخطيط في المدونة > أضغط اضافة جافا سكريبت جديدة > أنسخ الكود كامل في الأسفل 
<style scoped="" type="text/css">ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }</style><div id="featuredpostside"></div><script type='text/javascript'>function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></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.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$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.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};//<![CDATA[FeaturedPostSide({
  blogURL: "https://alsaker86.blogspot.com",

  MaxPost: 8,  idcontaint: "#featuredpostside",  ImageSize: 300,  interval: 5000,  autoplay: true,  tagName: false});//]]></script>

بعد أضافة الكود بأمكانك تغيير الأكواد المعلمة باللون الأحمر بما يناسبك 
إعدادات القطعة
blogURL: "https://alsaker86.blogspot.com": أستبدل رابط 
https://alsaker86.blogspot.com مع رابط المدونة الخاص بك
MaxPost: 8: عدد المشاركات التي سيتم عرضها
ImageSize: حجم أو أبعاد الصورة بالبكسل
الفاصل الزمني: الوقت المستغرق عند تحريك مربع تمرير المشاركة
autoplay: true: لإيقاف تشغيل شريط التمرير التلقائي 
 قم بتغيير التشغيل التلقائي: true أستبدلها كلمة autoplay: false
tagName: false: لإضافة أحدث المقالات حسب التصنيف ، استبدل false
مع اسم علامة محددة. على سبيل المثال ، Blogger: tagName: "Blogger
ثم أضغط حفظ
وبعد ذلك اذهب الى المدونة وشاهد سلايد متحرك تم أضافته بالقائمة الجانبية




معلومات عن الموقع ⚡ موقع EXE and APK مجاني 100% يتم ارفاق التفعيل للبرامج او طريقة الحصول على مفتاح لاي برنامج او تطبيق https://www.exe-apk.com/. Sory Mohajer.
رسائل أحدث رسائل أحدث رسائل أقدم رسائل أقدم

المزيد من المشاركات

تعليقات

إرسال تعليق