سلايدر شو خفيف وإحترافي لمدونتك | هنا بلوجر|

السلام عليكم

نبحث دائما عن سلايدر شو يكون مميز وإحترافي فهناك بعض السلايدر التي تكون غير ملائمة لموقعك

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

جميل على المواضيع التي يعرضعها يمكنك رئية المعاينة : هنـــــا

طريقة التركيب سهلة جداااا 

تابع الشرح معي :
اول شيئ قم بالوضع نسخة احتياطية لقالبك ثم ادخل قالب ثو التحرير HTML 

ابحث عن الكود التالي : ]]></b:skin>

ولصق الكود التالي فوقه : 

#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/AVvXsEjx0GV8krAHtExxSTashDzVKMnmYtusZFX1Pxfu4EeOD2JvRbqCf7XShPJm33qtefs1H_mgMPUT5sTF4lb1UPeSTXzClfMJ4Lna6KKRoJVj_UqayCSbEbksyjCaBsbusxhGUNtQyYvi8SHE/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/AVvXsEjmffdGxJSceQxpDsFcQ6f-nIpRiQOlEJsTOWhNgGY7G1-yisWmQOMq4bFtYEjdj3CAJ1VkFaOnu6H_tKLLU-UyWKkpKimHx1AzKp-0r6QYSiEnGvs1NfY_8z5WcCBMOFfG3uo0g_sau2Tz/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 هو عرض السلايدر
306 هو ارتفاع السلايدر
2 - <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.mudwnp.blogspot.com"></a></div>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZVtWDqXivm3dZiGVJv6nTkNKo979XBJxP4VuBn0whqFz5GP7fSGMQ3dd-akO9EzifTa21WnmKcC6tJ0l7mf170t4kk4kByU2WQILRzsPdlT-OrN_WJyIIuPt-KFdT3lKuxb2TbKkUv2wN/s1600/Cars-Lamborghini-Free-Wallpaper.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_yhJ4MrEkZVLABCb1WWDkrpbxWFBWPKH718I9EU8rgUE-2oLW-q1o_RJ1y14zB_b6IT26qQHOLPjXJctILB2s4F6RPwlpAQTFiZ7F39-S66CmDlzjpYj943UQ6filLtcF4bCVd19j06pJ/s1600/ferrari_enzo-wide.jpg" alt="اسم الموضوع" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwT8o5tBDga4iMeLfVATU_4guNJd6GByuWQKPSb5pvqiSj_-tWL_xoubqCEfx4iAZUgUdafgNQNy0-6QIcEDgm-LSGj_SRkBskQEdWQxQBzGeKQEyCqyBPK7-LtSgJj-QC08gAzQM5S0E/s1600/lamborghini-car-wallpapers1.jpg"  alt="اسم الموضوع" /></a>

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

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

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