اضافة سلايد شو تلقائي لمدونة بلوجر

بسم الله الرحمن الرحيم


في هدا الدرس من دروس بلوجر سنتعلم اضافة سلايد شو تلقائي وخفيف لمدونة بلوجر.



طريقة التركيب :


    • ادخل مدونتك .
    • التخطيط .
    • اختر اداة 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/AVvXsEipK1-J_1G5qtbsDZ7bU4FKYeqk4_eSi4JNeq28kGMke1HZDUaOEto1chvhlMbN-mLSxBnUVFVig-wxIzgT6NZ7hCCNj7J0mYsxf7WtBpbYYrfKeVPv6xLm5bhONZFQkbOfckBAsnHL5JI/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>

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

    qwetq

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

    ليست هناك تعليقات:

    إرسال تعليق

    اكتشف آخر الأعمال والخدمات التي أقدمها على خمسات