اضافة سلايدشو تلقائي لعرض التدوينات على شكل شريط متحرك

السلام عليكم ورحمة الله وبركاته

اليوم وفي هذا الموضوع الحصري حبيت اقدم لكم اجمل سلايدر لعرض التدوينات تلقائياً على شكل شريط متحرك والسلايدر احترافي بكل معنا الكلمة فهو يضيف لمسة من الجمالية على قالب مدونتك ويعرض لك مواضيع مدونتك . الان نتطرق الى شرح تركيب السلايدر

♦ طريقة تركيب السلايدر ♦

 1- من  لوحة التحكم -> قالب -> تحرير HTML 

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

قم بالبحث عن الكود </head> واضف فوقه مباشراً الكود التالي

<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/>

 والان قم بالبحث عن الكود ]]></b:skin> واضف قبله مباشراً الكود التالي

#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}

#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}

#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:#222;border-left:1px solid #111;border-right:1px solid #333;}

.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}

.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}

.title-featured{text-align:center;position:relative;margin-top:-20px}

.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}

.arrow{position:absolute;display:block;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9h7S5e65wtsrg55QwyVvtw99o2sQYTc11WqaBc4t1dRZhxav6t94MwGiW3YJn3JalV0JwZ4C8RwXWVItJTZDTw8aae6F_O2w88Bpw0O_Goin9NaISC_7frcvVR7MDhDcP1MN-GYLkfE/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}

.arrow.back{background-position:0 50%;left:10px}

.arrow.forward{background-position:100% 50%;right:10px}

span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAEe5gzLlU0-T3wmly8SgsVIGJBo7NDcIinrB8TOl0pGnjFXDnbfcRaK_AYqTGtyhDwijV2sTR0hGNOXux1G93pAKbI4Nwbxb0B6IT2jKiy_eAs6w80567RMzIYOkl7-Cii_u0RuVPKw/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

والان الخطوة الاخيرة مكان اضافة السلايدر في القالب
1- اذا اردت اضافة السلايدر تحت الهيدر ابحث عن الكود التالي <div id='main-wrapper'> واضف فوقه الكود التالي

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='featured-wrap'>

<div id='featured'>

<span class='slideloading'>Loading...</span>

</div>

</div>

</b:if>

 2- اذا اردت اضافة السلايدر فوق الفوتير ابحث عن الكود التالي <div id='footer-wrapper'> واضف فوقه الكود الاخير

اضغط حفظ ومبروك عليك السلايدر الجميل والاحترافي

تنبيه :- نقل بدون ذكر مصدر ممنوع

دمتم في رعاية الله وحفظه

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

azez mohammed

اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها التصوير ، الرياضة ، والتصميم بحد ذاته ومدونة تعاون تعبر عما أهواه .