طريقة عمل "slider" لمدونات بلوجر وبشكل رائع

طريقة عمل "slider" لمدونات بلوجر وبشكل رائع..وبخاصية jQuery 

وهذة الخاصية تعرض اهم الموضوعات الجديدة بالمدونة مما يميز موقعك او مدونتك

وامكانية التعديل علي حجم ال  "slider" بحيث يتناسب مع عرض مدونتك

معاينـــــــــــــة

1_اذهب الي التخطيط

2_اضافة ادة

3_اختــر>Html/javascript

4_الصق الكود التالـــي

<style type="text/css"> /* JavaScript Image Slider By http://www.helperblogger.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; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4TM1NhaeVVhQu-60IlGx0D1z9yoxSg9LKKcft8qu8wC9NN9iTfbvkxFNyJixQfbX53OCyew2kGtQzc953e6S7-c-jLG0n3GpSI2ksv-Gk4IGpiRc76P6b7IqGOfM-uoR24UMc_V05xQQ/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7;} #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOY8OIQx1eNzWGycWBnCJgyWqprTHwphllN8tS7zqYM4o8FoOMSAATFanDJkHkzNYwmLzvSNw-V10gZ_j1IzAJ1jP0Fr9XxGLJv4BYucWuBEc1Cvz7MhguC-Wb-BkbYmgq1bN_WJs4gnM/s1600/helperblogger.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; left: 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; left: 0px; bottom: 0px; 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;} div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 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/AVvXsEiIf5s9rKcAXhaFnBPF7ziCooN2v-wcWAl7JhufGLL0o0oX6GfhC_IJWnqhxUnxK4lBr4ck9z88PqTQWT6CIr3vVrIryhMHlNRwndZDz2lyue0i7-6Mgp0VbOhSYFPAa1uDrX_l5FCHuxk/s1600/helperblogger.com-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 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://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider"> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By blooger-widgets..com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a> </div></div>

      هذا اللون للتعديل علي عرض ال slider ليتناسب مع مدونتك

       الكود المظلل بهذا اللون للتعديل علي طول ال slider ليتناسب مع مدونتك

      الكود المظلل بهذا اللون لتغير صورة الموضوع بال slider

      الكود المظلل بهذ اللون لكتابة اسم الموضوع علي الصورة

      والكود المظلل بهذا اللون هو لوضع لينك الموضوع بدلاا من هذا الحرف #

واتمني ان تنال اعجابكم الاضافة