سلايدر شو جميل

محروم.كوم · #1 01-25-2014, 06:00 PM

السلام عليكم ورحمة الله وبركاته.
درس اليوم هو عن طريقة إضافة سلايدشو slideshow غاية في الروعة لمدونة بلوجر.هذا سلايدشو بتقنية الجافا سكربت javascrypt خفيف جدا و سريع التحميل و متناغم,يمكنك من عرض أهم مواضيع مدونتك في الصفحة الرئيسية و يعطيها طابعا أنيقا و غاية في إحترافية.

نمر لتطبيق الاضافة:

1.اذهب للوحة التحكم الخاصة بمدونك
2. تخطيط.
3.عناصر الصفحة.
3.إضافة أداة.
4.اختار Html/Javascript.
5.أضف الكود التالي:

اقتباس:
display: none;
}
#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
border:5px solid #000;
}
#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
right: -4px;
}
#slider {
width: 500px;
height: 218px;
background: #fff url(https://lh3.googleusercontent.com/-j...om-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
right: 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;
right: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 15px/21px 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: 250px;
right: 190px;
width: 150px;
background: none;
padding-right: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://lh3.googleusercontent.com/-X...com-bullet.png) no-repeat 0 0;
float: right;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-left: 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);
}

6.قم بتغير ماكتب بالأزرق بروابط المواضيع الذي تريدها أن تظهر في Slideshow.
قم بتغير ماكتب بالأحمر بصور المواضيع الذي تريدها أن تظهر في Slideshow .
قم بتغير ماكتب بالبنفسجي بعناوين المواضيع الذي تريدها أن تظهر في Slideshow

ملاحظة هامة:

يجب مراعاة أن تكون أحجام الصور بهذا المقاس 500X216.
يمكنك الإستعانة ببرنامج Paint المدمج في Windows لتعديل أحجام الصور تم ترفعها على سرفر مخصص لهذا الغرض أو من خلال مدونة تجريبية وتنسخ الروابط. __DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
[طلب] مشكلة في سلايدر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	01-24-2014 03:00 AM
للبيع سلايدر konova طوله متر و نصف ، بجدة	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	12-11-2013 05:50 PM
طلب تعديل سلايدر شو وجعله ذاتي التشغيل	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-24-2013 10:40 PM
للبيع سلايدر	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	04-20-2013 12:40 AM
مطلوب :: بلاك بيري اليديد سلايدر ..	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	06-26-2010 03:50 AM