الدرس كيفية تركيب سلايد شو تلقائي لمدونة بلوجر | معدل مني شخصيا

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




طريقة التركيب :
 ادخل مدونتك .
    التخطيط .
    اختر اداة html/javascript .
    ضع مكانها فوق المشاركات .
    انسخ والصق هذا الكود بها :

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script>
    <style type='text/css'>
      .contenedorsli {
    width: 650px;
    margin: 0 auto;
    height: 250px;
    }
    #slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 250px;
    border: 4px solid #333;
    margin: 0 auto;
    padding: 0;
    }
    #slider > div {position: absolute;top: 0;left: 0;width: 100%;padding:0;}
    #slider img {
    width: 100% !important;
    height: 250px !important;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #slider p {
    position: absolute;
    left: 0;
    top: 0;
    height: 250px;
    width: 200px;
    margin: 0;
    padding: 10px;
    color: #FFF;
    background: #333;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    padding-top: 50px;
    text-align: center;
    filter: alpha(opacity=90);
    opacity: .9;
    -moz-box-sizing: border-box;
    -webkit-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    }
    #slider:hover p {bottom: 0;background: #990000;}</style><br />
    <script type="text/javascript">//<![CDATA[
    // Motor del slider
      $(function(){
        $('#slider div:gt(0)').hide();
        setInterval(function(){
          $('#slider div:first-child').fadeOut(2000)
          .next('div').fadeIn(2000)
          .end().appendTo('#slider');},5000);}
      );
    // Obtener entradas aleatorias
    var numposts_gal = 6;
    var salida_gal = '';
    function slideraleatorio(json) {
      var numPosts = json.feed.openSearch$totalResults.$t;
      var indexPosts = new Array();
      for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
      // L?nea para reordenar aleatoriamente las entradas le?das
      indexPosts.sort(function() {return 0.5 - Math.random()});
      if (numposts_gal > numPosts) {numposts_gal = numPosts;}
      for (i = 0; i < numposts_gal; ++i) {
        var entrada = json.feed.entry[indexPosts[i]];
        var titulo = entrada.title.$t;
        for (var k = 0; k < entrada.link.length; k++) {
          if ( entrada.link[k].rel == 'alternate') {enlace = entrada.link[k].href;break;}
        }
        if ("content" in entrada) {var contenido = entrada.content.$t;}
        x = contenido;
        a = x.indexOf("<img");
        b = x.indexOf("src=\"", a);
        c = x.indexOf("\"", b + 5);
        d = x.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {var imagen = d;}
        else {var imagen = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_j81IuohcfwlurUt_fH-Em4HOs-yuqfs9mdZ_ELWVs9SO7vzdgOgwdYEP6PD9kcv_jxIjhj5fRy5hH_AdksqCGlG-o9K8njfk3JWbaaf7nthIRSf5sxEXVAlgIMOUG6J0desDULljwY/s0/sin-imagen.png';}
        salida_gal += '<div><a href="' + enlace + '"><img src="' + imagen + '" /><p>' + titulo + '</p></a></div>';
      }
      document.getElementById('slider').innerHTML = salida_gal;
    }
    //]]></script>
    <div class="contenedorsli"><div id="slider"></div></div><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=slideraleatorio&amp;max-results=500"></script>


تخصيص السلايد شو :

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

كاتب الموضوع: يوسف فيلالي