إضافة كود سلايد شو لعرض الصور لمدونات بلوجر Blogger Slideshow

شرح طريقة إضافة سلايد شو لعرض الصور علي مدونات بلوجر كود HTML سريع وخفيف علي المدونات مميزة (Blogger Slideshow) هذه الإضافة تسهل علي الزوار التنقل بين المواضيع التي تحتوي علي صور بكل سهولة وابقاء الزائر أطول فترة ممكنة حسب قوة مواضيع مدونتك يمكنك نسخ الأكواد التالية .

كود إضافة سلايد شو بلوجر لعرض الصور

.......
<style type="text/css">
/* blogger-educ.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/AVvXsEgS4K-I0KzGV3MeCr1xhlJaiFa0NxC4KqdjxYGZ3yOhEIJ0DsRpFZ-jWSsKHL4Ze6y-cgUBpJiYTekiDNhuLsnIYu8Zs9j_LIe3M4aK-viKQLiG9PNmk_Slpl3OYul2sn3HGO_LNyyXgT6u/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/AVvXsEgb_qywP2p2BWTG_wS4XtVMPX34LvzTlfsYhwkRdSpByjPOIG2-oT4j0yLXfnUTz8N8gUOV-MTB_theWNL7AKTFKjQTG73Wswz5fjfQM0mp5DvAxNSJJEK-IwZ1tb5oSKZT-swFZmrwNfha/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>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>
......

شرح طريقة تركيب سلايدر شو بلوجر لعرض الصور

قم بتسجيل الدخول إلي مدونة بلوجر من هنا.
أنتقل ألي لوحة تحكم مدونتك.
إختر "تخطيط" ثم قم بإضافة أداة جديدة أختر HTML/javaScript.
أدخل الكود داخل المربع .
أحفظ, الأن تم التركيب.