اليوم ان شاء الله سنتعلم كيفية اضافة سلايدر شو احترافي لمدونتك ، والسلايدر له شكل جمالي وانيق جدا ويزيد من جمال مدونتك ، كما انه ينبه دائما زائر مدونتك الي افضل المواضيع التي تختارها او التي تريد اظهاراها دائما للزوار الجدد .
الان مع خطوات التنفيذ :
1- قبل اي شئ نأخذ نسخة احتياطية من قالب المدونة حتي نستيطع استرجاع القالب مرة اخري في حالة حدوث اي خطأ .
2- نذهب الي قالب المدونة ثم تعديل HTML ونضغط CTRL + f .
3- في صندوق البحث نكتب ثم نضغط Enter .
4- بعد الكود السابق نضع الاكواد التالية :
5- ابحث عن الكود التالي ايضا ]]></b:skin>
6- ثم نضع الاكواد التالية قبل الكود السابق مباشرة :
* الرقم 590 هو عرض السلايدر ويمكنك تعديله حسب عرض قالبك .
6- اضغط حفظ لحفظ القالب .
7- نذهب الي التخطيط ثم اضافة اداة HTML/Javascript ثم مضع بها الكود التالي :
8- قم بتعديل الروابط الخاصة بالمواضيع والصور التي تريدها وكذلك مختصر المواضيع المضافة .
9 - الارقام الملونة بالاحمر هي ابعاد الصورة الخاصة بالسلايدر ويمكنك تعديلها علي حسب مدونتك ولكن لابد من استخدام الصور بنفس الابعاد التي قمت بتعديلها .
* يمكنك زيادة عدد المواضيع كما تريد .
10 - اضغط حفظ وثم قم بسحب الاضافة وضعها فوق صندوق المشاركات كما في الصورة
.
11- خطوة هامة جدا لجعل السلايدر يظهر في الصفحة الرئيسية فقط ، ادخل علي قالب المدونة ثم اضغط تحرير ثم ابحث عن كلمة سلايدر ( او اسم الاضافة بعد تسجيلها في الخطوة السابقة ) ثم اجعل كود الاضافة بنفس هذا الشكل :
12 - قم بحفظ القالب ثم عد مرة اخري الي التخطيط ثم امسح اسم الاضافة ( سلايدر ) حتي لا يظهر في الصفحة الرئيسية .الان مع خطوات التنفيذ :
1- قبل اي شئ نأخذ نسخة احتياطية من قالب المدونة حتي نستيطع استرجاع القالب مرة اخري في حالة حدوث اي خطأ .
2- نذهب الي قالب المدونة ثم تعديل HTML ونضغط CTRL + f .
3- في صندوق البحث نكتب ثم نضغط Enter .
4- بعد الكود السابق نضع الاكواد التالية :
<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'/>
5- ابحث عن الكود التالي ايضا ]]></b:skin>
6- ثم نضع الاكواد التالية قبل الكود السابق مباشرة :
/*
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; }
* الرقم 590 هو عرض السلايدر ويمكنك تعديله حسب عرض قالبك .
6- اضغط حفظ لحفظ القالب .
7- نذهب الي التخطيط ثم اضافة اداة 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>
8- قم بتعديل الروابط الخاصة بالمواضيع والصور التي تريدها وكذلك مختصر المواضيع المضافة .
9 - الارقام الملونة بالاحمر هي ابعاد الصورة الخاصة بالسلايدر ويمكنك تعديلها علي حسب مدونتك ولكن لابد من استخدام الصور بنفس الابعاد التي قمت بتعديلها .
* يمكنك زيادة عدد المواضيع كما تريد .
10 - اضغط حفظ وثم قم بسحب الاضافة وضعها فوق صندوق المشاركات كما في الصورة
11- خطوة هامة جدا لجعل السلايدر يظهر في الصفحة الرئيسية فقط ، ادخل علي قالب المدونة ثم اضغط تحرير ثم ابحث عن كلمة سلايدر ( او اسم الاضافة بعد تسجيلها في الخطوة السابقة ) ثم اجعل كود الاضافة بنفس هذا الشكل :
<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>
اي استفسار انا موجود ان شاء الله ... شكرا لكم
اسمي الكامل جلول عمار جزائري الجنسية من عشاق البحت و اكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت كما أسعى لتحقيق طموحاتي من خلال هذا الموقع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة
0 التعليقات