بسم الله الرحمن الرحيم
في هدا الدرس من دروس بلوجر سنتعلم اضافة سلايد شو تلقائي وخفيف لمدونة بلوجر.
طريقة التركيب :
- ادخل مدونتك .
- التخطيط .
- اختر اداة 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&alt=json-in-script&callback=slideraleatorio&max-results=500"></script>
تخصيص السلايد شو :
اللون الاصفر هو عرض السلايد شو : تستطيع زيادته بحسب العرض الذي تريده .
اللون الاخضر: هو طول السلايد شو : اذا اردت زيادته فيجب عليك زيادت جميع الاكواد ذات اللون الاخضر ويجب ان تكون جميعها بنفس الطول .
اللون البنفسجي : هو عدد التدوينات المراد عرضها .