السلام عليكم ورحمة الله وبركاته
الان مع خطوات التنفيذ :
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 التعليقات:
إضغط هنا لإضافة تعليق
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )
Blogger Widgets