25 أبريل 2016

مدون محترف اضافات بلوجر سلايدر شو إضافة سلايدر شو تلقائي في السايدبار

إضافة سلايدر شو تلقائي في السايدبار

إضافة سلايدر شو تلقائي في السايدبار يقوم بعرض المواضيع بشكل تلقائي أو على حسب التسمية

إضافة سلايدر شو تلقائي في السايدبار - في دروس سابقة لنا قمنا بالتعرف على أكثر من شكل للسلايدرات وأخرها كان اضافة سلايدر شو تلقائي في بلوجر، اليوم سوف نقوم بإضافة سلايدر عامودي يقوم بعرض أحدث المقالات التي تم إضافتها للمدونة مؤخرًا بشكل تلقائي، ويتُم إضافته في السايدبار (الشريط الجانبي)، والمُميز أيضًا بهذه الإضافة أنّه يُمكنك عرض المواضيع حسب التسمية بمعنى (عرض مواضيع قسم مُعين)، والتحُكم بالإضافة بشكل كامل.


إضافة سلايدر شو تلقائي في السايدبار

  1. ندخل لوحة تحكم بلوجر
  2. نقوم بالأنتقال إلى قسم تخطيط
  3. نضغط على إضافة أداة HTML/JavaScript
  4. نقوم بلصق الكود التالي في الأداة
  5. ثم نقوم بالحفظ

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4EjooE1fuOtlbppyKL6Tbjo7BJ9QUCsNNXllnsS5zD90Jtinlrm3OT_XuwFDurLy-mNSttG7x5etqKaCPDFIZ7lvds7B4bKHZOTdLR3e5oP22EexFE8H8xkgOaDejofTh-nCUZfpE3Fw/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:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","اغسطس","سبتمبر","اكتوبر","نوفمبر","ديسمبر"],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: "http://aegygeek.com/",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false

});//]]>
</script>

تعديلات الكود

blogURL: قم باسبتدال رابط المدونة التالية http://www.aegygeek.com برابط مدونتك.
MaxPost: 8: هذا الوسم هو المسؤول عن عدد المواضيع التي سوف يتم عرضها.
ImageSize: 300: المسؤول عن حجم وأبعاد الصورة بالبكسل.
interval: 5000: الفاصل الزمني بين التنقل في المواضيع.
autoplay: وهو المسؤول عن عرض المواضيع بشكل تلقائي ولإيقافها قم باستبدال true بالكلمة التالية false.
tagName: وهو المسؤول عن عرض المواضيع حسب التسمية بحيث يجب عليك تغيير كلمة false باسم القسم الخاص بك.

أتمنى أنّ تكون الإضافة أعجبتكم بالتوفيق
مواضيع ذات صلة
إضافة سلايدر شو تلقائي في السايدبار
4 / 5
بواسطة

هناك 19 تعليقًا :

  1. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. أخي ليو
      دائمًا أحب تعليقاتك الجميلة على مواضيع
      وأتمنى أنّ تعذرني شديد الإعتذار لأنّي مسحت التعليق بسبب الأسم
      بالنسبة للسلايدر قمنا بجلبه من مصدر أجنبي ولم ننتبه أنّه موجود في مدونة عربية
      شكرًا لتعليقك وأتمنى أنّ تعذرني
      أحترامي وتقدرير لشخصك الكريم

      حذف
  2. السلام عليكم
    جزاك الله خيرااا أخي منير
    موضوع رائــــع جداااا

    ردحذف
    الردود
    1. وعليكم السلام
      مرورك الرائع أخي محمد
      احترامي وتقديري لشخصك الكريم =r

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

    ردحذف
    الردود
    1. وعليكم السلام
      صراحة لا اعرف حل للمشكلة
      ولكنّ انا قمت بتشغيل أدبلوك
      وبقي السلايدر يعمل ولم يختفي =d

      حذف
  4. هذا السلايدر لا يعمل للاسف اخي

    ردحذف
    الردود
    1. بل يعمل صديقي
      حاول ان تقوم تركيبه بدون حذف شيء
      لأنه حذف نقطة واحدة يجعل القالب لا يعمل

      حذف
  5. غير معرف09 مايو, 2016

    موضوع جميل ورائع أخى جزاك الله كل خير حملة شاركنا لندعمك

    ردحذف
  6. مرورك الجميل اخي
    ولكن اتمنى التقيد بشروط الحملة

    ردحذف
  7. سلايدر رائع و احترافي اخي :) من فضلك اريد حذف التاثير الخفيف الذي يظهر على الصور قبل وضع زر الماوس عليها

    ردحذف
    الردود
    1. مرورك الرائع
      ومن اجل فعل ذلك تحتاج إلى بعض التعديلات
      ولا انصح بفعل ذلك لأنّه عند حذف التأثير سوف لن تظهر العناوين بشكل جيد

      حذف
  8. بارك الله فيك على الإضافة الجميلة أخي الغالي لكن لدي مشكلة وهي أن الإضافة هذه لم تشتغل في قالبي، لدي قالب (من قوالب بلوجر الإفتراضية) وأردت أن أقوم بإضافة هذه الإضافة لأنها رائعة لكنها لم تشتغل للأسف، فهل من طريقة لجعلها تشتغل حبيبي وشكرًا :)

    ردحذف
    الردود
    1. للأسف لا لأن 90% من الإضافات لا تعمل في قوالب بلوجر الإفتراضية لذلك حاول عدم استخدامها

      حذف
  9. جميل خالص تسلم ايدك يالغالى
    دام ابداعك وتميزك

    ردحذف
  10. السلام عليكم ورحمة الله وبركاته أخي يعمل هذا القالب ولكن عندما اغير كلمة false الى اسم القسم لايعد يعمل كررت هذا الأمر عدة مرات دون جدوى

    ردحذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r