طريقة إضافة سلايدر لمدونات بلوجر

السلام عليكم و رحمة اللهورحمته الله تعالى وبركاته

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

يمكن معاينة السلايدر على رئيسية مدونة محترفي الانترنيت أو من خلال هذه الصورة.

إضافة الأكواد إلى قالب المدونة

HTMLبعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التصميم ثم تحرير

<head> الآن ابحث عن

و بعده مباشرة ضع الأكواد الآتية

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://javascript-file.googlecode.com/svn/trunk/coin-slider.min.js' type='text/javascript'/>

]]></b:skin> بعد ذالك ابحت عن

و مباشرة فوقها ضع الأكواد الآتية


   /*

 Coin Slider jQuery plugin CSS styles
 http://workshop.rs/projects/coin-slider
*/


.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: 
left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { text-align:right; width: 590px; padding:10px; 
background-color: #000000; color: #FFFFFF; }

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;
 }


المصدر: 
http://www.doaib.com/2011/07/how-to-add-image-slider-to-blogger.html#ixzz2FqTPdWW2

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

بعد أن انهينا تحرير القالب الآن توجه إلى عناصر الصفحة ثم اضغط رابط إضافة أداة في أي مكان تشاء
:و في النافذة المنبثقة اختر أداة
HTML/Javascript
اترك حقل العنوان فارغا و في حقل المحتوى ضع الكود الآتي مع إجراء التعديلات الضرورية.
طبعا يجب أن تكون مجهزا الصور و المواضيع المختارة.

    <div id='coin-slider'>
 <a href="رابط الموضوع الأول">
  <img src="رابط صورة الموضوع الأول" />
  <span>عنوان الموضوع الأول</span>
 </a>
 <a href="رابط الموضوع الثاني">
  <img src="رابط صورة الموضوع الثاني" />
  <span>عنوان الموضوع الثاني</span>
 </a>
 <a href="رابط الموضوع الثالث">
  <img src="رابط صورة الموضوع الثالث" />
  <span>عنوان الموضوع الثالث</span>
 </a>
 <a href="رابط الموضوع الرابع">
  <img src="رابط صورة الموضوع الرابع" />
  <span>عنوان الموضوع الرابع</span>
 </a>
</div>
<script type="text/javascript">
 $(document).ready(function() {
  $('#coin-slider').coinslider({ width: 590, height: 250, navigation: true, delay: 5000 });
 });
</script>


المصدر: http://www.doaib.com/2011/07/how-to-add-image-slider-to-blogger.html#ixzz2FqUczJ5U

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