Recent Posts

Blogging Jquery: How to Add jQuery Nivo Slider to Blogger Blog

How to Add jQuery Nivo Slider to Blogger Blog

Many of SearchMSKM 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

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>

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.
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.
Share on Google Plus

About Muhammad Shoaib Khan