سلايدرشو تلقائي جميل وخفيف للمدونة

سلايدرشو تلقائي جميل وخفيف للمدونة يعرض 5 تدوينات ويمكنك زيادة أو إنقاص ذلك حسب رغبتك مع إمكانية تغيير الألوان وحجم الكتابة وسهل من حيث التركيب

ماعليك إلاّ وضع الكود في مكانه وتمتع بجمال المدونة

وطريقة تركيبه كالآتي

إذهب إلى المدونة ثم التخطيط ثم إضافة أداة ثم إختر HTML/java script وضع الكود داخل الإطار الكبير ثم إضغط حفظ وقم بسحبها إلى المكان الذي تريد وأخيرا توجه إلى أعلى المدونة وإضغط حفظ الترتيب

الكود :

"<style scoped="" type="text/css">

.ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white}

.ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVlmYEkIlbdFGMEAOE55ZnerhSQTg_sJ1Wb5qmVsRIuDAVKf0-eo0pk0z2273hvUbYUNVSFVBA8uKaem6hCd7QmAdH_DaO26dNg3G7TCYPcRG0cWDDpIdyWXtqSeZnOWmsbyX6Wn2BDI/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}

.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #9E0505;border-radius:2px}

.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}

.ei-slider-large li img{width:100%;border:0;padding:0}

.ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}

.ei-title p{text-align:left}

.ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}

.ei-title h2 a {color: white;text-decoration: none;}

.ei-title h2 a:hover{text-decoration:none;color:#9E0505}

.ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}

.ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}

.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}

.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#9E0505}

.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}

.ei-slider-thumbs li a:hover{background-color:#f0f0f0}

.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}

.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}

@media only screen and (max-width:479px){

.ei-slider{height:200px}

.ei-title{bottom:5%}

.ei-title h2{font-size:14px;line-height:17px}

}

</style>

</div>
<a style='display: none;' href='http://more-egy.blogspot.com'></a>

//<![CDATA[

$(document).ready(function () {

AutoElasticSlideshow({

blogURL:"http://kinas29.blogspot.com/",

MaxPost:5,

idcontaint:"#autoelastic",

ImageSize:400,

Summary:100,

animation:'center',

speed:800,

easing:'',

titlesFactor:0.60,

titlespeed:800,

titleeasing:'',

thumbMaxWidth:150,

Interval:3000,

autoplay:true,

pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',

tagName:false

});

//]]>

</script>"

http://kinas29.blogspot.com ضع رابط مدونتك مكان هذا الرابط

رقم 5 هذا الرقم هو عدد المواضيع المعروضة في السلايدرشو
إن لم يعمل معك الكود ونادرا مايحدث هذا ماعليك إلاّ الذهاب إلى قالب ثم تحرير HTML وإبحث عن الكود التالي :

<b:section class='main' id='main' showaddelement='no'>
وقم بإستبدال no ب yes أو إستبدله بالكود التالي :   <b:section class='main' id='main' showaddelement='no'>
ثم إضغط حفظ

سلايدشو ثاني وجميل وتركيبه بنفس الطريقة الأولى
الكود :

"<style type="text/css">

/* http://kinas29.blogspot.com/ */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}

#slider {

width:700px;height:306px;/* Make it the same size as your images */

background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_R45sZ5ZlvN8-KI5BT6X5-1mlvjrzlPXitDNgwFD8MaO6WLBmkw4yWAFaxstf5ddYI9ToQq4nD8L0AuruGOoWijNZKeMsm36ueKLh4GnJ0Nlp8WdIfut3mIlxOVXtTdpw5Lx462qjgVL/s1600/loading.gif) no-repeat 50% 50%;

position:relative;

margin:0 auto;/*make the image slider center-aligned */

box-shadow: 0px 1px 5px #999999;

}

#slider img {

position:absolute;

border:none;

display:none;

}

/* the link style undefinedif an image is wrapped in a link) */

#slider a.imgLink {

z-index:2;

display:none;position:absolute;

top:0px;left:0px;border:0;padding:0;margin:0;

width:100%;height:100%;

}

/* Caption styles */

div.mc-caption-bg, div.mc-caption-bg2 {

position:absolute;

width:100%;

height:auto;

padding:0;

left:0px;

bottom:15px;

z-index:3;

overflow:hidden;

font-size: 0;

}

div.mc-caption-bg {

background-color:black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color:#EEE;

z-index:4;

padding:10px 0;

text-align:center;

}

div.mc-caption a {

color:#FB0;

}

div.mc-caption a:hover {

color:#DA0;

}

/* ------ built-in navigation bullets wrapper ------*/

div.navBulletsWrapper {

top:320px; left:280px; /* Its position is relative to the #slider */

width:150px;

background:none;

padding-left:20px;

position:relative;

z-index:5;

cursor:pointer;

}

/* each bullet */

div.navBulletsWrapper div

{

width:11px; height:11px;

background:transparent urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFRh6qcMu1W-L_pg6qdMjTCYcFN1vjLB7H6iIxvKzKn1-SLnxt8X8S6up2l8M2H5VpTNJF9Hl-qYiIobToTN3xQ5b2g2I7cmvcvocI-C7zsFVMLMMZlffC-PYK6b7L0XgQmR09PHP6upy/s1600/bullet.png) no-repeat 0 0;

float:left;overflow:hidden;vertical-align:middle;cursor:pointer;

margin-right:11px;/* distance between each bullet*/

_position:relative;/*IE6 hack*/

}

div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */

#slider

{

transform: translate3dundefined0,0,0);

-ms-transform:translate3dundefined0,0,0);

-moz-transform:translate3dundefined0,0,0);

-o-transform:translate3dundefined0,0,0);

}

</style>

<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">

<div id="slider">

<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>

<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>

<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>

<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>

<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>

</div>

</div>"

عليك إستبدال مايلي :
عنوان الموضوع : استبدله بعنوان الموضوع المراد عرضه في السلايد شو.
رابط الصورة : استبدله برابط صورة الموضوع المراد عرضه بالسلايد شو.

العلامة # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو.