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

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

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

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

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

8- قم بتعديل الروابط الخاصة بالمواضيع والصور التي تريدها وكذلك مختصر المواضيع المضافة .
9 -  الارقام الملونة بالاحمر هي ابعاد الصورة الخاصة بالسلايدر ويمكنك تعديلها علي حسب مدونتك ولكن لابد من استخدام الصور بنفس الابعاد التي قمت بتعديلها .
* يمكنك زيادة عدد المواضيع كما تريد .
10 - اضغط حفظ وثم قم بسحب الاضافة وضعها فوق صندوق المشاركات كما في الصورة

.
11- خطوة هامة جدا لجعل السلايدر يظهر في الصفحة الرئيسية فقط ، ادخل علي قالب المدونة ثم اضغط تحرير ثم ابحث عن كلمة سلايدر ( او اسم الاضافة بعد تسجيلها في الخطوة السابقة )  ثم اجعل كود الاضافة بنفس هذا الشكل :

<b:widget id='HTML2' locked='false' title='سلايدر' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

  <b:include name='quickedit'/>

</b:if> 

</b:includable>

</b:widget>

12 - قم بحفظ القالب ثم عد مرة اخري الي التخطيط ثم امسح اسم الاضافة ( سلايدر ) حتي لا يظهر في الصفحة الرئيسية .

اي استفسار انا موجود ان شاء الله ... شكرا لكم 

منشورة في: اضافات بلوجر, دروس