طريقة اضافة سليدرشو للمدونة خفيف و أنيق

"" الصورة فقط للموضوع ""

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

أعرفكم بسليدرشو لتزيين مدونتكم طبعا خفيف جدا و تلقائي

و جميل و متناسق و سهل التركيب.

للمعاينة

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

ادخل الى لوحة تحكم مدونتك ثم تخطيط و اضف ادات جديدة فوق المواضيع

ثم اداة html/javascript و ضع هده الاكواد دون ان تسسى نسخ اي شيئ

ثم حفظ و تمتع بالسلادرشو.

}

#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 = 7;
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/AVvXsEjnpzvQVF9wAGkwS4WGWnLU1AZJNMDdTGk9jmIs5V4JPvXv7fau05XgJq8S3XTU06LePoWUDrFgGYTIzOnT_2PoDazcIhu8-wthzra_l8XjNVXXMtSHrzTVknDewBCHWeJV3ALnSpKEtV4/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>

يمكنك تغيير ما تشاء من الطول و الحجم و عدد صور المواضيع في الاكواد

و بما يناسب حجم مدونتك و دوقك.

ادا اردت ان يظهر السلايدرشو فقط في الصفحة الرئيسية لمدونتك ( على حسب اختيارك)

ادخل الى لوحة تحكم مدونتك اختر قالب ثم تحرير و ابحث في داخل الاكواد عن اسم الادات الدي وضعت فيه اكواد السلايدر

 انت ستجده هكدا

<b:widget id='HTML3' locked='false' title='اسم الاداة' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

ضع هذه الاكواد في المكان المبين

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>

و سيصبح هكدا و احفظ عملك

--------

<b:widget id='HTML3' locked='false' title='اسم الاداة' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

اتمنى ان الدرس قد أعجبكم أي استفسار ضعه في التعليق و ساجيبك

في أمان اللـــــــــــه