The Default Theme Nivo Featured Posts Slider For Blogger




| 18 comments

In the last post i showed you how to use the Pascal Theme Nivo Slider on Blogger.So in this post i have the second of the three Nivo themes, the default nivo slider.The default theme while looking more basic still has the cool transitions and other options like pop up captions.The slider is from Dev7 Studios and you can see the live demo below.

View Demo Button

Add The Default Theme Nivo Slider To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

Important - This is a scroll box make sure to get all the code.
/*Start Slider Css*/
#slider-wrapper {
background:url(http://3.bp.blogspot.com/-5a4HgOqKh6o/TlKOm3ZYdDI/AAAAAAAAE7s/hvtXoERSo7s/s1600/loading.gif) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://3.bp.blogspot.com/-5a4HgOqKh6o/TlKOm3ZYdDI/AAAAAAAAE7s/hvtXoERSo7s/s1600/loading.gif) no-repeat 50% 50%;
}
#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/-FmV66aYwEP4/TlKOmRAvVnI/AAAAAAAAE7o/b6jArWv6hc8/s1600/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://2.bp.blogspot.com/-gqq2M5VJD1k/TlKOl9jc3SI/AAAAAAAAE7k/tDMFuwOGExA/s1600/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;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://2.bp.blogspot.com/-gqq2M5VJD1k/TlKOl9jc3SI/AAAAAAAAE7k/tDMFuwOGExA/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://4.bp.blogspot.com/-FmV66aYwEP4/TlKOmRAvVnI/AAAAAAAAE7o/b6jArWv6hc8/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
/* End Slider Css, Info @ http://www.spiceupyourblog.com */


Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>


Step 5. Now Copy And Paste This Code Directly Above / Before </head>

If you have previously added jQuery to your template you can leave out the line in green.
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>


Step 6. Save Your Template.

That's the Css and Scripts added we now add the Html for the slides.

We will be adding the slider across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.


Adding HTML For The Slides


The HTML for the slides goes in a Html/Javascript gadget in the cross column section as shown above.

Below is the html for the slider in the demo.There is no really easy way to explain it so you will need to take a minute to figure out the code.I have the URLs (The Destination of the slide when clicked) is in red, the image is in green and the caption (Optional) is in yellow.Each slide works in the same way, you can just copy and paste this code and replace the URL, Image and captions.To add extra slides you can repeat one of the sections and once again add your URL, Image and Caption.

&lt;div id="slider">
&lt;a href="http://www.spiceupyourblog.com">&lt;img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg" title="This Is A Caption" />&lt;/a>

&lt;a href="http://www.spiceupyourblog.com">&lt;img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg" title="This Is Another Caption" />&lt;/a>

&lt;a href="http://www.spiceupyourblog.com">&lt;img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg" title="This is an example of a caption" />&lt;/a>

&lt;a href="http://www.spiceupyourblog.com">&lt;img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg" title="This is another Caption" />&lt;/a>
&lt;/div>

I have 4 slides in the demo you can add more by repeating a section and once again add your URL, Image and caption.

That's the default Nivo jQuery Featured Posts Slider For Blogger.Make sure to check out more of our jQuery tutorials and Blogger Tips.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

18 comments:

  1. Nice tut! Thanks so much for the great info. I was wondering if you could edit a slider from a gadget. You've answered my question! :)

    ReplyDelete
  2. very nice.... i like to put this slider in my blogger at 'side bar'. So i need to decrease the width. where i need to edit?

    blog url: http://hari11888.blogspot.com

    ReplyDelete
  3. Hey, Like in your other slider, can you put how to resize the slider? I want the size to be like 590x150

    ReplyDelete
  4. Is there any way to make these into thumbnails of 150x150?? Thax

    ReplyDelete
  5. Hi there. I tried adding this widget to my site, but only the html for the slides appears where the slider should appear. Any idea why?

    ReplyDelete
  6. Hi! I think this is amazing, however it's not working for me. )'=

    I type in the code for HTML/Javascript on the top bar and nothing show up. Thank you so much for the amazing code, I'd like to try and use it!

    ReplyDelete
  7. I changed the "<" with "<" in the html for the slides (the one that you copy paste in the html gadget box) and it works fine with my blog.

    ReplyDelete
  8. I added it to my blog and it works great, it's exactly what I was looking for!

    I did change the size I simply changed the width and height in the #slider-wrapper and #slider section of the code.

    Thanks so much!

    ReplyDelete
    Replies
    1. thanks for mention this Emily. So helpful.

      Delete
  9. Demo not working... Leave the (.js) file to download on your post.

    ReplyDelete
  10. slider not working. added code and only get the html come up inside html javascript gadget when blog is displayed. -- Please help

    ReplyDelete
  11. thanks for the demo but its not working on my blog favorazzi.com pls help!
    thanks and cheers

    ReplyDelete
  12. Pretty please can you help me im really stuck been on this for hours on my test site?? I only want it to show up on my home page is there a way to do that? Its the only way ill be able to use it on my main blog :( Hope u reply..

    ReplyDelete
  13. Demo is not working. please help

    ReplyDelete
  14. Only the html is showing :-( What am I doing wrong?
    THANK YOU for all the hard work you have done for all of us!

    ReplyDelete
  15. thank you! first one I have found that works!

    ReplyDelete
  16. Use the HTML code from this post http://www.spiceupyourblog.com/2011/08/blogger-pascal-nivo-featured-posts.html

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us