منتديات هندسة بلا حدود : كود سلايد شو احترافى كود سلايد شو احترافى
السلام عليكم
اليوم اعطيكم كود جميل لسلايد شو
وان شاء الله يعجبكمم
الكود :
- الكود:
-
[center][/center]
<style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 468px;
margin: 0 auto;
border:3px solid #E1E0E2;
}
#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
right: -4px;
}
#slider {
width: 468px;
height: 260px;
background: #fff url(https://lh3.googleusercontent.com/-jr3u7sHVNzc/T_9iyf5egvI/AAAAAAAAC9c/jwanynfbt7Y/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px 010007;
}
#slider img {
position: absolut;
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: #0066CC;
}
div.mc-caption {
font: bold 25px/21px traditional arabic ;
color: #0000;
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(http://i18.servimg.com/u/f18/15/90/68/93/mdonti10.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);
}
</style> <script type="text/javascript" src="http://my-mdonti.googlecode.com/files/js-image-slider.js"></script>
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<img alt="ttttt" src="pppp" /> <img alt="ttttt" src="ppppp" /> <img alt="ttttt" src="ppppp" /> <img alt="ttttt" src="ppppp" /> <img alt=" ttttt" src="ppppp" />
</div>
</div>
قبل حفظ الأداة نقوم باضافة الصور التي نود ظهورها على السلايد شو كما يلي :
- نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)
- نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )
1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية
- الكود:
-
<img src="pppp" alt="ttttt"/></a>
اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو (Slideshow ).
2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :
لتغيير عرض الأداة width
لتغيير ارتفاع الأداة height
width: 468px;
height: 260px;
3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي
ونقوم بتغيير الرمز 0066cc (للحصول على الألوان بصيغة html انتقل للصفحة التالية )
4- تغيير حجم ولون خط عنوان الموضوع (عناوين المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :
- الكود:
-
font: bold 25px/21px traditional arabic ;
الرمز traditional arabic لإستبدال نوع الخط
الرمز 25px حجم الخط .
هذه هي اهم التعديلات التي نحتاج اليها لتنسيق الأداة بما يتناسب مع الشكل والتصميم
ملاحظة : الكود ليس من تصميمى ولكن تم التعديل عليه بما يناسب احلى منتدى
طريقة وضع الكود : يوضع الكودفى اى مكان يقبل HTML
انتهى
Arabian Star
" ======================================================= "
" انتهى الاعلان او الموضوع او الخبر "
خبير سيو تواصل معي : خبير سيو
ميز اعلانك من هنا : اعلان رابط نصي دو فلو على منتديات هندسة بلا حدود 5$ فقط لشهر واحد - متجر خدمة لي
اعلان مميز : امتلك متجر الكتروني احترافي مع منصة استقل
خدمات تحسين سيو المواقع
" فضلا وليس امرا شارك الموضع مع الجميع عبر المواقع لتعم الفائدة "
" اعلن هنا لمدة اسبوعين ب 5$ دولار انقر على الاعلان للحجز من خلال متجر خدمة لي او راسل نبيل الدم"