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

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

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

    عن الموضوع
    كود شريط التمرير أو سلايد شو في الشريط الجانبي أو السيدبار
  • جميع الحقوق محفوظة : ( اتفاقية نقل المحتوى )
  • للإبلاغ عن رابط معطوب : اضغط هنا
  • إرسال تعليق

    English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified