سلايدر تلقائي مشابه بالموجود في المدونة
 |
| سلايدر تلقائي مشابه بالموجود في المدونة |
سلايدر تلقائي مشابه بالموجود في المدونة
من طلبات الأعضاء المتكررة سلايدر المستعمل بالمدونة حاليا ، وكما وعدتكم .. بطرحه فسأقدمه لكم في هاته التدوينة الخاصة به ، من مميزات السلايدر خفيف شكل جميل يتوافق مع جميع القوالب بدون إستثناء ومن سلبياته أنه لا يشتغل على متصفح فيرفوكس ، طريقة عمل السلايدر هي بجلب احدث التدوينات متكونة من 12 موضوع يعرض بالسلايدر تلقائيا .
شرح طريقة تركيب الإضافة
1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع الكود التالي بها
إضغط مرتيين لتحديد الكل<style>
/* Css Slider Posts */
#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/AVvXsEjoiKgBlF3ek0vEgRA4occ0BAZ30K_GVzO0ITbF2oTuKnyfxqK3ApkZjSIAMZKbWP_R27VhtYOCh7-ST-SjksbUUdW4gAnYAEcjYpHbZtCu4v2zNbuad1FYxpF0vMpq8cEcMx8-65QwdEs/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/AVvXsEiXA6LA40o045okAJqyC1-_icQLoCspEXhuvP5P9VHgaHs-5rW38MxCpcO5dpF8v2P4OvNwmh1XWVJ6gg2aiwRshtYn8q-WwASSTxaAeSGYV3pyvpC0lV3QYWNZ6fZI-5nNmQ09OQ_cG3XB/s1600/lefthm.png)no-repeat;}
.arrow.forward {background-position: 100% 50%;right: 10px;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uHijQd3EP2ya6nrWKgj_sjSAfrecgW62kaozrr1AXnkweI83Tt65tgDbAytmuRcPtslghyphenhyphenCe6dLfzyNG6GP2H_u2Gdr7AquZBAHwTAyMlvNkMUGnAGDNr25cTlLLgn-L8jOq5DOEoTLf/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='https://ar1web-com.googlecode.com/svn/Hm/slider-iHussam.js'/>
إذا اردت وضع السلايدر بداخل القالب تابع المراحل التالية :
1. ابحث داخل القالب بإستعمال Ctrl+F عن </head>
2. ضع الكود المحدد باللون الأزرق فوقه
3. ابحث عن ]]></b:skin>
4. ضع الكود المحدد باللون الأحمر فوقه
* في هذه المرحة والأخيرة يوجد عدة أماكن لوضع الكود , ويكون إما فوق المواضيع أو تحت القائمة او في الفوتر على حسب ذوقك
5. ابحث عن content-wrapper أو عن main-wrapper أو footer-wrapper ..
6. ضع الكود المحدد باللون البرتقالي فوق احد الأكواد
إذا ظهرت الأسهم بشكل متقارب ففي الكود المحدد بالأحمر كودين باللون الأبيض خاصيين بالأسهم left:13px -- right:10px عدل الرقم
عنوان التدوينة:
سلايدر تلقائي مشابه بالموجود في المدونة
تقييم :
10
من 10
مرتكز على
24 تقييم.
المدير |زياد الزعبي
زياد الزعبي : من تونس, اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,زياد ويب
* بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"
محول الأكوادعبر عن تعليقكاترك بصمتك