Nivo slider is one of best slider available on the web.I have shared two versions of nivo slider on helperblogger so far,default theme of nivo slider and nivo slider with ribbon but today I am sharing a customized version of the nivo slider.In this customized version the caption and bullets are customized to make them more beautiful also as always I have kept the installation as easy as possible you have to copy and paste the code.Now lets see how to add it to blogger blog.


Live Slider Demo

How To Add This Slider To Blogger?


  1. Select the images which you want add in slider
  2. Resize them to same size
  3. Upload it and get the URL.
  4. Now go to Blogger Dashboard > Layout
  5. Click on Add a Gadget (below header)
  6. Select HTML/JavaScript
  7. Paste below code inside it,

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

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

 .nivoSlider a {
  border:0;
  display:block;
 }

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

 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }

 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

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

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

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://2.bp.blogspot.com/-g_Eipd24SIQ/UBwSRk_nXBI/AAAAAAAACz0/lVsc6AvQWzo/s1600/helperblogger.com-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="http://4.bp.blogspot.com/-oXh96HmmJXI/UBwRGFfZxiI/AAAAAAAACzs/BKCay8mJcvE/s1600/helperblogger.com-5.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="http://3.bp.blogspot.com/-O6gjNPiebwc/UBwREzdVzPI/AAAAAAAACzk/QdXbjGYwclM/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="http://2.bp.blogspot.com/-7g47XCf9U2Y/UBwRCh7WkaI/AAAAAAAACzc/4pmq9IXY5zk/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="http://4.bp.blogspot.com/-FTx7ipAY2z4/UBwRAaa5eRI/AAAAAAAACzU/Ozp_LQHhIHs/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="http://4.bp.blogspot.com/-6yJQkb7_z8s/UBwQ-BqQKRI/AAAAAAAACzM/xtaCrM9BhCg/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>


     - Slider Width And Height

Adjust the width and height of slider as per your images 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

     - jQuery Library

If you have already added a jQuery library to your blog then remove the highlighted color.

Finally save your widget and you are done.

I have kept the installation 1 step and as easy as possible.If still you are getting a single problem then feel to ask it to me.I will try to give reply as soon as time allows.The credits for customizations goes to webdesign.tutsplus and helperblogger.

Post a Comment

  1. please help in changing the width..

    ReplyDelete
    Replies
    1. First change the value which I have highlighted above in as width:650px;

      2. Change the width of caption in this sector .nivo-caption {


      3.If you want to adjust the position of bullets then change the values of left or right properties in below sectors .nivo-prevNav { .nivo-prevNav {

      Delete
  2. Hello friend. You helped me much from starting of my blog. But recently i face a serious problem. The problem is a web site is copying my blogs every post. Another serious matter is that it almost copy it in real time when i publish a new post. The truth is It automatically copy by content by RSS feed. So what i can do now. I do not what are the benefit of RSS feed. But if i turn it of the web site cant copy my content but i can't submit my sitemap on goggle. Please give me a suggestion what to do.

    ReplyDelete
    Replies
    1. HELLO
      SAME PROBLEM HERE
      ANY SOLUTIONS
      PLZ PLZ HELP

      my blog http://nptechs.blogspot.com

      Delete
    2. File a DMCA content against them,

      http://hubpages.com/learningcenter/how-to-file-a-dmca-complaint

      Delete
    3. I not understand the system. If you know another way let me know

      Delete
    4. bro. this is one and best way to stop this.By this google will remove those posts and send them a notice.If they don't stop it then their blog/site will completely removed and account will suspended.

      Delete
    5. RSS feeds are feeds of your own posts. That's why it copies your posts in real time when you publish a new post.

      it's ok.. hahahaha

      Delete
    6. I am really glad that I have found this post and I thank you for letting us know about this information….This is a big help for sure!!Thanks!
      Wholesale Jumpsuits

      Delete
  3. Rahul, with your permission can I give this post to my blog. I will surely give a good amount of back link to your site. please rahul allow me.

    ReplyDelete
    Replies
    1. Of course.Everyone can share these articles but with Proper Credits

      Delete
  4. Is the demo working? not for me.

    ReplyDelete
  5. ah.. why my slider hover my post... zzzz

    ReplyDelete
  6. Nice Slider

    Regards,
    Navneet
    www.techravers.com

    ReplyDelete
  7. sweet
    http://www.villagefile.com/

    ReplyDelete
  8. my best friend's half-sister makes $63/hour on the laptop. She has been fired for 9 months but last month her payment was $20010 just working on the laptop for a few hours. Read more on this site http://Run19.com

    ReplyDelete
  9. Can you insert this into a post? I mean use it as a gallery?

    ReplyDelete
  10. It works perfectly but some people say the arrows dont work ...
    how can I fix this?

    XOXO
    Lea Lillith
    www.velvetmolecules.com

    ReplyDelete
  11. my classmate's step-aunt earned $21420 a week ago. she has been working on the internet and got a $443700 condo. All she did was get fortunate and put into use the information given on this website http://www.taz3.com

    ReplyDelete
  12. Dear, I am very like your website and all post. it is great and usefull for us. i will often come here,and support any post which your push. Tks.welcome to our website :http://www.lingerieocean.com.WHOleSAle sexy lingerie UK

    ReplyDelete
  13. Hi, I want ask something, why every i put a code below the header, the widgets never appear. Can You tell me what's wrong with my template?

    I love your site so much. It's cool and completely helping.

    uhm sorry for my bad english..

    ReplyDelete
  14. Nice post i liked this techexplanation.blogspot.in

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

    ReplyDelete
  16. cool widget, nice blog ! visit my blog http://www.obatherbal-2u.blogspot.com

    ReplyDelete
  17. Hi mate,

    How can I use the image slider in my post? I wanted this to appear on a specific post only. Is it possible? thanks

    ReplyDelete
  18. I just found your blog unexpectedly from the search engine. First time I saw it, I know it's a very informative blog. I got so many something new from here. Good work and thanks for that!
    business loan for bad credit

    ReplyDelete
  19. re you OK?

    Great post,Thanks for nice and cool website on www.helperblogger.com.I can to know about these things. It is a very well site.I now,It is a not any simple information.This site is help for every one.I like this site.This a nice post.So nice,i want to show Click-n-earn Get Compensated Email advertising and view sites, Get Compensated To Improve, Buy Cost-effective Banner Marketing PTC Marketing Email promotion, Cost-effective ad Marketing, Cost-effective PTC Marketing, Produce Cash On the internet, ways to make online, Get Compensated For Website Strikes work from home USA And More. Try It Out Today!

    Thanks for the great post.

    ReplyDelete
  20. Again its not working for me...
    I have added on my temp blog here..
    http://testblogofthetrickslab.blogspot.com/
    Look

    ReplyDelete
  21. Sorry if this has already been asked, but, is there a way to turn the images into links? Thanks

    ReplyDelete
  22. Humm , good!!!!!!!
    agnesvata.blogspot.com.br

    ReplyDelete
  23. HI
    PLS I NEED TO CHANGE POSITION TO RIGHT FOR THIS SLIDER HOW CAN I?
    THANKS

    ReplyDelete
  24. Great post,Thanks for nice and cool website on http://www.lover-fashion.com
    sexy sleepwear
    halloween costumes
    Plus Size sexy lingerie

    ReplyDelete
  25. Keep sharing ideas .... Your valuable ideas will help newbies to grew up into professionals..... This ideas will make newbies to become more efficient in the field... So share more and more......!!! Make Money , Blogging Tips

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

    ReplyDelete

  27. thanks for the great trick ,it really help me in modify my blog
    check how beautifull my blog has become :http://menaveron.blogspot.com/

    ReplyDelete
  28. http://seobusinesscompetition.com/Now this is in actual fact cooperative. It’s very openhanded of you to share this with us.

    ReplyDelete
  29. The hottest sexy Halloween costumes for 2014 from WholesaleLingerieX.com. we ship from our warehouse.Wholesale Sexy Costumes, Low Price Sexy Halloween Costumes From China Top Suppliers.
    Wholesale Sports Costumes
    Wholesale Superhero Costumes
    Wholesale Witch Costumes
    Wholesale Sexy Costumes
    sexy halloween suppliers

    ReplyDelete
  30. Dear friends,
    We are pleased to introduce ourselves as a professional manufacturer of fine sexy lingerie, such as with suppliers: adult costumes, shirts, corsets, bikini sets, babydolls, sexy ladies underwear, sexy garter sets, men's underwear, erotic dresses, sexy stockings and sexy leather series. Our website prettyperi.com
    If you are interested in some of the details, just contact with Alice , so you can order immediately.
    We will adopt international service pack as DHL / UPS / TNT / EMS.
    Payment is Western Union, Paypal, MoneyGram, Paypal payment.
    E-mail: prettyperi6@hotmail.com

    ReplyDelete
  31. We are the professional fashion accessories manufacturer from China.We provide all types of sexy lingerie,corset,fasion dressses,bikini,beachwear , etc. With updating new styles on our net at regular intervals.If you are interested in our products, pls visit prettyperi.com for more info.

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

    ReplyDelete
  33. If you are looking for sexy lingerie, corset
    Do not miss http://www.prettyeri.com

    ReplyDelete
  34. This is a changing world of fashion, women seek simple and elegant, beautiful and sexy lingerie wholesale in the www.prtttyperi.com.
    Woman can attract men's attention, to show their charming figure all in this site.

    ReplyDelete
  35. Do you want yourself to become more beautiful? Fashion dress, sexy dress, wholesale leggings, sexy lingerie, sexy leather series, etc. In prettyperi.com, you will find your favorite.

    ReplyDelete
  36. I wonder if you might be able to help me. I've got the nivo slider installed on my blog. it's been working perfectly for weeks. Yesterday... randomly stopped working. Any ideas why that might be? my blog is here: www.wondermagazine.co.uk

    ReplyDelete
  37. Hello, I just wanted to say that I really enjoyed your site and this post. You make some very informative points.Keep up the great work!
    Wholesale Sexy Swimwear

    ReplyDelete
  38. This is very useful to me.
    I found another one wesite for Blogger META Tag. That is
    Blogger META Tags Generator

    ReplyDelete
    Replies
    1. http://allinworld99.blogspot.in/2014/11/blogger-meta-tags-generator.html

      Delete
  39. How to add load more option in blog just like in your homepage... Please Please reply.

    ReplyDelete
  40. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The angular js programming language is very popular which are most widely used.
    Web Designing Course in Chennai | web designing training in chennai

    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