اضافة سلايد شو احترافى لمدونات بلوجر بسهولة 2020

أصدقائى مرحبا بكم - سنقدم لكم الأن اضافة من أجمل اضافات بلوجر والتى يعشقها العديد من المدونين ، سنقوم بعمل سلايد شو لمدونة بلوجر بشكل سهل جداَ،

سلايد شو تلقائي لدونات بلوجر يعرض بشكل جميل وتلقائي ورائع حيث أنه يعرض أحدث المشاركات ويمكنك وضعه في أي مكان بمدونتك أو موقعك

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

طريقة تركيب السلايد شو :

أولا سجل الدخول الى مدونتك لوحة التحكم
ادخل على التخطيط في اضافة أداة
HTML/JavaScript

أختار ثم أضف كود سلايد شو في المكان الذي ترغب فيه

لاتنسى تغيير lr1info.blogspot.comبرابط موقعك

أنسخ الكود التالي

<style>

#featuredpost {margin: 10px 0;}

#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:320px}

#slides li{width:50%;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), #slides li:nth-child(5){display:block}

#slides li:nth-child(1){right:0;top:0}

#slides li:nth-child(2){right:50%;width:25%;height:50%}

#slides li:nth-child(3){right:75%;width:25%;height:50%}

#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}

#slides li:nth-child(1) h4 {overflow:hidden;font-size:21px;bottom:0;color:#fafafa;width:100%;

padding:10px 10px 10px 90px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);

height:90px;font-family:Mahdi-font;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;right:0;}

#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;

padding:0;font-family:'Mahdi-font';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}

#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;

background:#0a7cd2;margin:0;text-align: center;}

#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;

padding:5px 21px;text-transform:uppercase;margin:0;}

#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}

#slides a{display:block;width:100%;height:100%;overflow:hidden}

#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}

#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}

#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:Mahdi-font;

left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;

background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}

#slides .label_text{font-family:Mahdi-font;size:12px;color:#fff;bottom:10px;z-index:3;left:10px;

position:absolute;background:rgb(10, 124, 210);padding:3px 6px;font-family:Mahdi-font;

text-transform:uppercase;}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}

#slides .overlayx,#slides li{transition:all .4s ease-in-out}

#slides li:nth-child(1) .overlayx{display:none;}

#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){

#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){

#slides ul{height:600px}

#slides li:nth-child(1){width:100%;height:50%}

#slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}

#slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}

#slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}

#slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){

#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

</style>

<div id="featuredpost">

</div>

<script type="text/javascript" src="//cdn.rawgit.com/iHussam/ar1web/master/slider-rep.js">

</script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"https://lr1info.blogspot.com/",

MaxPost:10,

idcontaint:"#featuredpost",

ImageSize:500,

interval:10000,

autoplay:true,

tagName:false

});

});

//]]>

</script>