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

Author:

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


طريقة الإضافة:


1- اذهب إلى لوحة التحكم ثم القالب ثم تحرير HTML
2- أخذ نسخة احتياطية من قالب المدونة قبل إجراء أي تغييرات
3- ابحث عن الكود التالي باستخدام (CTRL+F)
ابحث عن الكود أضف الكود التالي فوقه مباشرة

<script type="text/javascript" src="

4- الآن قم بالبحث عن هذا الكود ]]> أضف الكود التالي قبله مباشرة

#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( 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( 50%;text-indent:-9999px;margin:50px auto}



5- لإضافة عرض الشرائح إلى المكان الذي تفضله، اتبع ما يلي:
* إذا كنت تريد إضافة شريط تمرير أسفل الرأس، فابحث عن الكود التالي

أضف الكود التالي فوقه




<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>





* إذا كنت تريد إضافة شريط تمرير أعلى التذييل، فابحث عن الكود التالي