How to Add jQuery Nivo Slider to Blogger Blog

May 20, 2012   /   Posted by in Blogger Jquery, Blogger Widgets 218 Comments
How to Add jQuery Nivo Slider to Blogger Blog

Many of way2blogging readers requesting a awesome and easy to use image slider. before i given a simple jquery slider, which is something difficult to add slides and use. Today i am giving the World’s most awesome jQuery slider. which is jQuery Nivo Slider. jQuery Nivo Slider is free to use and it is offering great setting options to customize your slider, and it is very easy to use with my Widget Generators.

Nivo Slider Features

  1. 16 unique transition effects
  2. Simple clean & valid markup
  3. Loads of settings to tweak
  4. Built in directional and control navigation
  5. Packed version only weighs 12kb
  6. Supports linking images
  7. Keyboard Navigation
  8. HTML Captions
  9. 3 Slick Themes
  10. Free to use and abuse under the MIT license

For more Information Visit the Nivo Slider website

Preview

Watch Live Preview

How to Install jQuery Nivo Slider in Blogger?

Here are the Two simple steps to add the Nivo Slider to your Blog.

Please keep in mind, All the Slide images widths and Heights Should be Same, and those are match with the Slider Script Width and Height.

For Example:- I taken the Width and Height as 640px and 300px Respectively. Then all my Slide images width and Height MUST be 640px x 300px. Then only Slider works AWESOME!. :D

Installing the Nivo Slider Script

Here is the Generator for the Nivo Slider Script.

  1. Just Customize the settings as your need and Generate the Code.
  2. Copy the Nivo Slider Script and paste it before </head>

Generate Script

Adding Nivo Slider

Here is another Nivo Slider Slides Generator.

  1. Add any Number of Slides and insert the Valid Image URL(required) into each Slide.
  2. You have the options to add the links and Captions to each slide, and you can also sort them by dragging it, at top of each slide.
  3. Generate the Nivo Slider and Click the Add to Blogger button
  4. After adding the Widget Drag the Nivo Slider Widget where ever you want to show the Slider.

Generate Slider

If you Enjoyed with this Awesome Slider, Please Share this Tutorial.

Please leave your comments and suggestion to improve this slider more on blogger platform. :)

ChangeLog

26/06/2012
+ Updated Nivo Slider Script Version to 3.0.1
+ Fixed Bugs in Slider.

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

218 Comments on “How to Add jQuery Nivo Slider to Blogger BlogAdd Comment

1 2 3
  1. avatar

    Bilal November 5, 2012 3:19 pm #

    dear brother
    plz tell me k jb 1 page par zyada post ho jain to next page kasy add karna hota hy.

  2. avatar

    Dom November 5, 2012 8:23 pm #

    You should make the slider generator show the HTML code like the script does. I don’t have a “blogger” website, and I would have liked to use this. Shame.

  3. avatar

    Jon November 5, 2012 11:04 pm #

    After I put in the code and generate slider to blog the slider shows up and seems to work ok but there are giant gray lines filling the width of the screen as a background behind the slider. Any advice on getting rid of the distracting background?

  4. avatar

    Mohammed Shariq November 9, 2012 8:55 pm #

    Where should we paste the generated script???

    • avatar

      M November 15, 2012 7:44 pm #

      in your blog’s HTML

  5. avatar

    M November 15, 2012 7:47 pm #

    I followed all the instructions but it won’t work. I only see a white square that keeps loading and loading but won’t load!
    What should I do?

  6. avatar

    duygu November 16, 2012 4:58 am #

    I installed it to my blog from here a few weeks ago and it was perfectly working until 2 hours ago. What happened now? how can i fix it? (your demo preview is not working too)

    • avatar

      Harish November 16, 2012 9:25 pm #

      Please update the widget code.
      Sorry for this Inconvenience . .

      • avatar

        duygu November 16, 2012 10:59 pm #

        thank you so much you’re awesome! :D

  7. avatar

    Tiffany November 16, 2012 5:52 am #

    The slider worked great for the past two days, but today I checked and I keep getting this error — a pop up box appears and says “To view this page, you must log in to this area on bloggerblogwidgets.googlecode.com:80:
    Google Code Subversion Repository” and requests username and password. Could you tell me how to stop this box from showing up?

    • avatar

      Harish November 16, 2012 9:25 pm #

      Please update the widget code.
      Sorry for this Inconvenience ..

  8. avatar

    isabelle November 16, 2012 6:39 am #

    I put a month ago, succesfully the slider on my 3 blogs and today, it is not working at all : what’s happen ?

    isabelle

    • avatar

      Harish November 16, 2012 9:24 pm #

      Please update the widget code.
      Sorry for this Inconvenience. .

  9. avatar

    IsaG November 16, 2012 9:17 pm #

    Thanks for the update : it works …
    Isabelle

  10. avatar

    Jooby November 17, 2012 11:18 am #

    How do I update it? And where would I find the code, can you provide a link? Thanks :)

    • avatar

      Jooby November 18, 2012 10:45 am #

      Nevermind, I found the Script, but, I have no idea how to apply the script onto the blog, help please? Thanks~~!

  11. avatar

    Nitin November 17, 2012 2:36 pm #

    hello, please help me, I put your nevo silder coding and it working perfectly, but now it not running. Please help me dear and give a solution!:(

  12. avatar

    Nitin November 17, 2012 3:07 pm #

    After updating script as u say, it not still working….:(

  13. avatar

    George Menezes November 17, 2012 6:02 pm #

    Congratulations for providing us such a powerful (and easy) solution with those generators.

    But mainly for the fast update with the Google code hosting problem. Thanks a lot!

    George – Brazil.

  14. avatar

    fran November 18, 2012 3:53 am #

    WHen you say Widget Code do you mean go into my blogs template and re enter all the info OR re enter the widget code where I enter the images html?

  15. avatar

    fran November 18, 2012 3:56 am #

    Do I have to re generate script and delete the old out of my template OR re generate slider?

  16. avatar

    Fabbio Joe November 18, 2012 6:14 am #

    why is problem the nivo slider? Update?
    Someone help me?
    Thanks

  17. avatar

    Fabbio Joe November 18, 2012 6:16 am #

    Please where is the update Nivo slider?
    Please can you tell me the link?

  18. avatar

    Jack Jones November 18, 2012 7:01 am #

    Hi this was the best thing I’ve ever found since I started my blog but do you know it could be changed to the light theme, that would be even more amazing, thankyou :)

  19. avatar

    Fabbio Joe November 18, 2012 7:10 am #

    Harish, this is the update? if you answer me?
    tks

    “It is jQuery conflict.
    remove this line from template

    and most important!!, MOVE this line after tag

  20. avatar

    Pierre November 20, 2012 6:40 pm #

    Hi,
    thanks for updating the script hosting !
    YOU ARE GREAT ! :))))
    Keep up the good work !

  21. avatar

    Ryan November 20, 2012 10:34 pm #

    I updated the script but now it only loads and will not stop.

    I’d appreciate some advice on what may be the issue and get a little more info than, “Please update the widget code. Sorry for this Inconvenience.”

    • avatar

      Harish December 5, 2012 11:25 pm #

      please update the new CDN hosted script.

  22. avatar

    Lacy November 22, 2012 2:59 am #

    I updated the script and the widget, but now when the widget is added it removes the tabs that were in my sidebar.

  23. avatar

    Mohammed November 24, 2012 6:19 pm #

    Thank you for your great info, I was Just looking for this.

    :) Good JOb

  24. avatar

    DaeDaeSung November 28, 2012 6:23 am #

    For Some reason, my slider keeps spinning, no pics are showing up….

    • avatar

      Harish November 29, 2012 5:42 pm #

      check your template, if there are two jQuery plugins in your template?

  25. avatar

    Pierre Hertzog December 5, 2012 5:52 pm #

    Hi, it seems all scripts hosted at github.com are not working anymore, since tonight. Nivo slider and auto-read-more as far as I’m concerned.
    Any solution to this problem ?
    Thanks in advance !

  26. avatar

    Pierre Hertzog December 5, 2012 5:58 pm #

    Sorry, forget my previous comment. I checked your code generator and found the new script host, everything’s fine now. :)))

  27. avatar

    George Menezes December 5, 2012 6:14 pm #

    Man, mine is not working too. Just spinning but not showing the images.

    According to github, there is a 404 error about the jquery.nivo.slider.pack.js file.

    Could you please fix it to us?

    Thanks in advance!!

    • avatar

      Harish December 5, 2012 6:31 pm #

      I have moved scripts to my CDN. please update the script.
      Thanks.

  28. avatar

    Anitra December 11, 2012 2:48 am #

    I love this slider, but wonder if you could set up an email list to notify users when the script gets updated. This is the second time it’s just stopped working, and while I know now to come here and look for an update, other users might not, and it would be helpful to have some notification. Maybe that’s asking a lot since you’ve provided such a great tool for free, but I thought I’d suggest it.

    • avatar

      Harish December 11, 2012 4:30 pm #

      i am sorry, till now i used public free Hosts for the scripts. Due to high usage and bandwidth consumes, Public accounts are suspending.
      but I am actively updating scripts. this time i hosted on my own server and serving all scripts using my CDN.

  29. avatar

    Anitra December 11, 2012 3:07 am #

    I’ve just updated, but the slider is still not working. Thanks for your help…

    • avatar

      Harish December 11, 2012 4:30 pm #

      you didn’t included the jQuery script.
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

  30. avatar

    Anitra December 15, 2012 12:21 am #

    Should that replace this:

    Or do I put that somewhere else? Sorry–I’m such a novice.

    • avatar

      Harish December 21, 2012 3:54 pm #

      yeah. replace it.

  31. avatar

    Joe December 19, 2012 5:15 pm #

    Hello Harish,
    Please,
    Where are the new script uptaded?

    • avatar

      Harish December 21, 2012 3:48 pm #

      New scripts are changed in the generator. please generate new slider code.

  1. Pingback: Adding jQuery Nivo Slider to Blogger

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress