Start typing and press Enter to search

مساحة إعلانية متجاوبة
فنون

السبت، 24 مارس 2018

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

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

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

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

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

  • ادخل مدونتك .
  • التخطيط .
  • اختر اداة 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 aleatoriasvar 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/AVvXsEh7QSdg-zJh4Qhalk2RULO5RBOoOwMSRpm7uvHqTP0_F7GyKUYAG7zMg0gyx7T1ldtlPjBw9c1eUWMvABAlnd_Op09SB9-aRE7A6VDgWCeWecRMXxpzhW3NchFXUxna-2CGbyyovHUl17g/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>
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/AVvXsEh7QSdg-zJh4Qhalk2RULO5RBOoOwMSRpm7uvHqTP0_F7GyKUYAG7zMg0gyx7T1ldtlPjBw9c1eUWMvABAlnd_Op09SB9-aRE7A6VDgWCeWecRMXxpzhW3NchFXUxna-2CGbyyovHUl17g/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>

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

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

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

إرسال تعليق

test section describtion