طريقة تركيب سلايد شو أيوب برو الاحترافي الى مدونة بلوجر

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

سأتطرق معك في هذه التدوينة إلى طريقة تركيب السلايد شو الموجود في مدونتي

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

الشرح تركيب:

1. تدخل الى لوحة التحكم في Blogger
2. قم بدخول الى مدونتك تم الى التخطيط 
3. انقر على اضافة أداة
4. قم باضافة  HTML/JavaScript
5. انسخ فيها هدا الكود الدي في الاسفل

<style scoped="" type="text/css">
    .ei-slider{position:relative;width:100%;max-width:630px;height:300px;margin:0 auto 35px;padding:0;background-color:white}
    .ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitej9xwhj9PzZLDtaEPbUM2p1eVnz8zoPzfGi9sDBKLTvjXBjM4toD1Xaa-o-7tAlf1chhTBiPfx0b95tSueDZIy-KEPIzYGHqgYU8JO143y5TpRM_nN6U-0-PfzhmoUpsxiGS4Xw23Ls/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}
    .ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #68C7D5;border-radius:2px}
    .ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}
    .ei-slider-large li img{width:100%;border:0;padding:0}
    .ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}
    .ei-title p{text-align:left}
    .ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:1EC6E8;max-width:80%;text-transform:capitalize;background:#000;padding:5px}
    .ei-title h2 a{color:white}
    .ei-title h2 a:hover{text-decoration:none;color:#9E0505}
    .ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}
    .ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}
    .ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}
    .ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#1EC6E8}
    .ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}
    .ei-slider-thumbs li a:hover{background-color:#f0f0f0}
    .ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
    .ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
    @media only screen and (max-width:479px){
      .ei-slider{height:200px}
      .ei-title{bottom:5%}
      .ei-title h2{font-size:14px;line-height:17px}
    }
    </style>
    <br />
    <div id="autoelastic">
    </div>
    <script src="http://trollvlhcv.googlecode.com/svn/trunk/demo/autoelastic.min.js" type="text/javascript"></script>
    <script type="text/javascript">//<![CDATA[
    $(document).ready(function () {
    AutoElasticSlideshow({
    blogURL:"http://www.ayoub-pro.cf/",
    MaxPost:5,
    idcontaint:"#autoelastic",
    ImageSize:400,
    Summary:100,
    animation:'center',
    speed:800,
    easing:'',
    titlesFactor:0.60,
    titlespeed:800,
    titleeasing:'',
    thumbMaxWidth:150,
    Interval:3000,
    autoplay:true,
    pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
    tagName:false
    });
    });//]]>
    </script>

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

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

  اذا واجهتكم اي مشاكل في تركيب السلايدرشو ضعوا تعليق وسيتم الرد عليكم ان شاء الله ..... - See more at: http://www.ayoub-pro.cf/2014/04/blog-post_17.html#sthash.OxVo28gl.dpuf

السلام عليكم ورحمة الله وبركاته سأتطرق معك في هذه التدوينة إلى طريقة - See more at: http://www.ayoub-pro.cf/#sthash.MGiCyEOa.dpuf