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

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

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

صورة :

مثال مباشر : من هنا

طريقة التركيب :
ادخل مدونتك .
التخطيط .
اختر اداة 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/AVvXsEg0cz3K1UpDk0n_otAeHFNyPNiMp85TzpRXToRHNS-5u6B141ZP7-L96CFRHyACTKSQSY7p-nP6QEHb86IvpMN_etxloB24HMdouFTeSqnOuSLpB-L5sJvFzhjMVVSSLsk2wrQlKh3Kfic/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>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script>

هو كود استدعاء الاجاكس , اذا كان بالفعل موجود في مدونتك فأنت لست بحاجته .

650px هو عرض السلايد شو : تستطيع زيادته بحسب العرض الذي تريده .

250px هو طول السلايد شو : اذا اردت زيادته فيجب عليك زيادت جميع الاكواد ذات اللون الاخضر ويجب ان تكون جميعها بنفس الطول .

9 هو عدد التدوينات المراد عرضها .