Customized Nivo Slider For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Saturday, 4 August 2012

Customized Nivo Slider For Blogger


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

 UPDATE 22-02-2018 - Widget scripts have been updated.

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://helperblogger.ucoz.com/code/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.

38 comments:

  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
  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. 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
  27. http://seobusinesscompetition.com/Now this is in actual fact cooperative. It’s very openhanded of you to share this with us.

    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