انشاء خريطة مدونةعام

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

0
(0)

اليوم أعزائي زوار مدونة 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
ثم أضغط حفظ
وبعد ذلك اذهب الى المدونة وشاهد سلايد متحرك تم أضافته بالقائمة الجانبية


هل كانت هذه المقالة مفيدة ؟

اضغط على عدد النجوم للتقييم

متوسط التقييم 0 / 5. عدد الاصوات : 0

لا يوجد مصوتين كن انت الاول

Sory Mohajer

Sory Mohajer مدير موقع EXE and APK التدوين هوايتي أنضممت لعالم التقنية منذ عام 2014 أحاول تأمين أكبر عدد للتراخيص وأجدد المقالات بشكل دوري حتى وصلت عددها الى اكثر من 4000 مقالة متنوعة تحتوي برامج وتطبيقات مع شروحات سيو لتحسين الموقع وكل هذا بمجهود شخصي .

مقالات ذات صلة

اترك ردك على هذا المقال

زر الذهاب إلى الأعلى