اضافة سلايدر شو خفيف و انيق لمدونات بلوجر ~ مـدونــة سـكانيـا مصــر

اضافة سلايدر شو خفيف و انيق لمدونات بلوجر

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

معاينة

طريقة التركيب

أول شئ خذ نسخة إحتياطية من قالبك لتجنب المشاكل

ثم ادخل الى تحرير القالب

ابحث عن الوسم]]></b:skin> و الصق فوقه الكود التالي

/* ------ mudwnp Slider ------*/
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
#slider { width:700px;height:306px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiykSsZheHTvHLeI6sMxr26P3rsU5KQhTxdEEttARj261xpzfyLlrQzKLhm22oNj_4vaFaxxsH29QrvEI4HacistL9n-EQBrbvKBiy6sbw2UZmWmA0XUtHVDpaF6N42tBZXP3lv5j3KupP/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
} div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrXV_eQpKha_mTxDxpfSkEKe9xSsPcvzGri58H5iAH2Lslf-4AL-kt9_0dx4evwIFEr-PJ92cwPWJL_l9R8NZk0NDKM8fUN77ttwYlEM-f5nzqZrjXRIlZpLpo7bNjKks2GPB9O_2oxYHn/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
#slider
{
transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
/* ------ mudwnp Slider ------*/

تنسيق السلايدر شو

بالنسبة للرقم 700 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 306px هو إرتفاع السلايد يمكنك تعديله
لتغيير الخط و حجمه قم بتغيير كلمة Arial و الارقام التي بجانبها بالحجم و الخط الذي تريده

وأضف الكود التالي تحت هذا الكود <div id='main-wrapper'>

<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B0wTCJB4dkJ7Y3BZMkNWREd5MUk" type="text/javascript"></script>
<div style="display:none;" ><a href="http://www.infotechblogging.com"></a></div>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSq9fgVaAziMvo7yp-Wr3cxmJprSwoUFP3ZwuO4q0nBQuSSrmocYqFH7R1MHDHniH3PjdafNKfjS0GgWSIxSO7Mxx54ZoyN1IY0k_LINDdFyUTXhUtxiNtKo7OsG04RNG89bKVC762wRTd/s1600/Cars-Lamborghini-Free-Wallpaper.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdRQ00_MkK5Q1UrUm0H92erawMjLXqI0CDbELUDy2-uWFHrCE6hP_PqAyY_wVhWC0lT_mjk-kwljvwsY2ORaDI9l1NbJH8DVkDz2R9AYpOddtjqUtPghqnNvCmlT26E8qKIT8iVZDTw2_/s1600/ferrari_enzo-wide.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpUzXu9Ddu2mBSZFx6dDXgInLo_3DPh9JgHLSVGkNZrxC_yVldxPOaTE3-EQfj7ut1RgzCqtbnPcG32JAUoTA2dG3WyXM35JgMYuZOYDMGx9v1HxwQfQYNJLEfXuAHLAURHh3PD8uQc83w/s1600/lamborghini-car-wallpapers1.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rAq00Oj2STe7Qg0xZWpjS2Qy5cx-4gS42d9bJp6BOhDmdhxYem-pmS8DGVDZWPOT1SexN58lKReURVa9JWfJBBKKKxw6lXA6zNIzA3lJf1cTQFbBBA26T_oiF0XJWlkcfjoS9G-EFO7M/s1600/Lamborghini-Cars-Wallpapers-3.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLescupIRMBIYCGPWUvSfeVgFtouWvy4C0yVVYwZg7UnKbVj5EFuYscaf32ewhHB4x5HUCpq7Oa-K8zElw4GfTkxm_dOfo-a3bPT27El2r0evxU2OhH7YeIIsZK26XehBsW-QePaMMbeNt/s1600/top-hd_latest_cars_wallpapers.jpg" alt="اسم الموضوع"/></a>
</div>
</div>

اعدادات السلايد شو

استبدل ما هو باللون الازرق برابط الصورة الذي تريده
استبدل ما هو باللون الاحمر باسم الموضوع او القسم الذي تريده
استبدل ما هو باللون الاصفر # برابط الموضوع او القسم الذي تريده

من يواجه مشكلة في تنسيق او تركيب السلايدر ضعها في التعليق

في امان الله

الثلاثاء، 9 ديسمبر 2014