طريقة إضافة سلايدر مدونة ذؤيّب

ديسمبر 31, 2012

السلام عليكم ورحمة الله وبركاته أوّلا أقدّم تحياتي إلى زوار مدونة رفاد وكل عامّ وانتم بخير في تدوينة اليوم سأقدّم لكم إضافة مهمّة جدّا إلى كلّ مدونات بلوجر ألا وهي سلايد شو طبعا فأغلبكم عنده سلايدر في مدونته فهو لن يهتمّ بموضوعنا لكن في هذه التدوينة سنتطرّق إلى كيفية إضافة سلايدر مدونة ذؤيّب المميّز والمختلف من نوعه ( للمعاينة ) لن أطوّل عليك ونمرّ إلى التطبيق .

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

أوّلا إبحث عن هذا الكود <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; }

■ يشير العدد المكتوب بالأحمر إلى عرض مستطيل عنوان الموضوع

إضافة أداة السلايدر إلى تصميم المدونة

بعد أن أنهينا تحرير القالب الأن نتوّجه إلى عناصر الصفحة ثمّ اضغط رابط إضافة أداة 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>

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

بعد ذلك إضغط على زرّ حفظ

جعل إضافة السلايدر تظهر فقط بالصفحة الرئيسية

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

ثمّ أضف الأكواد المكتوبة باللون الأحمر كالأتي :

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

إحفظ القالب وعد لعناصر الصفحة واحذف أداة السلايدر ومبروك عليك

أتمنّى أن تدوينة اليوم أعجبتك إلى تدوينة أخرى إن شاء الله

الشكرا الجزيل لمدونة ذؤيّب التي اتاحت لمستخدميها هذه الإضافة

رابط الموضوع الأصلي من هنــا

بحث هذه المدونة الإلكترونية

مــدونة رفـاد

طريقة إضافة سلايدر مدونة ذؤيّب

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

كود المساحات الاعلانيه الرائع

طرق جلب الزوار الجزء الثاني

أكواد HTML مهمة لكل مدون بلوجر