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

من طلبات الاعضا المتكرره سلايدر خفيف لقوالب بلوجر واليوم ساطرح لكم في هذه التدوينة سلايدر جميل وخفيف من ميزاته انه خفيف ومتجاوب مع اي قالب ويستخدم في اي قالب بلوجر ومن سلبياته انه لا يعمل على متصفح فيرفوكس ،طريقة عمل السلايدر هي بجلب احدث التدوينات متكونة من 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1Wr2wJGMLyFtRCOvi73872oRY1O9gobdoYkSSzMt399vCeMZ9tULYxCb7k6JoPU_QIwRnjR8CajJlZm6AW2yh-b4qi1mASPBjCTIz2oQ4QbkMOIDl1g49SEOy6VeDgOE-qGWVneQOk0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtLL6YvBlPFeeOGH6OV1V_quygp55WnUfeNcJ6dC58KMw0N7iRHnL0b3u040oR2zKO3VC3tJdrKvH2D9eLEu_AVo1MaYYzWTk17JzvQLDs4836oH5XJ7hyphenhyphenOwJticDAUm2x2HxEuTkxByC/s1600/lefthm.png)no-repeat;}
.arrow.forward {background-position: 100% 50%;right: 10px;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGGwDQoHHDyzvcj2J_FOod_ga-cjRwOKB-Y3Ftg_4KLzU4PDc15e8yyQdUzNK0zFnRqUA-UHfOf_dVTNlbb7Qv9NXHrmlz38EOd-rXiGYYCT4Ndz-GXnSteGLpiaYqJotC75QCFULKRrr-/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 عدل الرقم

https://qaisi1web.blogspot.com/2016/02/slider-posts.html