اضافة بلوجر . سلايدر خفيف وسهل التنزيل على مدونتك

تفضلوا مني سلايدر خفيف وسهل التنزيل على مدونتك، وشكله الأنيق يتلائم مع جميع المدونات وهو خفيف مقارنة مع باقي السلايدر التي تنقصها هذه الميزة زيادة على بساطته التي تجعله سريع التحميل على صفحتك ، وكذلك يمكن لك أن تتحكم في طوله وعرضه لكن اذا اردت ان تزيد او تنقص فيهما فعليك أن تساوي بينهما فمثلا ان زدت في العرض ب 10 فمن المفروض أن تزيد في الطول ب 10 والعكس كذلك . حجمه الأصلي هو 600/218 . ويفترض بك أن تنزل الصورة على نفس القياس لتتلائم مع السلايدر.

شكل السلايدر

المعاينة

الكود المستعمل

<style type="text/css">


#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 600px;
 margin: 0 auto;
border:5px solid #000;
border-bottom:25px solid #000;
background:#fff;
border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;
margin-bottom:5px;
}
#slider img {
 position: absolute;
 border: none;
display: none;
}

#slider {
 width: 600px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8R8XGYM2Qyo5Gtjzf3Wxwx6Slw52-rnk75onC4Yrnocw9LCjS22qZ98ih-05KyofHNiMZsKDYsD6wxL23M4yIMUlzI3iOF9_pjRnMfvTodRCfVkHBdVAnTgGJCf4FgeZ8VlQ3RwZz6ak/s39/cnmuslidlod.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#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: 0px;
 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:225px;
background: none;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheyDjRGtfaMffyu1rGWQ-EczkTYht4K12ubYV6_ZXsfrl5R4BbzmRvF_VuVJrjN7wKwCzP54If5RS9snygcz5BoK3CAeLsVvJe8pqqSPtgvMAF9dC1ag3BdMatBwwlMhdGGvz9dJN4xrw/s22/cnmu-sliddot.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}



div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

<div id="sliderFrame">
                <div id="slider">
<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
</div>
</div>

هذا الكود هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه

<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>

أما بالنسبة لهذا الرمز داخل الكود السلايدر #000 ستجده متكرر
مرتين قم بتغييره .باللون الذي تريد ان يظهر به الاطار .أكواد الألوان

طريقة وضع الكود داخل المدونة

أولا : الضغط على التخطيط