الأحد، 7 أبريل 2013

اضافة سلايدر لمدونات بلوجر 2013 - شرح اضافة سلايدر بالصور 2014

مرسلة بواسطة التسميات:
بسم الله و الحمد لله و الصلاة و السلام على المصطفى الأمين نبينا محمد العدنان و على الآل و الصحب أجمعين.

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


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


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


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

بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التصميم ثم تحرير HTML.
الآن ابحث عن <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>
 
احفظ القالب و عد لعناصر الصفحة و احذف عنوان أداة السلايدر.
 
واى استفسار ضع رد وسيتم الرد عليك ف اسرع وقت 
 

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

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

  1. Unknown15 أبريل 2013 في 3:36 ص

    تجربة

    ردحذف
  2. Unknown8 أكتوبر 2013 في 9:15 م

    السلام عليكم
    انا بنشئ مدونه دلوقت انا واتنين زملائى هتكون عن التقنيه وستتخصص فى الاندرويد و ios و الويندوز وانا لاقيت قالب حضرتك اللى مركبه ده وشبيه جدا بقالب مدونة نيو تك وانا بدور عليه من زمان بس قالب نيو تك فيه كثير من الاضافات الجيده وانا اطلب مساعدتك فى كتابة اكواد هذه الاضافات
    وبالمناسبه انا استفدت جدااا من مواضيع حضرتك وساعدتنى بالذات موضوع الاسلايدر ده واستفدت كثيرا من باقى المواضيع وشكرا

    ردحذف
  3. elbshyar1 نوفمبر 2015 في 8:50 م

    شركة تنظيف بمكة
    اطلب الان خدمات التنظيف من افضل شركة تنظيف بمكة شركة صقر البشاير, نحن شركة تنظيف منازل بمكة نقوم بتقديم جميع خدمات التنظيف بجودة عالية ومع عمالة مدربة جيداً على التنظيف
    نقوم بتنظيف فلل, تنظيف مجالس, تنظيف مفروشات وتنظيف كل شئ باقل الاسعار بالمملكة السعودية
    شركة تنظيف فلل بمكة
    شركة تنظيف منازل بمكة
    اتصل بنا على 0500941566
    http://www.elbshayr.com/5/House-clearance

    ردحذف
  4. Unknown21 سبتمبر 2016 في 3:15 م


    شركة عزل خزانات بالمدينة المنورة

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

    اتصلوا بنا
    0553061333

    شركة عزل خزانات بالمدينة المنورة


    http://www.forsan-elkhaleg.com/19/Cleaning-tanks-company-in-Madinah

    ردحذف

الاشتراك في: تعليقات الرسالة (Atom)