اضافات بلوجر

سلايد شو مميز وخفيف قمة الجمال سهل التركيب

نقدم لكم اليوم اصدقائي الاعزاء سلايدشو خفيف وانيق ومميز بالعفل ممتاز بكل معنى الكلمة السلايد شو سهل التركيب من تخطيط وبدون الحاجة الى التعديل المباشر على القالب نتمنى ان ينال اعجابكم والى طريقة التركيب
صورة للسلايد شو

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



1- من لوحة التحكم >> تخطيط >> اضافة اداة 
2- آداة HTML/JavaScript
4- اضافة الكود التالي 

<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>

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


</div></div>


5- التعديل 

الرقم 600 هذا هو عرض السلايدر وهو متكرر ” ان اردت التغير عدل الاثنين ” 

الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن لابد من تعديل  هذا الرقم أيضا 225  بنفس القدر سواء زيادة او نقصان اذا زدت فى الاول 50 لابد ان تزيد فى الاخير 20 ايضاً 

 الكود #000 كود الالوان مكرر مرتين  يمكن ان تتركه كما هو بدون تعديل وان اردت التغير بما يناسبك لك ذلك


 الكود <a href=”رابط الموضوع”><img src=”رابط الصورة” alt=”عنوان الموضوع”/></a>
<a href=”رابط الموضوع”><img src=”رابط الصورة” alt=”عنوان الموضوع”/></a>
<a href=”رابط الموضوع”><img src=”رابط الصورة” alt=”عنوان الموضوع”/></a>
هذا هو كود الصور والموضعات غيرها بما يناسبك وتكرار الكود يعني تكرار الصور والموضوعات فى السلايدد شو 


ملاحظة احرص على ان تكون حجم الصور” العرض والطول ”  ملائم لحجم المقاس الذي اخترته اذا غيرت في مقاسات السلايدشو 

اما اذا كان على المقاسات الموجودة دون تعديل منك فا مقاس الصور محدد بـ 600 والإرتفاع 218 نفس مقاسات السلايدشو 

والى اللقاء فى انتظار الرد على اى استفسار فى التعليقات 

الى اللقاء
السابق
استعمال الهاتف بيد واحدة شديد الخطورة
التالي
احمي هاتفك وبيناتك من التجسس والقرصنة الان مجانا

اترك تعليقاً

11 + ثمانية =

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.