Add JavaScript Image Slider to Blogger Easily


Here I’m sharing a cool JavaScript image slider for blogger. It could be easily usable as featured content on blogger blog. This image slider is created by menucool.com. A really cool slider is this. It has pretty nice sliding effect, and a less loading time as created by Javascript, no jQuery or flash used. And another thing is it’s easily customizable. I have customized it little to suite perfectly for blogger blog. See Demo or download source code from below link.



Let’s Install the Image Slider to your Blogger Blog

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

<style type="text/css">
/* http://dimpost.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 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyCAXs4aBrxATNP5nWahOkQGyUzeNv99njcBVhVgH9hWc7cRsjYKcOsRxEIWnygVmvQohIAG3v3EtEmN56aoVo5tq6z4Z1vvT7gvO0sdCD_gfXmOxrgFXnGkqOzGV4k2_a6L4FCrdQHp-t/s1600/loading.gif) no-repeat 50% 50%;
    position: relative;
    margin: 0 auto;
    /*make the image slider center-aligned */
    -webkit-box-shadow: 0px 1px 5px #999999;
    -moz-box-shadow: 0px 1px 5px #999999;
    box-shadow: 0px 1px 5px #999999;
}

#slider img {
    position: absolute;
    border: none;
    display: none;
}


/* the link style (if 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 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1xFlIQwVoNJv5lprNvSmr6LgLzMPSmVm2Gs302_on2WRU1CxUp3FHP5cTJRB6OWalJM1MYJY25n_KNKBFTIrhQp6C3hO_RNk2eJZQjOFarQ7mPmt_xn2Onw3aGRddgWTMLcrbQaWh-ty/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;
}

.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}


/* --------- Others ------- */

#slider {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="slider">
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7VX53D2ICSdS80N0fNIympO2BMi-8lX2OLRQqPBpW3hJO9vVC-bXIJjazsL1X2EnuPG8Z-cGr9__jABiq05DgUWW1e0IHq5WeOee_aWQkEgL1XGiaTMjCl5HU102fReaxpMfTo1vXz_d/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB6rQsRW7HL7PFAkEhCwKk4Yy0Yepvh9Q3VVerue6D_v8zzS_t1vGwcZxctSqY1WXoGJE9cv51sUCv5kwOtOthrECm7mVVHWxHouk7gLa0JxysrxnN2G-9EY-_m7eyIKpxTorTWA_rqJ-c/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7dyAQM2otOe2yLY-emRMZdZbFGrz5YE-WSzY6YPtutsXPOKWVveij8xTCOqnLHi1BanACvLEQ5twXehdG3_wj2B2ljGQP_oGVf33AM3LwASYvMAG_t_yF9ooD-56jq_0lz4txXPhhk0GH/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4UGnn51DMJlQSm7o1Sg-laUhCQv8KvDc2cBOQjTTM78GJGdJ_3Ra0bgWwssUXfbM1IB2kNDvdwVGgKS02cT7nqcGxT31Arw1xMcxeDfbLfRmQnfRI00upgGmpulYs7kfFJUBzfX5KymD/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2kvSEVtucai-Uxdiib5xdbDOsEkbV3fY_3MOvCFmJNOy81Gghu1DHv-KLZWVO7JmSpgQd6k2E8M2kdjjI83-A8votn8aiQmxQcHoSPTbQbgpM-MM-55t79bzphEncYVlLXCRMkQBEMSN/s1600/image-slider-5.jpg" alt="Stay Connected" /></a>
    </div>
    <div id="htmlcaption1" style="display: none;">
        Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
    </div>
    <div id="htmlcaption2" style="display: none;">
        <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
    </div>
</div>

4. Now you can change Image URL with your own image, slider link/permalink, image caption etc. as your way.

Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

99 comments

  1. how can we remove the slider from posts page :-b ?
    thanks

    ReplyDelete
  2. Hi, how can I delay time for these slides? Thanks.

    ReplyDelete
  3. Nice slider. I wonder if you could make it automatic, like, if a certain category is chosen, it is automatically added to the slider.

    ReplyDelete
  4. Nice work :) only one cuestion: how can i change the transition effect between images?

    ReplyDelete
    Replies
    1. To change transition effect you have to edit this
      -------------------
      var sliderOptions=
      {
      effect: "series1",
      effectRandom: false,
      }
      ------------------
      From >> http://dimpost.googlecode.com/files/js-image-slider.js

      you can make it(effect: "series1",) series "series1".
      or a single effect, for example: effect:"8"
      single effect 1-17 is available.
      See more here: http://www.menucool.com/slider/javascript-image-slider-demo1

      Delete
    2. How it is possible to edit from "http://dimpost.googlecode.com/files/js-image-slider.js" as the css we use is actually a downloadlink.

      Delete
  5. worked like a charm. thanks for sharing..

    ReplyDelete
  6. Thanks ! I was wondering if it's possible to show the slider only on homepage and not on every post pages ?

    ReplyDelete
  7. Any way of keeping this only on the homepage of blogger? vs showing up on all posts?

    will keep looking, post here if I find any solutions, thanks!

    90

    ReplyDelete
  8. Nice your tutorial,
    I like this slider, easily usable, but conflick with my lof slider, please look at oyinayashi.bogspot.com is there solution ?, thank you

    ReplyDelete
  9. Thanks for the post.
    How can I change the position of my slider, and still keep the sidebar side.

    Sorry my english. I'm a Brazilian. :)

    ReplyDelete
  10. same question like anonymous :)

    ReplyDelete
  11. BRILLIANT WORK!! Congratulations!!
    It's exactly what I was looking for my Blog. I'm in Blogger, and I could add this slideshow in my posts, just pasting the code you gave us. And works PERFECT!
    Just one question, How should I add the js script (var SliderOptions) in YOUR code to customize transitions etc? It would be great to give different values in every different post. I guess that's possible. Excuse me, I'm a dumb beginner...

    Thanks a lot for your help!!!

    ReplyDelete
  12. I want an Image slider ,automatic and manual Slideshow as well as when cursor goes hovers the image, text overlay appears.

    ReplyDelete
  13. Nice slider ..............
    Thanks

    i want slider homepage only.how can remove other pages

    ReplyDelete
  14. worked like a charm. thanks for sharing..

    ReplyDelete
  15. Thanks very very much. It works great!!!!

    ReplyDelete
  16. Like many people here, i too wanted the slider to appear only on the home page and not the blog posts. Here is what i did...copy and paste the code in the HTML editor for the page(eg. the home page) and not as a gadget/widget. It worked !
    here is a link to my blog and you may see it working (unless i have removed it for some reason...sry about that)

    www.awesomereviewsandstuff.blogspot.in

    ReplyDelete
  17. Awesome programming mainly i liked the comments ..keep going bro :-)

    ReplyDelete
  18. I'm an idiot. When I change the width of my slider, it only gets bigger on the right. I can't seem to center it. Any suggestions. Thanks so much.

    ReplyDelete
    Replies
    1. If you give us your blog url, it'll be easy to find out the problem :)

      Delete
  19. http://youwillbecut.blogspot.com/


    Here's the URL. This is the site I test gadgets on before I add them to my own website. www.BryanMorrisComedy.com Where it should behave the same.

    You can see it is far too far to the right and it wont expand to the left.

    Any advice would be greatly appreciated. Obviously I'm very new at this.

    Thanks you

    ReplyDelete
    Replies
    1. @Briyan, You have to keep the image and slider size same. Make the #sliderFrame wudth 866px too :)

      Another tips- drag and rearrange your slider widget. Currently it is in tab section so there seems like some mix-up, drag the slider widget more top or little bottom. The preview foe a better result.

      Delete
  20. I can't seem to get my images to show up...any advice? I'm hosting them on flickr. www.beeyogafusion.com

    ReplyDelete
  21. @Gretchen It seems everything is ok now.

    ReplyDelete
    Replies
    1. when I change the width of my slider, it only gets bigger and the icon button is not in the middle?

      Delete
  22. thank you (k) , I want to ask how can I make the picture full screen cover. full screen, not zooming mode.. please answer, thanks :d

    ReplyDelete
  23. Guys, guys, guys we need help. We got your slider works perfect! However,how we can change the size of the image? Please help us we are new bloggers, our blog is
    http://freekarame.blogspot.gr/

    Thanks in advance
    Cheers!

    ReplyDelete
  24. I am very new to HTML and have had no previous experience with it. I have successfully downloaded the slider to my page, but I am having troubles changing the default images to my own. Any suggestions on how to do that?

    ReplyDelete
    Replies
    1. i have applied it to my blog but am having problems with changing the size of the image url i pasted to auto fit the slide please some one help ooo

      Delete
  25. 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
  26. Thank U.....Its Wonderful.......i have applied it on my blog
    http://wallpaperspackz.blogspot.com

    ReplyDelete
  27. I added width & height size with respect of frame size to match up into img src= tag but image not resizing. Orginal size loading in slide.
    Otherwise, Great wrok!!!

    ReplyDelete
  28. every post that i made has 5 images i want to display it using slide show is these possible? these blogger.com

    ReplyDelete
  29. how we can change images???

    ReplyDelete
  30. Hi,

    Is it possible to add a hyperlink to the images to link to other pages of my blog?

    Thanks

    ReplyDelete
  31. whenever i add this to my blog, it just runs an empty frame, doesnt show any pictures, i did put in links from my picasa web albums but it doesnt show the pictures, just an empty frame, wt shd i do?

    ReplyDelete
  32. i have only one question. i set the slider into my blog but setting the images to fit the width of the slider is my major problem. how do i make sure that the images all fit into the slider. my blog is bancolaliwatamu.blogspot.com
    Help.

    ReplyDelete
  33. i also cant figure out how to add images

    ReplyDelete
  34. please help, how to change the size for border image, i was change wid and height but does't works..

    ReplyDelete
  35. I am trying to edit the transitions in the original JS file, but when downloaded, I get a microsoft error and can't open the file to edit it. Any suggestions??

    ReplyDelete
  36. although its worked out, but the first picture is too long.
    But after that its ok.
    Could you please check my URL? www.krista-mocafkitchen.blogspot.com

    ReplyDelete
    Replies
    1. @Anastasia Krisnawati, It seems everything is ok now
      btw, your blog is so delicious (o)

      Delete
  37. Hi,

    Very interresting.

    How can i do to put a link on each pictures ?

    Thank You

    ReplyDelete
  38. how can I make the images autofit in the slider?

    ReplyDelete
  39. my slidder doesn't want to load at all :(

    www.shop-athome.com

    ReplyDelete
  40. Hello :) Great Job on the sliders. I have one query that others have already asked before, can this slider be retained only on the home page? If not, which other slider would you recommend? Thanks!!!

    ReplyDelete
  41. awesome boss...helped a lot thank u so much

    ReplyDelete
  42. Thank you so much you Men .!!

    ReplyDelete
  43. Need to figure out how to make the image and everything bigger

    ReplyDelete
  44. Hello, thank you for your work.
    Just a question, how can you add multiple sliders on the same blogger page?
    Thank you!

    ReplyDelete
  45. I'm an idiot. When I change the width of my slider, it only gets bigger on the right. I can't seem to center it. Any suggestions. Thanks so much.

    ReplyDelete
  46. THANK YOU SO MUCH. It is working perfectly on my website powered by blogger
    http://www.managementmasala.com/2014/04/how-millennials-gen-y-loyalty-is.html

    I have used it only for post header and have slightly reduced it to a different size.

    Can you please guide how to AUTO fit the images in it. Thanks Again

    ReplyDelete
  47. Thank you so much. Your slider works like a charm. I've tried so many that had glitches and just didn't respond. Yours was simple and easy to install.

    ReplyDelete
  48. Ok...I think I need help (if possible plz) :)
    Here is my blog (Blogger - I am developing on Chrome): http://faisalnet5home.blogspot.com/
    Trying to implement image slider based on this given example (url: http://imagesliderforblogger.blogspot.com/2013/02/add-javascript-image-slider-to-blogger.html#.U3Vu3IFdXD5), however just seeing the empty frame....no image!

    In chrome debug window, seeing this warning message:
    event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

    Source is saying: js-image-slider-1.js

    Any help plz? Thanks a lot :)

    ReplyDelete
  49. Hi I need help centering the slider. The images and slider are the correct size, but it is hanging to the right a little. I would like it to be centered. Any tips?

    ReplyDelete
  50. All about HR learning.....
    http://www.scoutshrm.blogspot.com

    ReplyDelete
  51. Hey friend this is an awesome slider but i need a small help.
    That is i want to display caption like "pure javascript no...." in the left side for some compability.Is is possible.Please help

    ReplyDelete
  52. how to make it change the image in a simple way???

    ReplyDelete
  53. Thanks for your help to add slider in my blog.

    ReplyDelete
  54. can i force the image in the slider to be stretched to the slider.
    In my blog it is looking very unpleasant please help

    ReplyDelete
  55. Thanks a ton i was going through Google day and night and finally i found your great article (k)

    ReplyDelete
  56. how to make the the images auto adjust to the sliders width and height please help and thank you

    ReplyDelete
  57. I used this slider on my Bangla Blog. Really Awesome Slider Without Flash. (h)

    Thanks,
    Rupayon 24

    ReplyDelete
  58. I added the slider to my blog but the images are not sliding / changing and hyperlink to the post also doesn't work. Please check out my blog and suggest me how to rectify, as I need the slider seriously.

    ReplyDelete
  59. Hi, i want to use one of these sliders but I don't understand how can I change the effect and the pause time. I have downloaded the js-image-slider.js document, but all I have is that in the Notepad and I don't know how can I take that to my blog. I'm using blogger. If anybody can help me, thanks!

    ReplyDelete
  60. awsem yar ...very nice slide yar....admin..kuch or new dalo mast bali

    ReplyDelete
  61. Problem solved! I uploaded the .js file to Google Drive

    ReplyDelete
  62. Hello!

    Thank you for this amazing slider!

    I have a question about it. I would like to know if it is possible to replace the url images by RSS feed of my blog. I am looking for a way to make images of latest posts automatically added.

    I don't know if it's possible with a javascript. Thank you in advance for your answer :)

    ReplyDelete
  63. This is so perfect! You are my savior!

    ReplyDelete
  64. i can't find HTML/Javascit option.

    ReplyDelete
  65. How can I make this slider responsive? meaning scale to whatever device is viewing?

    ReplyDelete
  66. Great job due...but i have a question ..how to center align the images inside the slider,is thee any way to auto align the images even if it doesn't match the slider resolution ??

    ReplyDelete
  67. Thank you so much. Your slider works like a charm. I've tried so many that had glitches and just didn't respond. Yours was simple and easy to install.

    ReplyDelete
  68. This is great:) Thank you (k) How to change so the slides would only change when clicked?

    ReplyDelete
  69. Rather pedantic, but how do you change the colour of the selector dots underneath the pictures? Thanks

    ReplyDelete
  70. How to use TWO SLIDERS in a Static Page. I tried to change 'div id' but invain.

    ReplyDelete
  71. Try this
    A) Prepare:: a Photoshop action for 700 width and 306 height image size and convert all your images to the 700x306 size , ( I don't want to disturb the above JS code )
    B) Convert::In Photoshop 1) File> Automate>Batch 2) choose your action then select source file containing your images 3) select your Destination folder to save resized images 4) OK

    ReplyDelete
  72. Lovely, but please is there no way to make it automatically use recent post on my blog using my feed url? Any any please, can you show mme how? Thank you.

    ReplyDelete
  73. how makew responsive with device.. i try but not working with small device.. tks

    ReplyDelete
  74. thanx it worked like a charm but how do i auto fit image in the slide

    ReplyDelete
  75. :( please help me i added two sliders on my home page but this one is not working properly when i change the width of slider frame to 250px it hold at an effect ...my blog is
    www.readersdiary.co
    its important please check

    ReplyDelete
  76. Very Nice ,,,Thanks you
    how to setting time for delay, please... (example : 10 second)

    ReplyDelete
  77. This code seem to dont work any longer. Please help! Thanks!

    ReplyDelete
  78. could you please help me???
    http://practicals4me.blogspot.in/ this is my blog address.

    I'm beginner of blogger. I added images in your code from my blog but image size is not correct as Frame...so please help me....

    ReplyDelete
  79. I like the simplicity of cut-and-paste, no code adjustments were needed. thanks!

    ReplyDelete

 
© 2013- Image Slider For Blogger
Created & Maintained by Shuvojit Das
Powered by blogger.com
Privacy Policy | Contact Me
Back to top