السلام عليكم ورحمة الله وبركاته.
درس اليوم هو عن طريقة إضافة سلايدشو slideshow غاية في الروعة لمدونة بلوجر.هذا سلايدشو بتقنية الجافا سكربت javascrypt خفيف جدا و سريع التحميل و متناغم,يمكنك من عرض أهم مواضيع مدونتك في الصفحة الرئيسية و يعطيها طابعا أنيقا و غاية في إحترافية.
معاينة الأداة
نمر لتطبيق الاضافة:
1.اذهب للوحة التحكم الخاصة بمدونك
2. تخطيط.
3.عناصر الصفحة.
3.إضافة أداة.
4.اختار Html/Javascript.
5.أضف الكود التالي:
<style type="text/css">
/* JavaScript Image Slider By http://trucsinformatique.com */
#mcis {
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUpOKa1sOfnvVLBclqwhelkSAACXPkk5psegfNgv7DOdKY-gn2odgnL4_98xm65zfZF5myW1Uc5RTZaLRa_iqbS_VkPDyrxgTjFkfBMbIPUKSvvu23IhJ4jdseDs9WjRLWZtH4FNqSw/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 {
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZQELRRPy7ImioPzxTNovS6rodWq65x5WTLtKOHDhTjUIsUINJHjdY2rC35GoFB9_ZpGGagI-tcVbyPMMUijsT9-eP-g5c9nOdpzeSvhULyEl4XGw6FtF8lVJhnBVyOz9AG85G9TtTg/h120/mdonti-n.blogspot.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);
}
</style>
<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="رابط الموضوع 1"><img src="رابط الصورة 1" alt="عنوان الموضوع 1"/></a>
<a href="رابط الموضوع 2"><img src="رابط الصورة 2" alt="عنوان الموضوع 2"/></a>
<a href="رابط الموضوع 3"><img src="رابط الصورة 3" alt="عنوان الموضوع 3"/></a>
<a href="رابط الموضوع 4"><img src="رابط الصورة 4" alt="عنوان الموضوع 4"/></a>
<a href="رابط الموضوع 5"><img src="رابط الصورة 5" alt="عنوان الموضوع 5"/></a>
</div></div>
6.قم بتغير ماكتب بالأزرق بروابط المواضيع الذي تريدها أن تظهر في Slideshow.
قم بتغير ماكتب بالأحمر بصور المواضيع الذي تريدها أن تظهر في Slideshow .
قم بتغير ماكتب بالبنفسجي بعناوين المواضيع الذي تريدها أن تظهر في Slideshow
ملاحظة هامة:
يجب مراعاة أن تكون أحجام الصور بهذا المقاس 500X216.
يمكنك الإستعانة ببرنامج Paint المدمج في Windows لتعديل أحجام الصور تم ترفعها على سرفر مخصص لهذا الغرض أو من خلال مدونة تجريبية وتنسخ الروابط.
رفع الصور على الأنترنيت: إضغط هنا .
7.قم بحفظ الأداة ثم قم بسحب الأداة للمكان الذي تريد أن تظهر فيه,ويستحسن أن تضعها فوق أداة رسائل المدونة .
و مبروك عليك.
المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.
0 التعليقات