نقدم لكم اليوم اصدقائي الاعزاء سلايدشو خفيف وانيق ومميز بالعفل ممتاز بكل معنى الكلمة السلايد شو سهل التركيب من تخطيط وبدون الحاجة الى التعديل المباشر على القالب نتمنى ان ينال اعجابكم والى طريقة التركيب
صورة للسلايد شو
طريقة تركيب السلايدشو لمدونتك
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 نفس مقاسات السلايدشو
والى اللقاء فى انتظار الرد على اى استفسار فى التعليقات
الى اللقاء
والى اللقاء فى انتظار الرد على اى استفسار فى التعليقات
الى اللقاء