Wednesday, December 19, 2012

12 Cool Image Slider for Blogger


Greetings to Every One,  

Today I'm gonna show you how to add a Cool Java Script Image Slider widget for your Blogger and no jQuery and flash is needed.
                                                                      
                                                      This slider contains a ribbon at the left top corner of slider and it is named as "What's Hot" also it contains a beautiful slice effect which slices image into 12 parts,these main features increase beauty of the slider.Another great feature of this slider is it is highly customizable so that to edit it as you wish and which will perfectly suits to your blog. I have created a bloggerized version of this slider to works perfect with blogger blog.



Add this to Your Blogger


  1. Go to Blogger Dashboard > Layout 
  2. Click on Add a Gadget 
  3. Select HTML/JavaScript (below header) 
  4. Paste code inside it,




<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(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/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(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/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 Blogging Industries"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Easy to Deal "/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="Innovation of Blogging"/></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 re size 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.

  • Height 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 (one line description)

  •  Link To Image

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




Finally save all your changes and you are done !


  Warning  :  Don't Copy from this Post Without Linking Back to the Post


12 comments:

  1. THIS IS AWESOME !!

    Really easy.. helpful and to the point.. searched all over the net for a simple slider... now finally got one.. :-)

    Thanks alot..

    ReplyDelete
    Replies
    1. I am Glad because of you enjoyed it. :) Go through our other posts also and Reveal cool things :d

      Delete
  2. That is the only working version of this slider all over the internet. OMG thanks! I've been looking for this for months... ima click every ad on your site ;)

    ReplyDelete
  3. How can I make it that it'll just show up on the homepage only?

    ReplyDelete
  4. Its working!!!!
    but when I place this jscript two times on different HTML Gadget then the first one is working good but the second one is just showing up the loading !!!
    please help me !!!!

    ReplyDelete
    Replies
    1. Well I have to say that this widget differs in working in various Templates, so when the Template is changed it might not worked sometimes. But anyway I'm happy to hear that It also worked on you. :)

      Delete
  5. Hi, It's working but the change of images is delayed while the buttons keep on changing, plus the images load too slowly, not giving it smooth look. [-( So could you help me delay the time change for button or quicker loading for images. Thanks :)

    ReplyDelete
  6. Hi,

    Loving the addition of the sliding image widget on my homepage.
    How am I able to change the transition effect between the images so that the next image will slide in from left to right?
    Also, how do I change the transition time between the images a little longer?

    Thanks in advance.

    ReplyDelete
    Replies
    1. Sorry, so the new image comes from the right hand side of the screen, and moves left.

      Delete
    2. Change "float: left; " to "float: right;" and this will solve your Problem

      Delete
  7. You are a lifesaver! I’ve been looking everywhere for this, and am I excited! It works
    perfectly! Thank you so much for this awesome tutorial!

    ReplyDelete