طريقة اضافة سلايدر احترافي لمدونتك

اليوم ان شاء الله سنتعلم كيفية اضافة سلايدر شو احترافي لمدونتك ، والسلايدر له شكل جمالي وانيق جدا ويزيد من جمال مدونتك ، كما انه ينبه دائما زائر مدونتك الي افضل المواضيع التي تختارها او التي تريد اظهاراها دائما للزوار الجدد .

الان مع خطوات التنفيذ :

1- قبل اي شئ نأخذ نسخة احتياطية من قالب المدونة حتي نستيطع استرجاع القالب مرة اخري في حالة حدوث اي خطأ .
2- نذهب الي قالب المدونة ثم تعديل HTML ونضغط CTRL + f .
3- في صندوق البحث نكتب ثم نضغط Enter .
4- بعد الكود السابق نضع الاكواد التالية :

<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'/>

5- ابحث عن الكود التالي ايضا ]]></b:skin>
6- ثم نضع الاكواد التالية قبل الكود السابق مباشرة :

/*

 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; }

*  الرقم 590 هو عرض السلايدر ويمكنك تعديله حسب عرض قالبك .
6- اضغط حفظ لحفظ القالب .
7- نذهب الي التخطيط ثم اضافة اداة HTML/Javascript ثم مضع بها الكود التالي :

<div id='coin-slider'> <a href="رابط الموضوع الأول"> <img src="رابط صورة الموضوع الأول" /> <span>عنوان الموضوع الأول</span> </a> <a h