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

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

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


1- اذهب الى لوحة التحكم ثم قالب ثم تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بواسطة (CTRL+F)
قم بالبحث عن الكود </head> واضف فوقه مباشراً الكود التالي
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/>

4- الاّن قم بالبحث عن هذا الكود

]]></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/AVvXsEg4itnNFetL89d-qxhS6ux-GxMnwXxy5QXo0D3SZ350x_Bj5LtFwN32ivAdV6rrhGvzPZJZpgZxvp7WH69WiTksxp5QLXhZ2PiD9n-9I9T4Q-o2zIi5IBrDVDK4f_44r_qfsMSt8uksYw0/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/AVvXsEhlwIahEzK76_GNp9yXrxg2_o3jM2YP8cG6a-XfMtj4TzffhZcWNk-tVW7EbeeZyjrMOhrbJaZSWpC8ujADS3GZ5iwcK8_oZpUfRJE-8KkwQT3Rc3oAmT15ANgZDrL9PRMp5vLfmQiOJpw/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}


5- لاضافة السلايد شو بالمكان الذي تفضله اتبع الاّتي :
* اذا اردت اضافة السلايدر تحت الهيدر ابحث عن الكود التالي

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

* اذا اردت اضافة السلايدر فوق الفوتير ابحث عن الكود التالي

<div id='footer-wrapper'>

واضف فوقه الكود الاخير

إرسال تعليق

0 تعليقات