بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
كيفية تركيب سلايد شو تلقائي لمدونة بلوجر | معدل :
سلايد شو بسيط وخفيف وجميل في نفس الوقت , تستطيع اضافته اسفل الهيدر او فوق المشاركات ان اردت , يتميز بخفة الاكواد .
طريقة التركيب :
ادخل مدونتك .
التخطيط .
اختر اداة 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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_j81IuohcfwlurUt_fH-Em4HOs-yuqfs9mdZ_ELWVs9SO7vzdgOgwdYEP6PD9kcv_jxIjhj5fRy5hH_AdksqCGlG-o9K8njfk3JWbaaf7nthIRSf5sxEXVAlgIMOUG6J0desDULljwY/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&alt=json-in-script&callback=slideraleatorio&max-results=500"></script>
تخصيص السلايد شو :
اللون الاحمر : هو كود استدعاء الاجاكس , اذا كان بالفعل موجود في مدونتك فأنت لست بحاجته .
اللون الاصفر هو عرض السلايد شو : تستطيع زيادته بحسب العرض الذي تريده .
اللون الاخضر: هو طول السلايد شو : اذا اردت زيادته فيجب عليك زيادت جميع الاكواد ذات اللون الاخضر ويجب ان تكون جميعها بنفس الطول .
اللون البنفسجي : هو عدد التدوينات المراد عرضها .
الى لقاء
اترككم مع الشرح
كاتب الموضوع: يوسف فيلالي
