EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

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

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

لتركيب السلايدر قم بتحرير القالب ثم قم بالبحث عن الوسم </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://lh5.googleusercontent.com/-fgJF4xfwZiI/Uo9o8L5lRLI/AAAAAAAAGnw/YItb5JVccVM/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://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/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>

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

هناك تعليق واحد:

  1. جـــمـــــــيــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــل

    ردحذف

التالي السابق الرئيسية