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

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

طريقة التركيب:
لتركيب هذه السلايد ما عليك سوى:
1- الذهاب إلى لوحة التحكم
2- ثم إلى  قالب
3- بعدها ننقر على تحرير ال html.
4- نأخد نسخة احتياطية لقالب المدونة تفاديا لبعض المشاكل والرجوع للنسخة الأصلية في حالة حدوث مشكل.
5- النقر على  CTRL+F.

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

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

8-مرة أخرى نبحث عن هذا الكود ]]></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/AVvXsEhBKPvvv7jmzcDKsLJ9xeVLC2mZLlNKCNZ5VBtoO8zJXGyk_RDb6DjDdJtFs086HAAx-NYv7QWxISJovuzhJ4S5kKZaeAv6JRN40gfNaHUH4yC0ee01EnNMN1qsH7CGrFA6hFKtprUryCQ/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/AVvXsEhezNiBdf0jH732ynDaBYcKKuEOVVUQeJbNqQLB0F4Y6zUkCo2WvZBxX9alRwBXZngfWOFmpdGMzxDOcFqoOT-97oeXU-xfWUOj303qA_s7RDI-207CruXIOF9vGzPEf1MMxvWQjub192E/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

9- بعدها نقوم بنسخ الكود  التالي  ووضعه في:

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

ومبروك عليكم السلايدشو.