سلايدر تلقائي مشابه بالموجود في المدونة


سلايدر تلقائي مشابه بالموجود في المدونة
سلايدر تلقائي مشابه بالموجود في المدونة
سلايدر تلقائي مشابه بالموجود في المدونة


من طلبات الأعضاء المتكررة سلايدر المستعمل بالمدونة حاليا ، وكما وعدتكم .. بطرحه فسأقدمه لكم في هاته التدوينة الخاصة به ، من مميزات السلايدر خفيف شكل جميل يتوافق مع جميع القوالب بدون إستثناء ومن سلبياته أنه لا يشتغل على متصفح فيرفوكس ، طريقة عمل السلايدر هي بجلب احدث التدوينات متكونة من 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/AVvXsEjYarNO5HRZfDrGAMnVrhvMJM8SDdCK8G5cCwlMKSgWT4VQ3tNWD3siZikJFqJyJ90alRdqlCIE-Q2gWzdbf_SDY8fW0mfmnxl3SjoBmW6v0wzPHrFiTTM02HP-baKrpXoKvh4S4_jvhhg/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/AVvXsEgNA04bFL1qOhoYw-3P5M3JwtCisBoJr3xaGH6XVWoZ6aOUGhKyUNd_puoE50dr-nrmSZI7SXlxqFTQJ0qbmY8b4NFuePcQmHcYVVNTBy13nIAlr2b2678laq3f6amGsnt6IrARw-3BNnis/s1600/lefthm.png)no-repeat;}
.arrow.forward {background-position: 100% 50%;right: 10px;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs1fS9KaFobLYq5BDVN0lgJ5HFnr2Vkt2eo-BOJNTlbmicpZB3J170o3pRiySmLiZyaspEhyphenhyphenbhcBdW-bp2fO212oglVVTzmCEC-TAb2YAPdXCT9wb87AJlU2n9cMjjStlMgLytjeZzl9bH/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 عدل الرقم 
 عنوان التدوينة: سلايدر تلقائي مشابه بالموجود في المدونة
ما هو التقييم الذي يمكنك اعطاءه لهذه المدونة ؟

فظيعة

سيئة

متوسطة

جيدة

ممتازة

لا

مكتبة قطر الندى للمواقع الاخبارية والتطبيقات الذكية تأسست سنه 2017 في العراق .

ٌ

ليست هناك تعليقات:

إرسال تعليق

تواصل معنا !

للتواصل أو الإستفسار معنا يرجى مراسلتنا من خلال نموذج المراسلة أسفله !

video

مكتبة قطر الندى للمواقع الاخبارية والتطبيقات الذكية تأسست سنه 2017 في العراق .

صاحب الموقع : الاعلامي كرار الكعبي عراقي الجنسية من مواليد 1996 مطور ومصمم مواقع وتطبيقات احترافية.

www.facebook.com/IRAQ.KGB97

جميع الحقوق محفوضة لـ شركة قطر الندى هوست للبرمجة
تصميم و تطوير : كرار الكعبي
تابع موقع قطر الندى للبرمجة
Join on this site

كن احد متتبعي ال