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




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




طريقة تركيب السلايد شو : 

  • ادخل مدونتك .
  • اتجه الى التخطيط . 
  • اضف اداة جديدة عبارة عن HTML/javascript.
  • انسخ والصق هذا الكود :


كود السلايدر

<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://lh4.googleusercontent.com/-k6J7L0AmqnE/UV7FswW-qsI/AAAAAAAABC0/iwjr-yjs8Tg/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://lh5.googleusercontent.com/-7NRCeJsVpFQ/UV7Fs6xP8RI/AAAAAAAABCw/REtO-oLoX7Q/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>

طريقة تنسيق السلايد



بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيهاالرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة أما هذا الكود #000 وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوانأما هذا الكود <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفهملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218إذا الصورة ستكون بحجم 600x218

Post a Comment

Previous Post Next Post