السلام عليكم و رحمة الله.
بعد أن ركبت إضافة الصور المنزلقة إي ما يسمى بالسلايدر Slidershow على مدونة ذؤيب استحسنها الكثير من الإخوان الكرام، و نزولا عند طلبهم أقدم بإذن الله في هذا الموضوع طريقة تركيب هذه الإضافة التي حقا تضفي لمسة جميلة على المدونات و تساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان. و قبل متابعة الموضوع وجب أن أشير إلى ضرورة حفظ نسخة احتياطية من القالب قبل أي تعديل، كذلك لاحظت أن كثيرا ممن لا يجدون الأكواد المبحوث عنها ينسون أن يضعو علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
يمكن معاينة السلايدر على رئيسية مدونة ذؤيب أو من خلال هذه الصورة.
إضافة الأكواد إلى قالب المدونة
بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التصميم ثم تحرير HTML.
الآن ابحث عن <head> و بعده مباشرة ضع الأكواد الآتية :
بعد ذالك ابحث عن ]]></b:skin> و مباشرة فوقها ضع الأكواد الآتية:
■ يشير العدد المكتوب بالأحمر إلى عرض مستطيل عنوان الموضوع و طبعا يحبذ أن يكون نفسه قياس عرض السلايدر الذي سنرى كيفية تحديده في الخطوة الموالية.
بعد إجراء هذه التعديلا الآن اضغط زر حفظ القالب.
بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التصميم ثم تحرير 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; }
■ يشير العدد المكتوب بالأحمر إلى عرض مستطيل عنوان الموضوع و طبعا يحبذ أن يكون نفسه قياس عرض السلايدر الذي سنرى كيفية تحديده في الخطوة الموالية.
بعد إجراء هذه التعديلا الآن اضغط زر حفظ القالب.
