3
إضافة سلايدر Slidershow لعرض الصور لمدونة بلوجر

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

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

للحصول على هذه الاضافة يجب عليك ...
اولا : قم بالدخول الى لوحة التحكم لمدونتك مـــن هنـــا
ثانيا: توجه إلى صفحة التصميم ثم تحرير HTML.
الآن ابحث عن <head> و بعده مباشرة ضع الأكواد الآتية :
<script src='http://aliraqia-blog.googlecode.com/files/jquery.Slider.js' type='text/javascript'/>
<script src='http://aliraqia-blog.googlecode.com/files/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; }
العدد الملون بالأحمر (590pxهو قياس عرض السلايدر واذا اردت تغييره يجب قرأءة الموضوع للنهاية بعد إجراء هذه التعديل 
احفظ القالب

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

1- اذهب إلى عناصر الصفحة ثم اضغط على إضافة أداة 
2- ثم اختر أداة HTML/JavaScript  
3- اترك حقل العنوان فارغ وضع الكود في حقل المحتوى مع تعديل التسميات وروابط الصورة وتغيير عنوان الموضوع 
<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>
يجب وضع السلايدر بهذا الشكل 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

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

<a href="رابط الموضوع الجديد">
  <img src="رابط صورة الموضوع الجديد" />
  <span>عنوان الموضوع الجديد</span>
</a>

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

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


احفظ القالب وارجع لعناصر الصفحة و احذف عنوان أداة السلايدر .


هل أعجبك الموضوع ...؟

اشترك معنا وأحصل على جديد المدونة :)

تابعنـا عبــر مواقــع التواصــل

هناك 3 تعليقات:

  1. شكرا جزيلا سأركبه على مدونتي

    ردحذف
  2. اخى الكريم هذه الطريقه تجعل السلايدر فى الرئيسيه وفى المواضيع ايضا

    انا اريد السلايدر يبقى فى الرئيسيه فقط لا اريده يظهر فى المواضيع

    وشكرا لك على هذا الشرح الجميل

    ردحذف
    الردود
    1. اهلا وسهلا اخي تابع اخر الشرح فيه ما تريد وهي اضافة الوسوم


      و


      تحياتي لكم

      حذف

 
جميع حقوق النشر محفوظة : تحياتي إدارة مدونة الكوفي العراقيـة 2012