Nivo Slider is one of the best jQuery slider available,we previously shared Pascal Theme of Nivo Slider and Simple Image Gallery now this time we are sharing Default Theme of Nivo slider.Image slide shows are the best ways to show off your photos,featured posts,images and any other material as you wish.Also Nivo slider has 16 unique transition effect which makes it more beautiful.The installation of this slider is very easy so that new blogger's also can implement this gadget to their blog very easily,to see demo click on the button below,


Live Slider Demo


How To Add Default Theme Of Nivo Slider To Blogger?


For better understanding I am dividing this tutorial in three parts,

  1. Adding Styles
  2. Adding Scripts
  3. Adding Slider

Step 1: Adding Styles


  1. Go to Blogger Dashboard > Template
  2. Download a copy of your template
  3. Hit Proceed button
  4. Find below code in your template,


]]></b:skin>

add below piece of CSS code just above it

#slider {
    position: relative;
    border: 5px solid #333;
}

#slider img {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}

#slider a {
    border: 0;
    display: block;
}

.nivo-controlNav {
    position: absolute;
    left: 260px;
    bottom: -42px;
}

.nivo-controlNav a {
    display: block;
    width: 22px;
    height: 22px;
    background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/s400/bullets.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin-right: 3px;
    float: left;
}

.nivo-controlNav a.active {
    background-position: 0 -22px;
}

.nivo-directionNav a {
    display: block;
    width: 30px;
    height: 30px;
    background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/s400/arrows.png) no-repeat;
    text-indent: -9999px;
    border: 0;
}

a.nivo-nextNav {
    background-position: -30px 0;
    right: 15px;
}

a.nivo-prevNav {
    left: 15px;
}

.nivo-caption {
    text-shadow: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    padding: 10px 0px;
}

.nivo-caption a {
    color: #efe9d1;
    text-decoration: underline;
}

.clear {
    clear: both;
}

.nivoSlider {
    position: relative;
}

.nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
}

.nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 60;
    display: none;
}

.nivo-slice {
    display: block;
    position: absolute;
    z-index: 50;
    height: 100%;
}

.nivo-caption {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: #000;
    color: #fff;
    opacity: 0.7;
 /* Overridden by captionOpacity setting */
    width: 100%;
    z-index: 89;
}

.nivo-caption p {
    padding: 5px;
    margin: 0;
}

.nivo-caption a {
    display: inline !important;
}

.nivo-html-caption {
    display: none;
}

.nivo-directionNav a {
    position: absolute;
    top: 45%;
    z-index: 99;
    cursor: pointer;
}

.nivo-prevNav {
    left: 0px;
}

.nivo-nextNav {
    right: 0px;
}

.nivo-controlNav a {
    position: relative;
    z-index: 99;
    cursor: pointer;
}

.nivo-controlNav a.active {
    font-weight: bold;
} 

Step 2: Adding Scripts


Now find below code in your template

</head>

add below code just above it,

<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://helperblogger.ucoz.com/code/jquery.nivo.slider.js"
type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider();
    });
</script>

Save your template.

Now you have successfully implemented the slider's scripts and style into your blog,Now let's add the slider as an HTML/Javascript widget.

Step 3: Adding Slider


  1. Now go to Layout
  2. Click Add a Gadget
  3. Select HTML/JavaScript
  4. Paste below code,


<div id="slider">
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="URL OF IMAGE" alt="" title="ADD DESCRIPTION HERE" /></a>
</div>


  • Now replace "YOUR LINK HERE" qith the link which you want to add to image,if you don't want add any link then just replace replace it with #.
  • Replace "URL OF IMAGE" with image URL.
  • Replace "ADD DESCRIPTION HERE" with the image description,if you don't want to description then just remove the text and leave it blank.

Need any Help


I have kept the installation as easy as possible,if you are getting any little problem then feel free post it below in comment box.

Note - If your blog have a jQuery plugin then it may not work,just remove following code from second step,

<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>

Post a Comment

  1. "text-indent: -9999px;" Could you please tell me what's the use of this?

    ReplyDelete
    Replies
    1. Hey I also don't have info. in details you can visit below page to get information about text-indent property.

      http://www.w3schools.com/cssref/pr_text_text-indent.asp

      Delete
  2. Please tell us what size the images need to be. Thanks!

    ReplyDelete
    Replies
    1. you can any size of images,but all images must have same size.

      Delete
  3. hey rahul......i did everything.....
    but still slider appears on my blog like a bar....thats it....

    is there anything i should do to avert this??
    please help!!

    ReplyDelete
  4. Hey Rahul. Do we have a way this can be done automatically. I mean once we upload a new article, can we make it to appear in the slider???

    ReplyDelete
  5. i have been trying to add url images and nothing shows up

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. thanks.., it work in my blog official-seller.blogspot.com, but the pages always dead flame.

    ReplyDelete
  8. My blog is this- http://drdcash.blogspot.com/ and from the beginning there was that Image slide and Now it doesn'y work and ugly I want to add your one but Template is complicating can you help me in adding your one and removing present one.

    ReplyDelete
  9. This has really helped me, but by installing Coin Slider. You can make a tutorial with the code here http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ , but the positioning is exactly the same. I've couldn't find coin slider anywhere, so thank you.

    ReplyDelete
  10. Noossa muito lindo e util amei muiito mesmo vlw bjs

    ReplyDelete
  11. Check to see if your desired username or vanity url is still available at dozens of popular social networking and Social Bookarking websites.

    ReplyDelete
  12. How to Slider run with Blogger post inside?

    ReplyDelete
  13. Please give the very clear tourial...

    How to the Nivo slider add to Blogger Post Inside?

    (like:- http://demo.helperblogger.com/default-nivo-slider.html)

    Thanks

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top