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

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

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

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

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

    ردحذف

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

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

    اتصلوا بنا
    0553061333

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


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

    ردحذف
  5. بعض الناس تعاني من مكافحة الحشرات ورش المبيدات الجيد الان لدينا شركة مكافحة حشرات بالخبر وشركة رش مبيدات بالخبر شركات على مستوي عالى جدا وبعملاء متخصصون اما بعض الناس الذي تعاني من كشف تسربات المياه وتسليك المجاري لدينا ايضا شركة تسليك مجارى بالاحساء وشركة كشف تسربات المياه بالخبر يعملون بدون اي تكسير او تخريب لانهم بعملاء متخصصون في عملهم ولدينا شركة تنظيف بالجبيل وشركة تنظيف منازل بالخبر لكل من يوريد نظافة عامة
    وللاستفسار او الطلب اتصل ب 0508400941

    ردحذف