بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني الاعزاء في هذه التدوينة سنقدكم لكم شرح اضافة إضافة سلايدر 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- اترك حقل العنوان فارغ وضع الكود في حقل المحتوى مع تعديل التسميات وروابط الصورة وتغيير عنوان الموضوع
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 != ""'> <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>
احفظ القالب وارجع لعناصر الصفحة و احذف عنوان أداة السلايدر .
شكرا جزيلا سأركبه على مدونتي
ردحذفاخى الكريم هذه الطريقه تجعل السلايدر فى الرئيسيه وفى المواضيع ايضا
ردحذفانا اريد السلايدر يبقى فى الرئيسيه فقط لا اريده يظهر فى المواضيع
وشكرا لك على هذا الشرح الجميل
اهلا وسهلا اخي تابع اخر الشرح فيه ما تريد وهي اضافة الوسوم
حذفو
تحياتي لكم