اضافة سلايد شو تلقائي مميز للبلوجر

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

اخواني بعد طول بحث دام ايام بصراحة تعقدت لقيت سلايد شو جميل وبسيط وتلقائي للبلوجر

حبيت اشارككم فيه للي يريده

السلايد شو سهل التركيب بخطوتين ومو معقد ابداً

اولا شكل السلايد شو قبل التركيب 


ساشرح لكن خصائص السلايد شو 

أولا مثل ما ترون حول السلايد شو اطار سماوي انا غيرت اللون ليتناسب مع الوان القالب بامكانكم تغييره بالاضافة للخط ساشرحه ايضا

معاينة السلايد شو على الطبيعة

مدونة مافيا - Mafiant Blog

لتركيب السلايد شو اتبع الآتي

أولا :

ادخل الى القالب ومن ثم خصائص html وابحث عن الكود التالي

رمز Code:

<b:section class='main' id='main' showaddelement='no'>

قم بتغيير كلمة "NO" الى "YES" الي ملونها بالاحمر

ثانياً :

ضع الكود التالي في المكان الذي تريده ان يظهر طبعا عني أنا شخصيا وضعته بعد الكود التالي

رمز Code:

<div id='main-wrapper'>

كود السلايد شو 

رمز Code:

<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/AVvXsEhA0QD46wC8hVEnzN4v4RMpxhKd_O0AS6Ezd-q2RmxpN61GV48p2w6BQFIA-7A768Wx7E8329UCoIA_YOTPeHTnTjVtvyn592h4hh4NzRK0NLFf9ISAfHG-0AFXbVZa8LYw3K_I5S2dpCQ/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 #bbbbbb;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:#bbbbbb;opacity:0.8}
.ei-title p{text-align:left}
.ei-title h2{font-family:'Droid Arabic Kufi',&quot;Times New Roman&quot;;text-align:right;margin-left:auto;font-size:15px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}
.ei-title h2 a{color:white}
.ei-title h2 a:hover{text-decoration:none;color:#9E0505}
.ei-title p{font-family:'Droid Arabic Kufi',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:#cccccc}
.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:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;}
@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 id='autoelastic'/>
<script src='https://ivyth.googlecode.com/svn/js/autoelastic.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
AutoElasticSlideshow({
blogURL:"http://www.ar-mafiant.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>

الآن نأتي الى التعديل الذي اذا اردت كتعديل الاطار وما والخط وما الى ذلك

لتعديل لون الاطار المحيط بالسلايد انا لونت لك اللون بالاحمر 

رمز Code:

#bbbbbb

قم يتغييره الى اللون الذي تريد طبعا بامكانك استخدام الفوتوشوب لمعرفة اكواد الالون او عبر الانترنت

2- لتغيير المؤشر الذي في الشريط الأسفل غير اللون الازرق 

رمز Code:

cccccc

الى اللون الذي تريده

لتغيير الخط ابحث عن 

رمز Code:

font-family:

اذا كنت تريد ابقاء الخط عليك اضافة الكود التالي اسفل 

رمز Code:

<head>

رمز Code:

  <link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

قبل ما انسى 

غير رابط الموقع برابط موقعك
بالنهاية اذا اعجبك الموضوع لا تنسانا من صالح الدعاء

هشام ابرشى

اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..