Want Fastest Image slider??
A slider whom you can customize as per your taste??
Nowadays NOVA sliders become famous but many blogger refuse to use it because it Uses jQuery technology which very much increase increases the loading time of the blog and reduses site performance..!!A slider whom you can customize as per your taste??
Every1 wants an cool slider for their blog which gives great look to the template and engage the visitors which ultimately means MORE TRAFFIC..!!
So what to do?? The Solution is here..!!
After so much searching i find this awesome slider created by helperblogger.A Html Coded Slider which only uses javascript and loads up very fastly.
you can see the live Demo of it over here
- Go to Blogger Dashboard > Layout
- Click on Add a Gadget
- Scroll down and select HTML/JavaScript .
- Keep title box blank and Paste code inside code box.
<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/AVvXsEgTKwFNouQav6Qjy9uX77ysKT2jrpvakqnYO19zOFix4vjRBQOUjf0PlmnB1gf5xqZ41tW1f7JydMIu80qI8c4InfEaiiuEG03VwaLwMqqlR7Z5odrIFERpWg_xjeJ2cZScJB-7nekINnA/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/AVvXsEgZuKs2m_7UoFN5h3t8RMnJsYYzC5ZoM1X0cPdJ9sCQEaE13PupPNs1KCok9qO1jKxNaExsIkINnP449zYmY6nyBZrJ1BNZdhNkCOxzJalDGWnqLgPdfjF4FOhKHdYN_93Oo_iUjrs5RMo/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/AVvXsEjS5AKzRZaMxLBo6_j2hEy_YhIw6Uuz0EEYcmV5cjcUrx60A8Z0LrkKsUv0LyIFy2C7X9GUI9Zz1eyctJXhZUWAgGVqkIoFQxbGtqaixqezqXP9UxmbFnunkyY5coHAXu9j_SNWQ48AQ0Y/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 helperblogger.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>
