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

 

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

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

]]></b:skin>

خامساً : ضع فوقه هذا الكود :

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/AVvXsEiiN5qhj9SczHGHhgih7cR4G5IyoXfsWyLu_b9n6bq_9uTE0aIvhbwKmz6U-bT_Pi3WAcSgM4o6OTHiSPjxMMTQcFDZqOafGJaKzrmUKDOZzgkQI7qnrx54OT2kBnnPss2ipOwiYb-LwYk/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

</head>

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

1 2 3 4 5 6 7 8 9 10 11

<script type='text/javascript'>   /*عدد المواضيع المرجو تركها كما هي */       var numposts2 = 6;/*السليدر*/   /*التصنيفات : المرجو إضافة كل تصنيف و التأكد من أن أخره لا يحتوي على فراغ*/       var label1 = &quot;كل&quot;;/*السليدر*/     </script> <script src='https://3rab-help.googlecode.com/files/jquery.js' type='text/javascript'/> <script src='https://3rab-help.googlecode.com/files/tie-scripts.js' type='text/javascript'/>

ثامناً : قم بالبحث عن هذا الكود :

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

تاسعاً : والآن ضع هذا الكود فوقه :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='ei-slider' id='ei-slider'> <script src='http://yourjavascript.com/3411331121/slide1.js'/> <script type='text/javascript'> var showpostsummary = true; var numchars = 100; </script> <ul class='ei-slider-large'> <script type='text/javascript'>   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?published&amp;alt=json-in-script&amp;callback=labelthumbs2\&quot;&gt;&lt;\/script&gt;&quot;);                     </script> </ul> <script src='http://yourjavascript.com/1134333271/slide2.js'/> <script type='text/javascript'>   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?published&amp;alt=json-in-script&amp;callback=labelthumbs22\&quot;&gt;&lt;\/script&gt;&quot;);                     </script> </div> <script type='text/javascript'>             jQuery(function() {                 jQuery(&#39;#ei-slider&#39;).eislideshow({                     animation           : &#39;center&#39;,                     autoplay            : true,                     slideshow_interval  : 3000,                     speed               : 800,                     titlesFactor        : 0.60,                     titlespeed          : 1000,                     thumbMaxWidth       : 100                 });             });         </script> <div style='clear: both;'/>     </b:if>

وهكذا تكون قد أضفت السلايدر :)

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