اضافة سلايد شو تلقائي 2014

السلام عليكم ورحمة الله وبركاته

موضوع اليوم يتكلم عن اضافة سلايد شو تلقائي2015

طريقة الاضافة

1-ادخل الى لوحة تحكم مدونتك

2-اختر تخطيط

3-اختر اضافة اداة

4-اختر HTML/gavaskript

5-الصق الكود التالي داخل المربع الفارغ
===================================

بداية كود الHTML

<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/AVvXsEjJUn64i9Hbuo6wuanre7xvsBWDy2G2w44z93l9M4QzmL7vPuiCcooDv77E6aWQ55CRuxMwBGWVsY2qW7lqiW6pwn_xvzZfV5iKrBkwYSMjwSZmTkfO3HkXNB2IedtEvG82wXXCK-Youcg/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>

نهاية كود الHTML

===================================

مايجب عليك تغيره

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

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

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

========================================================================================

اتمنى لكم التوفيق لا تنسونا بدعائكم لنا

لا تنسوا تقيم الموضوع

في آمان الله

كاتب الموضوع:رشاد نصر