أسهل طريقة لعمل slider show

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

إليكم الشرح

قم بإتباع الخطوات التالية

1. أدخل للوحة التحكم بلوغر > تصميم > تحرير HTML 
2. قم بتحميل نسخة من القالب ، 
3. إبحث عن </head>
4. فوقه مباشرة قم بلصق الكود التالي ، قم بتحميل من هنا
5. قم بالبحث عن ]]></b:skin>
6. وفوقه مباشرة قم بلصق الكود التالي 

الجملة المكتوبة باللون الأحمر تدل على إرتفاع وعرض السلايدر

/*-------------------- MBT jQuery Image Slider -------------*/

.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} 

.fp-slides{} 

.fp-post{padding:13px;} 

.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} 

.fp-thumbnail:hover{border:3px solid #CAC9C9;width:580px;height:266px;margin-bottom:10px;overflow:hidden;} 

.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;} 

.fp-title a{color:#000;text-decoration:none;} 

.fp-title a:hover{color:#0080fF;text-decoration:none;} 

.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;} 

.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} 

.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} 

.fp-nav{width:590px;padding:0px 10px;height:14px;} 

.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FspFr_Wa54xqo8M6bpSPJ5oOro0-Of5AN3SRxvasU_Ts8Y7CMQvrdyx0i8OOnTI8MNpZTzHY2LaJl_vDSlRLNC84MhD0kBcXs5KF3m6s22EL0hy0KQZUu2olG6eXPlbL1i1CMd5_xzc/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;} 

.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} 

.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Gu3WI502Fe9DqZaBtjY6AIS1zsvgxHIWHaNpf5IZKHNi4P3Z8Xmjse3kLYRRzGF5V9Fg5QYSgOrRTcbiuQHvWFnFYIM_ZaLqlMaPOugUWDMrtaS6g4bYbSOjpSU1V_284OqrS7x2M6o/s1600/featured-prev.png) top left no-repeat;} 

.fp-prev:hover{opacity:1;} 

.fp-prev:active{opacity:0.7;} 

.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgamzY4liP33tDqr2bLyeFL5UkdZVvspuB2GsfrHXMEY6QtJ0tpWaoyzvGMAihB-zf8uG7aWmew-OtA14yZh8TLCUUybVOCIeTzZ8Q5kAnIl3X6stiVyxPmdE9cs99gsNBQENgPVF-MaKI/s1600/featured-next.png;) top left no-repeat} 

.fp-next:hover{opacity:1;} 

.fp-next:active{opacity:0.7;}

الأن قم بالبحث عن

<div id='main-wrapper'> 

يقع الكود بالقرب من <div id='content-wrapper'>
ملاحظة : خلال هذه العملية قد تواجهك بعض الصعوبات في تركيب الكود في حال لم تستطع تريكبه تماما قم بوضع رابط مدونتك في التعليق

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>
<div class='fp-slides'>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
<div class='fp-post'> 
<div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div> 
<h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
</div>
</div>           
<div class='fp-nav clearfix'> 
<span class='fp-pager'/>                
<a class='fp-next' href='#fp-next'/> 
<a class='fp-prev' href='#fp-prev'/> 
</div> 
          
</div>

</b:if></b:if>

قم بتعديل ما يلي 
ADD POST URL-1, 2, 3, 4, 5 HERE قم بتعويضها برابط التدوينة المراد ظهروها
ADD IMAGE-5 LINK HERE   قم بتعويضها برابط الصورة المرافقة للتدوينة ، يجب أن يكون عرض الصورة 580 بكسل و إرتفاعها 266 بكسل 
WRITE POST TITLE HERE... قم بتعويضها بعنوان التدوينة 
WRITE POST DESCRIPTION HERE قم في مكانه بكتابة ملخص التدوينة 


و في النهاية قم بحفظ القالب ، و مبروك عليك السلايدر