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

السلام عليكم ورحمة الله وبركاته

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

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

1. توجه للوحة التحكم الخاصة بمدونتك .
2. إختر تخطيط .
3. إضافة أداة .
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/AVvXsEgfCtGVKmgfII4gYqAJNMCW8HiVEcy5JLG_-bc9KPyVALSZUxu1L6uzvg5VJkR0B4ihhc2TnZwT14N6Q-dh10zndPC2SeRs5YxIWJa1ol9u8GTEUk4Bp7lqr4gw4Dy8AB3uyd_JuDvNf52P/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://trucsprofessional.blogspot.com//",

MaxPost:8,

idcontaint:"#featuredpost",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

});

//]]>

</script>

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

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

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.

هل أعجبك الموضوع ؟

الموضوع من طرف : منتصير شفيق

منتصير شفيق 24 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بالحماية المعلوماتية يمكنك متابعته من خلال الفيس بوك . تويتر . جوجل بلس

ضع تعليقا أخي الكريم