طريقة اضافة سلايدر شو احترافي بطريقة سهلة لبلوجر

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

صورة توضيحية للاضافة :

شرح طريقة وضع الاضافة :

الخطوة 1: اذهب إلى لوحة تحكم مدونتك واضغط علي التخطيط
     الخطوة 2: انقر على "إضافة أداة"     الخطوة 3: من النافذة المنبثقة، اختر JavaScript
     الخطوة 4: نسخ والصق الكود في المربع 

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNWflvjEFr4axQ6KV4jtmNaJVOL8fKOrKMCJF9HrbmCAi5muIGpeKqAc8OO33FYYjmysExaY2839-SNvzcwTx2XWJGdF5GRlBX5UiX_agP4pEZhZ38pbLwvaDKcq128UTyubAcY6T2s5T8/s320/bloggerheroe.com-fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #1BA1E2;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides 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}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#1BA1E2;width: 10%;}
#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 #FFFFFF transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #FFFFFF;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/81212926/bloggerheroe.com-fade.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.rb7ne.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

غير الرابط الي رابط مدونتك http://www.rb7ne.com

 ومبروك عليك السلايد شو الاتوماتيكي

نتمنا ان يكون الموضوع نال اعجابكم وبنتظار تعليقاتكم واستفسارتكم 

مدونة ربحني شكرا