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

إضافة جميلة من إضافات بلوجر و التي هي سلايد شو يوضع في الجانب و يظهر أحدث المواضيع التي قمت بنشرها، بحيث يتميز هذا السلايدر بالجمال و الإحترافية كما يعطي لمدونتك ذوقا جميلا.

يظهر السلادر صور مع الإسم و كذلك تاريخ النشر و هو أوتوماتيكي كما يمكنك التعديل عليه من حيث عدد المواضيع و أيضا سرعة تبديل الصور و كذلك يمكنك أن تظهر مواضيع لتسمية واحدة فقط.


طريقة التركيب

1. أدخل للوحة تحكم مدونتك
2. تخطيط
3. إضافة أداة جديدة
4. إختيار أداة HTML/Javascript
5. إلصق الكود التالي داخل الأداة

<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
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:100%}
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{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSAzTEKTlZKpL5fJQG_oFa8I67oSj4k1IZHKsaxzphxd-TgytaENfTY4BpguwFAGafGef47lgRf4biP0UeSRYMNSf4mtvaQG3jdsmbTcug6s6UzLxfzu1WwT24b904G7w1NVDntpPy7LM/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://makingdifferent.github.io/blogger-widgets/featuredposts.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://elsawab.blogspot.com",
 MaxPost:30,
 idcontaint:"#featuredpostside",
 ImageSize:300,
 interval:5000,
 autoplay:true,
 tagName:false
});
//]]>
</script>

تخصيص الأداة

1. غير الرابط "http://elsawab.blogspot.com" برابط مدونتك.
2. غير القيمة 30  بعدد المواضيع التي تريد أن تضهر.
3. غير القيمة 5000 بالوقت الذي تستغرقه الصورة للتتغير (بالميلي ثانية).
4. غير الكلمة "False" بالتسمية التي تريد لتضهر مواضيع تلك التسمية فقط.
5. ثم إضغط على حفظ.