أخواني الاعزاء
اليوم سوف أتطرق عن
كيفية اضافة سلايدر شو أحترافي الى مدونتك
أولاً : ندخل الى مركز التحكم للمدونة .
ثانياً : نضغط على التخطيط .
ثالثاً : نضغط على أضافة أداة .
رابعاً : سوف تفتح لك قائمة جديدة كما في الصورة التالية ونختار ( جافا سكربت ) .
خامساً : نقوم بوضع الكود التالي :
ملاحظة : يجب تغير الرابط باللون الازرق برابط مدونتك
<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/AVvXsEjeqt3dW-FAFrMc_Ceq5inPWisSAiJMKY4eIls8eQqfodHXW_EanrwP9WZrcITCZILzjth-A1LZf2c9SvJISBmrni5BIByDrO9zJCxuA01Jvcrg-qm44aB0X2obAeTfnceJTQDmVUwQZfo/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 #090707;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}.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:#090707}.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><br /><div id="autoelastic"></div><script src="http://trollvlhcv.googlecode.com/svn/trunk/demo/autoelastic.min.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[$(document).ready(function () {AutoElasticSlideshow({blogURL:"http://ahmed196620.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>
سادساً : نضغط على حفظ .
سابعاً : نضغط على ( حفظ الترتيب ) بعد التحريك ووضعها فوق ( رسائل المدونة الالكترونية )
ملاحظة : سوف يعرض لك السلايدر شو ( 5 مواضيع )
الان نأتي الى كيفية تغير ألوان السلايدر شو
في الكود اعلاه ستجدون هذا الكود باللون ( الاحمر ) هو تغير لون أطار السلايدر
( b5b5b5 )
أما الكود التالي باللون ( الاخضر ) هو لون الكتابة للموضوع في داخل الاسلايدر شو الذي يكون باللون الابيض
( f0f0f0 )
أما الكود التالي باللون ( الاصفر) هو لون عتلة تحريك عرض المواضيع في الاسلايدر شو
الى هنا انتهينا
واتمنى الموضوع قد نال اعجابكم
0 تعليق على موضوع : كيفية اضافة سلايدر شو الى مدونتك
شكراً جزيلاً سعيدين بمرورك
الأبتساماتأخفاء الأبتسامات