سلايدر تلقائي لعرض احدث المواضيع




من طلبات الاعضا المتكرره سلايدر خفيف لقوالب بلوجر واليوم ساطرح لكم في هذه التدوينة سلايدر جميل وخفيف من ميزاته انه خفيف ومتجاوب مع اي قالب ويستخدم في اي قالب بلوجر ومن سلبياته انه لا يعمل على متصفح فيرفوكس ،طريقة عمل السلايدر هي بجلب احدث التدوينات متكونة من 12 موضوع يعرض بالسلايدر تلقائيا
*ملاحظه السلايدر لا يدعم متصفح فيرفوكس 
شرح طريقة التركيب
1. مباشره من صفحة التخطيط اضف اداة Html/JavaScript وضع الكود التالي بها
<style>
/*  Css Slider Posts qaisi1web */
#featured-wrap {position: relative;height: 175px;margin: 0 auto;border-radius: 4px;}
#featured {border: 0;outline: none;position: relative;width: 890px;height: 150px;overflow: hidden;top: 10px;margin: 0 auto;}
.datex {display: none;}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li {width: 150px;display: inline-block;float: left;height: 150px;background: #fff;}
.thumb-featured {width: 130px;height: 100px;margin: 5px auto;border: 1px solid #fff;}
.thumb-featured img {display: block;width: 134px;height: 94px;border: 1px solid #ddd;padding: 2px;cursor: url(http://4.bp.blogspot.com/-qkEpq30SGqY/VFDnmVq7KGI/AAAAAAAAGig/s9v1b9t3b-w/s1600/Untitled-2.png),pointer;-moz-transition: all .3s ease 0s;}
.title-featured {text-align: center;position: relative;margin: 0 4px;font: 10px Electrolize,ge_dinar_oneregular;}
.title-featured a {color: #555;}
.title-featured h4{overflow:hidden}
.arrow {position: absolute;display: block;width: 32px;height: 32px;top: 60px;text-indent: -9999px;}
.arrow.back {left: 13px;background: transparent url(http://4.bp.blogspot.com/-tazd_K28hNA/VC1JAH9aZhI/AAAAAAAAGNM/fqwW3eGxCDI/s1600/lefthm.png)no-repeat;}
.arrow.forward {background-position: 100% 50%;right: 10px;background: transparent url(http://3.bp.blogspot.com/-pI5M9xJ7490/VC1JAZWY04I/AAAAAAAAGNQ/I4PxW6BCsTE/s1600/righthm.png)no-repeat;}
span.slideloading{text-indent:-9999px;margin:50px auto;font-family:Electrolize,ge_dinar_tworegular}
</style>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>جاري التحميل ...</span>
</div>
</div>
<script src='//cdn.rawgit.com/assadalqaisi/qaisi1web/master/slider-qaisi1web.js'/></script>
اذا اردت وضع السلايدر داخل القالب تابع الخطوات التاليه :
1. ابحث داخل القالب بأستعمال ctrl+f عن </head>
2. ضع الكود المحدد باللون الاصفر فوقه/قبله
3. ابحث عن ]]></b:skin>
4. ضع الكود المحدد باللون الازرق فوقه
*  في هذه المرحله الاخيره ، يوجد عدة اماكن لوضع الكود يكون اما فوق المواضيع او تحت القائمه او فوق الفوتور حسب الذوق
5. ابحث عن content-wrapper أو عن main-wrapper أو footer-wrapper
6. ضع الكود المحدد باللون البرتقالي فوقه
إذا ظهرت الأسهم بشكل متقارب ففي الكود المحدد بالأحمر اسمين باللون الأخضر خاصيين بالأسهم left:13px -- right:10px عدل الرقم

من طلبات الاعضا المتكرره سلايدر خفيف لقوالب بلوجر واليوم ساطرح لكم في هذه التدوينة سلايدر جمي...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
10 التعليقات
avatar

لم اجد هده ]]>
مادا اعمل

avatar

السلام عليكم اخي اريدك ان تغير لون قالب مدونتي هل يمكنك المساعده

avatar

مستحيل هذه الوسم موجود في جميع قوالب بلوجر .. تاكد مره اخرى اخي

avatar

وعليكم السلام اخي اتمنى المره القادمه ان تترك تعليقك في مكانه المناسب ... بالنسبه لسؤالك اعطني رابط مدونتك حتى اعطيك اكواد اللون

avatar

هذا رابط المدونة tridwn.blogspot.com

avatar

ابحث داخل القالب بأستعمال ctrl+f عن #43beb9 وغيره بالون الخاص بك

avatar

والون الثاني اخي

avatar

بالنسبه للون زر الرئيسيه ولون زر مربع البحث قم بتغير هذه الكود
#3cada8 ... بالتوفيق

avatar

شكرا لك اخي انت الافضل

avatar

شكرا لمدحك اخي الكريم

كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *