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

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

معاينة

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

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

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

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

#sliderFrame {position:relative;width:700px;margin: 60px auto 40px;}
     
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
  background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjTQyww56IzqRrjZYbTKjjiIjzaV7Z7MEoEib7YtTnA8dbOaRlLWEbeQpkEtbMgI0P6JtTy85Aut727TAfdCu5SZfYnpSmKUT15QK30Pd5OvOtuQiv7D9g71h_aZhhr2ZaJB9mpFrXlVPy/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;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
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;
}

/* ------ built-in navigation bullets wrapper ------*/
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;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sCJ9eXw3FrhDkjxKKVkPtDJrAlyj53JocTQYIKEzUClWDpYipwvNGOY6LqpzuBZ-IgDtWS8DxifMiGYOZkkOrkRE1sGgfIX5IlvRdkvXCh19nlK525XlMX0XZfcvmqBrgaTyuP05zKtf/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 a, .intro, a.intro {
    color: rgba(0, 0, 0, 0.2);
}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}

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

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

وأضف الكود التالي تحت هذا الكود

#">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5zh7FHtWGEZrQa-Qr1E4XKoSxgMW7FXUH0eFaH_1OU4R6FKbHf095LsgfPJjhiM9TVWb587_LNomqQeCynQaiOhWMhkrF37QGNVt_dQ_Z_f1fqUkbHmoCsN9tlOx7ABrZocmiOOhIToaj/s1600/Cars-Lamborghini-Free-Wallpaper.jpg" alt="اسم الموضوع" />

#">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIumETFcB_6AjY9sTUYvnyegTxJEiC8G6NA7aRO2H8YxUc-3p_NiSY2kXV1hnIrVCdih3-hU7ZPTezJc8-3eaWOiKn6azn-msXv3Xtf0HPbX9A_y07dHSUKc16wuR3qYiv6UMLhJ6fM1NC/s1600/ferrari_enzo-wide.jpg" alt="اسم الموضوع" />

#">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJTM7cQrboNCBT0RvDLAESUTft8CpfH5lkGu3TiIPqBYC9OcJvwz9Wdr8t3Tik7wG8NY2pEJbOAPucumBdbrdzEuCpzmT7j7-8B7KJAGcCGFrQHkGt2mjdHDOSe2VJStPtf-M1ei1bIrc/s1600/lamborghini-car-wallpapers1.jpg"  alt="اسم الموضوع" />

#">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zmL_E2h4qFhsfPAVGvKC0EVRba7rpQlglhJoQ_RhTKZ-DTE7MSA0RZmgeKoHS0gY2Sw7Njno1zRZYcY6X3XGPd7ajiqwi05wHloTtawrLzxlbz6J_VZS9uNZdxUhVH4Rj0_vd0D0yCN1/s1600/Lamborghini-Cars-Wallpapers-3.jpg" alt="اسم الموضوع" />

#">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5Ag9uqfCBjEocDZvEhwoXY_dk9N8p_g7XJWyKR66Fx8Sshv5VSte1K8x2ifYuCDxMK2bg33HOpBesd4oq8xwz-f0p4JSeOy-BCRWm8UfELXJx1o5zPoiN22O2A2VSrIzA8b_T6q-h_J7/s1600/top-hd_latest_cars_wallpapers.jpg" alt="اسم الموضوع"/>

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

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

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

في امان الله 

مدونة مدون محترف