مدونة متميزون بلا حدود مدونة متميزون بلا حدود
recent

آخر الأخبار

recent
recent
جاري التحميل ...

كيفية اضافة سلايدر شو الى مدونتك








أخواني الاعزاء 

اليوم سوف أتطرق عن 

كيفية اضافة سلايدر شو أحترافي الى مدونتك 


أولاً : ندخل الى مركز التحكم للمدونة .

ثانياً : نضغط على التخطيط .

ثالثاً : نضغط على أضافة أداة . 

رابعاً : سوف تفتح لك قائمة جديدة كما في الصورة التالية ونختار (  جافا سكربت ) . 




خامساً : نقوم بوضع الكود التالي : 

ملاحظة : يجب تغير الرابط باللون الازرق برابط مدونتك 


<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 )

أما الكود التالي باللون ( الاصفر) هو لون عتلة تحريك عرض المواضيع في الاسلايدر شو 

( 090707 )


الى هنا انتهينا 
واتمنى الموضوع قد نال اعجابكم 









كاتب الموضوع

Unknown

0 تعليق على موضوع : كيفية اضافة سلايدر شو الى مدونتك

  • اضافة تعليق
  • شكراً جزيلاً سعيدين بمرورك
    الأبتساماتأخفاء الأبتسامات

    اهلا وسهلا



    إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

    إتصل بنا

    التسميات

    احصاءات المدونة

    حمل تطبيقنا

    زوار المدونة

    Statistics

    جميع الحقوق محفوظة لـ

    مدونة متميزون بلا حدود

    2017