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

سلايد شو اخباري تلقائي

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

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

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

صورة :

سلايد شو اخباري تلقائي

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

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

• ادخل مدونتك .
• التخطيط .
• اختر اداة 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: 750px;
margin: 0 auto;
height: 297px;
}
#slider {
position: absolute;
overflow: hidden;
width: 640px;
height: 310px;
border: 4px solid #333;
margin: -21px auto;
padding: 0;
}
#slider > div {position: absolute;top: 0;left: 0;width: 100%;padding:0;}
#slider img {
width: 100% !important;
height: 310px !important;
margin: 0;
padding: 0;
border: 0;
}
#slider p {
position: absolute;
left: 0;
top: 0;
height: 310px;
width: 170px;
margin: 0;
padding: 10px;
color: #FFF;
background: #333;
font-size: 18px;
font-weight: bold;
line-height: 2px;
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="http://alhot-alazraq.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=slideraleatorio&amp;max-results=500"></script>

فقط قم بتغيير رابط مدونتي باللون الاحمر الى رابط المدونة الخاصة بك


جميلة جدا انا استخدمها شخصيا...جربوها