إضافة سلايد شو احترافي لمدونات بلوجر

اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب , يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله

الكود

/* alb33dani.blogspot.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}

#slider {

width:700px;height:306px;/* Make it the same size as your images */

background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5S5KenOsxrFI7r0Psf0UwMQIsDqx4fM6Ry_jxVCNQn_AFYXeyfJgk2PxsJLtFHdk0n7s3cgL6dKgxWeKcFwGadekcuxJZttNubL_bkwTh2EuHn4RkL4EuGmt7jDIMVNQSRACZ50kexVy/s1600/loading.gif) no-repeat 50% 50%;

position:relative;

margin:0 auto;/*make the image slider center-aligned */

box-shadow: 0px 1px 5px #999999;

}

#slider img {

position:absolute;

border:none;

display:none;

}

/* the link style undefinedif an image is wrapped in a link) */

#slider a.imgLink {

z-index:2;

display:none;position:absolute;

top:0px;left:0px;border:0;padding:0;margin:0;

width:100%;height:100%;

}

/* Caption styles */

div.mc-caption-bg, div.mc-caption-bg2 {

position:absolute;

width:100%;

height:auto;

padding:0;

left:0px;

bottom:15px;

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;

}

/* ------ built-in navigation bullets wrapper ------*/

div.navBulletsWrapper  {

top:320px; left:280px; /* Its position is relative to the #slider */

width:150px;

background:none;

padding-left:20px;

position:relative;

z-index:5;

cursor:pointer;

}

/* each bullet */

div.navBulletsWrapper div

{

width:11px; height:11px;

background:transparent urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjm9TAplLs9WJgp4XIkEvdV0OuU0KaQ5EAp8zprE1msg3VyKiDf7YAgBLvS3svnU7OfjVX13Kxsvri4yLc8gOZncXD0EPqUwOzsJUw96skqzwR140D1vlTieBxGP_lB-Ego0nb8rwNnAtv/s1600/bullet.png) no-repeat 0 0;

float:left;overflow:hidden;vertical-align:middle;cursor:pointer;

margin-right:11px;/* distance between each bullet*/

_position:relative;/*IE6 hack*/

}

div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */

#slider

{

transform: translate3dundefined0,0,0);

-ms-transform:translate3dundefined0,0,0);

-moz-transform:translate3dundefined0,0,0);

-o-transform:translate3dundefined0,0,0);

}

</style>

</div>
</div>

مايجب عليك تغييره

    عنوان الموضوع : استبدلها بعنوان الموضوع المراد عرضه في السلايد شو.
    رابط صورة الموضوع : استبدلها برابط صورة الموضوع المراد عرضه بالسلايد شو.
    # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو. 
    700px : لتغيير عرض السلايد شو .
    306px:لتغيير ارتفاع السلايدشو.

     وبالاخير قم بحفظ الاداه ومبروك عليك السلايدشو

وأخيرا هذا مثال من مدونتي

منقول

مواضيع مميزة

إضافة سلايد شو احترافي لمدونات بلوجر







التعليقات