إنشاء سلايد شو لمدونات بلوجر
بسم الله الرحمن الرحيم
أعزائي اليوم راح أقدم لكم طريقة تركيب سلايدر شو في مدونة بلوجر
أولا
كيفية إضافة سلايدر لمدونات بلوجر؟
بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التخطيط ثم إضغط "إضافة أداة" اختر إضافة اداة HTML/JavaScript فوق رسائل المدونة الإلكترونية الاتي:
الصق في أداة Java Script/Html بعد هذا الوسم
بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التخطيط ثم إضغط "إضافة أداة" اختر إضافة اداة HTML/JavaScript فوق رسائل المدونة الإلكترونية الاتي:
الصق في أداة Java Script/Html بعد هذا الوسم
<style type="text/css">
/* JavaScript Image Slider By http://konozblog.blogspot.com/*/
#mcis {
display: none;
}
iderFrame {
p
#s
losition: relative;
#ribbon {
wi
width: 500px;
margin: 0 auto;
border:5px solid #000;
}
dth: 111px;
width:
height: 111px;
position: absolute;
top: -4px;
right: -4px;
}
#slider {
500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG2147Uz9LnlO5BtpQIemc3HFQiUKS-ZwijecdJsIzs3cPZq1nSopvJklOogkmiG0U0jVtBVWAmREDFZ714UdFoUg2SofYGWwWfawME_rZ-TmKrXAEv6WnvYmOadHAYD7847NIgTYS6Q/h120/mdonti-n.blogspot.com-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 {
v.mc-caption
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, di-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 {
r: #FB0;
}
div.mc-captio
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 {
colon a:hover { color: #DA0; } div.navBulletsWrapper { top: 250px; right: 190px; width: 150px; background: none; padding-right: 20px; position: relative; z-index: 5; cursor: pointer; }
om-bullet.png) no-repeat 0
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCHEFGNAV872bC10r4Aq7C0tu6xZuzxTDGlu7gH0wgdKyJuzg5YPbjemIZDG0ghk5fq4sRhXiYJyKcO8mK_dXsTbkRUces1RDqvEZkznhNBnQuQAwGlhOPKUABXizM5AVTBlvvYGu7eQ/h120/mdonti-n.blogspot.c0; 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 sr
chttp://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
div>
<div id="sl
<div id="ribbon"></ider">
#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCs8u7G-bwj9EQeK73MTtsFK9l-8e71CqWbGYRcnt0_225YR7RarOLfU8hRVHPBjYiDz8Nqu4Vz2EmStrY7tbhjxh2ZMtSKGxxSAIgDd41deagEq3_HE2EHcj_p-S5BrEuEaYsqQ0R-g/s1600/mdonti-n.blogspot.com-1.jpg" alt="عنوان التدوين1"/></a>
<a href="
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5S9C9wTJlWbZmjMS7eG7AKKggc-M_d-0DNXOmHZtrGAYH3gOhmZeUrXaopIknrphjvu3Xcw8aB_RuLB-dZbHNT1G01kf2fMdUS2yt7LwF-j7RT06ZfOQWomKnOC6YH44erNeOHzJ8Q/s1600/mdonti-n.blogspot.com-2.jpg" alt="عنوان التدوين2"/></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPPV3SCDSEcTyf-_RHeBT2BJXF4lnrnYAJU2Tp4CnPxXuF_EOaFLTztBIFZhYt7_4XZzuldQaMWxBMeYgoAtMcqNnKcQHUX36FkcmIgocELz9Deo-03WVJpEiE77Kf99WgvGEKmp56Q/s1600/mdonti-n.blogspot.com-3.jpg" alt="عنوان التدوين3"/></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-Yt8k9pGc7heZd3JmCpEPOH2kYN1_TJoTPm6T3mN-UgrMeKLX_mrbE-cvsLSgDesmAiuOvidLe_AufO6an1JaqBqbVllT7ejzd8g-UQObb0RO_F3edc5BxcN2fbgFVQgds7P8joPJQ/s1600/mdonti-n.blogspot.com-4.jpg" alt="عنوان التدوين4"/></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5x46ElMOhLBhYOCz75cuw6W6DBSgAp7WEc7LpHidsUr7JYSVogDXfznvEpRosWBRcpYtO7I2DS-9OCFojONGu9Qec4AE3Eyrvyeed32u_nNcHTBKIDjiwvUAe9_ErbqsCjXth2Dg6vg/s1600/mdonti-n.blogspot.com-5.jpg" alt="عنوان التدوين5"/></a>
<a
</div></div>
شرح الكود : السلايدر
- الاحمر لتعديل رابط الموضوع .
- الازرق لتعديل ابعاد الصورة
- البرتقالي لتعديل رابط الصورة .
- لتعديل عنوان الموضوع .
ملاحظة: يجب ان تكون ابعاد الصورة >> 500 PX في العرض × 210 PX في الارتفاع.
تعليقات
إرسال تعليق