عالم البرمجة لتصميم وبرمجة المواقع


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

zakarya hasoud. يتم التشغيل بواسطة Blogger.


الثلاثاء، 24 فبراير 2015

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








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




طريقة التركيب :
 ادخل مدونتك .
    التخطيط .
    اختر اداة 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/AVvXsEjtSn2FUHGSl-cqSJQvY2envfK4H3dvVSSc4BTbax_OEbwEUD6mmXXuPzSNAPY9Tj03lUfksAg4LXqnA0yBZxlh2Eeupp37sef3kebvmj6ZHj-bliAECsCm7yfJV5wE7XvFrAvyp6yDids/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>


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

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

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

إرسال تعليق

| اتصل بنا Policy تطوير: