سلايدر جميل وسهل في التركيب بدون الولوج الى اكواد القالب

كاتب الموضوع kasb يوم الثلاثاء، 17 سبتمبر 2013 2 التعليقات
السلام عليكم ورحمة الله وبركاته
احبائي الكرام اهلا وسهلا بكم معنا في هدا الموضوع
وهو تلبية طلب احد الاصدقاء.
وان شاء الله سيروق جميع الادواق
اليكم صورة السلايدر واظن بانكم تعرفونه


كود السلايدر

<style type="text/css">


#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 660px;
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: 660px;
height: 200px;
background: #fff url(http://i78.servimg.com/u/f78/17/70/27/78/abdo10.png) 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:207px;
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/AVvXsEhaf-5uVRJw8_zdgYw0N22-qoGVvMZ2MwT_FTGIv8DJmzolyCIxsFAYXt0bZBVBXiFYRmFxSRQTrXlFmXc0_hs5inXKlNou_MvsURpKBMZLQHbNV293SWbw-0ja104zLuRDRaxY2ap0xPQ/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="http://ajyal-s.blogspot.com/"><img src="http://i78.servimg.com/u/f78/17/70/27/78/abdo10.png" alt="مرحبا بكم في شبكة اجيال السلام"/></a>
<a href="http://ajyal-s.blogspot.com/2013/06/blog-post_6.html"><img src="http://i78.servimg.com/u/f78/17/70/27/78/ou10.png" alt="تحميل الصور مجانا "/></a>
<a href="http://ajyal-s.blogspot.com/2013/05/blogger.html"><img src="http://i78.servimg.com/u/f78/17/70/27/78/az10.png" alt="اضافات للبلوغر bloggerحصريا على اجيال السلام "/></a>
<a href="http://ajyal-s.blogspot.com/2013/06/FastStone-Capture.html"><img src="https://lh3.googleusercontent.com/-oa3-OtPnQYw/UbRd_BFCy6I/AAAAAAAAAfo/fqW5KkqBFIc/s660/FastStone%2520Capture.png" alt="تحميل برنامج تصوير الشاشة لسطح المكتب والمواقع FastStone Capture "/></a>
</div></div>

طريقة تركيب السلايدر سهلة جدا فقط ما عليك الا ان تضيف اداة جديدة 
وتضع فيها الكود اعلاه مع مراعات تغير ما باللون الاصفر بـ عنوان الموضوع 
وما باللون الاخضر بـ رابط الموضوع وتعويض وما باللون الازرق برابط الصورة
بشرط ان تكون الصورة بالمقايس التالية 660 / 200 بكسل
وان اردت تغير حجم السلايدر يمكنك ان تغير الارقام التي بالاحمر بما يناسب
مدونتك


اي استفسار اطرحه هنا في رد على الموضوع
تعليقات
2 تعليقات

هناك تعليقان (2):

  1. بصراحة انا مبسوط وفرحان بيك جدا استفدت من هذه المدونة الكثير

    ردحذف
    الردود
    1. هدا ما نتماه اخي الكريم
      شكرا لكم على المرور والرد الطيب منكم
      ------
      موفق..

      حذف

ترميز HTML رموز BBcode الإبتسامات

Sample Links

[ لوحة التحكم شبكة اجيال السلام]

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

جميع الحقوق محفوظة لــ شبكة اجيال السلام سياسة الخصوصية | شروط الإستخدام | إدعمنا