الاثنين، 20 يناير 2014

سلايدر إحترافي لمدونات بلوجر

سلايدر إحترافي لمدونات بلوجر السلام عليكم و رحمة الله تعالى و بركاته
السلايدر شيء مهم للمدونات لما يوفره من شكل إحترافي ومما يوفر للزائر سهولة تصفح المواضيع ,, ولذلك وضع سلايدر بالمدونة شيء مهم ,, لتعرف كيف تضع واحد إحترافي شبيه بالصورة أسفله تابع الشرح :
سلايدر إحترافي لمدونات بلوجر

أولاً : ندخل للوحة التحكم ببلوجر .
ثانياً : نضغط على "قالب" .
ثالثاً : نضغط على "تحرير html" .
رابعاً : قم بالبحث عن هذا الكود عن طريق ctrl+f :
]]>
خامساً : ضع فوقه هذا الكود :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.ei-slider{position:relative;width:100%;max-width:995px;height:498px;margin:0 auto 35px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);box-shadow:0 1px 2px rgba(0,0,0,0.7);}
.ei-slider-loading{width:100%;height:100%;position:absolute;top:0;left:0;z-index:990;background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjssilTnH26CEVD97p7o-4ABkk9zEEvqDoUJ96MRBFKSt-7X2wvXH-rTH8nAbR-NSbdcvihXGY2K64cuSS2zcC6n6cmGKbDaJ3rKbnJ84b-zWuaGNePVd_TzXv_DrEtkTrgjxLR95uBk9I/s1600/black-loader.gif') no-repeat 50% 48%;color:#fff;text-align:center;line-height:520px;}
.ei-slider-large{height:100%;width:100%;position:relative;overflow:hidden;}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;}
.ei-slider-large li img{width:100%;}
.ei-title{position:absolute;right:10%;margin-right:0;margin-left:2%;bottom:25%;color:#fff;opacity:0.8;}
.ei-title h2,.ei-title h3{text-align:right;}
.ei-title h2{color:#b5b5b5;font-size:35px;font-family:BebasNeueRegular,arial,Georgia,serif;background:#000;float:right;padding:5px;margin-bottom:5px;}
.ei-title h3{clear:both;font-size:14px;line-height:20px;width:835px;background:#000;padding:5px;}
.ei-slider-thumbs{height:13px;margin:0 auto;position:relative;max-width:100%!important;}
.ei-title a{color:#FFF;}
.ei-slider-thumbs li{position:relative;float:left;height:100%;}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#F88C00;}
.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),0 1px 0 1px rgba(255,255,255,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,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%;max-height:100px;-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;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3))           );}
.content .ei-slider-thumbs li img{max-height:65px;}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
سادساً : قم بالبحث عن هذا الكود :

1
سابعاً : ضع فوقه هذا الكود : (مع تغيير ما لونه أحمر بالتصنيف أو القسم الذي تريده)

1
2
3
4
5
6
7
8
9
10
11









   


وهكذا تكون قد أضفت السلايدر :)
لا تبخل علينا بتعليق مشجع ,, ولا تنسى مشاركة الموضوع مع أصدقائك .


في

ليست هناك تعليقات:

إرسال تعليق