السلام عليكم ورحمة الله وبركاته ~
كيف حالكم أحبتي متابعي مدونتي ؟! إن شاء الله في تمام الصحة والعافية
اقدم لكم أول دروسي عن البلوجر وهو درس جداً جميل وأكيد بيعجبكم .. :)
أو ما يعرف بالبنر في المنتديات والمواقع لكن الآداة هذه فيها اختلاف بسيط عن البنر العادي
لان السلايدر شو بيتحرك بحركة جداً رائع للصور بعكس البنر ..
فإذا كنتو تبغو تعرفوا شكل السلايدر شو ادخلوا على الصفحة الرئيسة في مدونتي .. :)
اذاً فلنبدأ الدرس :) .. :
-=-=-=-=-=-=-=-=-=-=-=-=-
أولاً ندخل على المدونة الخاصة بكم ونضغط على : تصميم > قالب > تحرير HTML
ثم نبحث عن الكود التالي بإستخدام CTRL + F :
<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*/
.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: 716, height: 250, navigation: true, delay: 5000 });
});
</script>
اللون الأحمر لرابط الموضوع اللي بيكون في البنر
اللون البرتقالي لصورة الموضوع اللي بيكون في البنر
اللون الأخضر عنوان الموضوع , أنا بالنسبة ليا ما أستخدم عنوان المضوع لأني كاتب
عنوان الموضوع في نفس الصورة , إذا كنت ما تبغى عنوان للموضوع أحذف كود العنوان فقط .
اما اللون الأزرق الفاتح فهو لعرض الصور ويمكنك تغييره على حسب صورتك
واللون الوردي فهو لطول الصورة ويمكنك تغييره على حسب صورتك
ويمكنك تكرار الاكواد إذا كنت تبغى أكثر من أربعة مواضيع في البنر .
وبعد الإنتهاء قم بالضغط على " حفظ الآداة "
وبعد الحفظ اسحب آداة الـ HTML/Javascript فوق " رسائل المدونة الإلكترونية " , كما في الصورة :
ليصبح بهذا الشكل :
وبعد ذلك اضغط على زر الحفظ الموجود في الأعلى وهكذا قد انتهينا من إضافة السلايدر شو وهنيئاً لك :)
-=-=-=-=-=-=-=-=-=-=-=-=-
اما الآن فننتقل لطريقة جعل السلايدر شو يعمل فقط في الصفحة الرئيسية , فتابعوا معي :
ادخل على آداة الـ HTML/Javascript اللي عملنا بها السلايدر شو وأكتب في العنوان
أي شيء مثلاً : سلايدر شو
وقم بالحفظ , ثم أنتقل الى : القالب > تحرير HTML
ثم ابحث عن " سلايدر شو " بالضغط على CTRL + F كما علمنا سابقاً
ثم ضع الأكواد الملونة بالأحمر كالتالي :
<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>
ثم احفظ القالب وإنتقل مجدداً إلى آداة الـ HTML/Javascript وأحذف العنوان ثم قم بالحفظ
إن شاء الله يكون الدرس قد حاز على رضاكم وان شاء الله كان سهل ,, بيس :)
انتهى الدرس .
إن شاء الله يكون الدرس قد حاز على رضاكم وان شاء الله كان سهل ,, بيس :)
كيف
ردحذفاخليها تتحرك
تطلع لي تحت بعض
زي كدا
http://www.m5zn.com/img/?img=59fbd2882188444.png
اتمنى توضح لي
عندك خطأ في طريقة وضع الأكواد حاول تسويها مرة ثانية والأفضل انك تسوي مدونة ثانية للتجربة عشان لا تتلخبط أكواد المدونة الرئيسية :)
ردحذف