Fully Customizable JavaScript Image Slider For Blogger

Alternate for jQuery Image Slider For Blogger

Html Image Slider

Want Fastest Image slider??
A slider whom you can customize as per your taste??

iGAWAR Presents Javascript image slider for blogger who want their blog to load up fast..!!

Every1 wants an cool slider for their blog which gives great look to the template and engage the visitors which ultimately means MORE TRAFFIC..!!

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..!!
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

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget
3. Scroll down and select HTML/JavaScript .
4. 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/AVvXsEi4kBGz5cJ-B2UyFGAJ6Z4cPo0zyUrrDNHiW7Zjty8U36rzR4DsY88wNBmzfAIfU-1_9Zn72fVGQCLKxjIqI5Km8QUKE-B4ROcFEgUqvCkdo5FhwVk7sEhp-sku0MW4noJfdXvfu7pI6ok/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/AVvXsEhV_GU8tTGw0R-NsSu9qm39xTJ3LM9pDzQqd-w1LzGzMGEBj8648IOOJ5sFFiFwjEJgNPLxRj1hawp3Wl-gvjsqI88jEjbBtISx5zw9IFot958ersomYrXaN__frlTjffmVJ_3i6JUW7aw/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/AVvXsEih2wYK5Gg3RZHoZl_gApmq3zKZ2vKvVC0WyD3jxOs6Th0TKUJv1kQYsu1JemRoEkxIlW-5EVavmSYzUm4f46uPNHgFeLIVz6XLNQQtkTq0T0ix4H_2u14o77C-5uwTTMg9l1ehYmTiCpE/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>

Important Note - Before adding  images to slider resize all of them to same size.

Color Codes Info - 

      - Width Of Slider

Set the width of slider according to your image width also use the images of same width and same heights.

      - Width Of Slider

Set the height of slider according to images height also use images of same width and height.

      - Image URL

Replace all highlighted image URL's with your own images URL.

      - Image Caption

Here you can add your image caption.

      - Link To Image

If you want to add any link to image then replace # with your own image URL.

If you have any problem with this Trick then feel free to ask in comment box below..!!

Keep visiting @iGAWAR

Mediafire Download Link