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

إخواني الكرام كيف الحال

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

يمكنك معاينة شكله في مدونتي لكني قمت بتغييره قليلا المهم الشكل الأصلي للسلايدر هو كما في الصورة التالية

في الشكل الأصلي الصور كبيرة ويضهر عنوان الموضوع وقد يفضل بعضكم هذا الشكل وههو تم طرحه لكم ولمن أراد نفس الشكل الذي أستعمل فليضع ردا ويستم طرحه هو الآخر

لتركيب السلايدر قم بتحرير القالب ثم قم بالبحث عن الوسم </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:right;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:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLevFiP9SJ2JJqd5hH1U3IEmigtXbabPPt44q6hFvbhS3nxJgXPsorjfH_KmEy5J06Ww9C7doltW7T-5iyI_FaJTKazb5KhoMjL7437AD2nvDrMIcI5N1qdNsgzgWE__PTPd7SvugH-4/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/AVvXsEgTNW6k-qiqKZMAmZJuYbMY8URFu3oVuLSi6KFZgBGq_xij9hrOU_EGXwL_piq-zrE9q8XnGdX7knfH7DwPJ0TyFNc-IIvxRLaPwlIxj4xxCdpjx4LNDOfgejilZX7tz1I_cVmxfn_X7Mg/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

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

وفوقه ضع هذا الكود

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>تحميل...</span>
</div>
</div>
</b:if>

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

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

</b:if>

وسيضهر السلايد في جميع صفحات المدونة

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

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