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

 

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

والصلاة والسلام على خير خلق الله سيدنا محمد عليه الصلاة واتم التسليم

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

سلايد شو تلقائي لمدونة بلوجر | معدل :

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

 

صورة :

 

مثال مباشر : من هنا 

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

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

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

اللون الاحمر : هو كود استدعاء الاجاكس , اذا كان بالفعل موجود في مدونتك فأنت لست بحاجته .

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

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

ويجب ان تكون جميعها بنفس الطول .

اللون البنفسجي : هو عدد التدوينات المراد عرضها .