»نشرت فى : الأحد، 2 مارس، 2014»بواسطة : »هناك 4 تعليقات

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

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

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

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

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




صورة :



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

  • ادخل مدونتك .
  • التخطيط .
  • اختر اداة 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 = 'http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/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>
تخصيص السلايد شو :
اللون الاحمر : هو كود استدعاء الاجاكس , اذا كان بالفعل موجود في مدونتك فأنت لست بحاجته .
اللون الاصفر هو عرض السلايد شو : تستطيع زيادته بحسب العرض الذي تريده .
اللون الاخضر: هو طول السلايد شو : اذا اردت زيادته فيجب عليك زيادت جميع الاكواد ذات اللون الاخضر ويجب ان تكون جميعها بنفس الطول .
اللون البنفسجي : هو عدد التدوينات المراد عرضها .



المصدر
مدونة مداد الجليد

    اضف تعليقاً عبر:

  • blogger
  • disqus
  1. جزاك الله خير ركبت معايا وطلعت تحفففففففففة

    ردحذف
  2. حياك الله أخي..يسعدني مرورك ومنابعتك لمدونتي... فشكرا لك.

    ردحذف

الابتسامات

0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344

كافة الحقوق محفوظة لمدونة واحــة الأحيـــــــــــــــــــــوات 2016