The Pascal Theme Nivo Featured Posts Slider For Blogger




| 36 comments

The Nivo jQuery powered featured posts slider is one of the most popular sliders available.The nivo slider comes in three themes with various options for the design and functionality.I have received lots of requests for a tutorial on using the nivo slider on Blogger so in the next few posts i will show you how to use all three themes or versions of the nivo slider on Blogger.In this post we will start with the Pascal Theme which looks amazing.The Pascal theme uses the various transitions that make nivo so popular but also has some unique features.The slides appear on a stylish background with a 'Featured Ribbon' in the top corner and you can optionally add captions and links to the slides.Credits for the Nivo Slider go to Dev 7 Studios, you can see it in action on the demo page.

View Demo Button

Add The Pascal 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

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*/
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/


/* The Nivo Slider styles */
#slider{
width:618px;
height:246px;
}
.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;
}
/* 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;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background:url(http://1.bp.blogspot.com/-ILr32hEyEv4/TjarIFuIrEI/AAAAAAAAE3U/vSN_lW1qjIM/s1600/slider.png) no-repeat;
width:668px;
height:299px;
margin:0 auto;
padding-top:17px;
position:relative;
}

.theme-pascal .nivoSlider {
position:relative;
width:630px;
height:235px;
margin-left:19px;
background:url(http://4.bp.blogspot.com/-q9aJRd_k5RQ/Tjaqy4XX5OI/AAAAAAAAE3E/Y32S6GBDjso/s1600/loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:630px; /* Make sure your images are the same size */
height:235px; /* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border:0;
display:block;
}

.theme-pascal .nivo-controlNav {
background:url(http://4.bp.blogspot.com/-HIPfhGDE4hk/TjaqyBgponI/AAAAAAAAE28/Tx8B5kcVWvg/s1600/controlnav.png) no-repeat;
width:251px;
height:40px;
position:absolute;
left:200px; /* Tweak this to center bullets */
bottom:-42px;
padding:8px 0 0 82px;
z-index:20;
}
.theme-pascal .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://2.bp.blogspot.com/-roNkMPuTzA0/Tjaqxid76eI/AAAAAAAAE24/i-Q9G-YMd8c/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-pascal .nivo-controlNav a.active {
background-position:0 -22px;
}

.theme-pascal .nivo-directionNav a {
display:none;
}

.theme-pascal .nivo-caption {
bottom:40%;
left:auto;
right:0px;
width:auto;
max-width:630px;
overflow:hidden;
background:#fff;
text-shadow:none;
font-family: arial, serif;
color:#4c4b4b;
}
.theme-pascal .nivo-caption p {
padding:5px 15px;
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}
.theme-pascal .nivo-caption a {
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}

.theme-pascal .ribbon {
background:url(http://2.bp.blogspot.com/-nA_TG0PDAWI/TjaqzNcGeVI/AAAAAAAAE3I/2k21uBeyfng/s1600/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/

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. Copy and paste the following code directly above </head>

If you have previously added jQuery script to your template remove the line in green.
<!--Start Slider Scripts-->
<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>
<!--End Slider Scripts info @ http://www.spiceupyourblog.com-->

That's the Css and scrips added for the slider to work next we add 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.

<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://www.spiceupyourblog.com"><img src="http://2.bp.blogspot.com/-Xt9jSbEPD6c/TjanOOIOSTI/AAAAAAAAE2o/dDqmBNpHpbk/s1600/nemo.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com"><img src="http://4.bp.blogspot.com/-5RO8VkEJdSc/TjanPX3-QWI/AAAAAAAAE2s/sSkePF_NHOw/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>

<a href="http://www.spiceupyourblog.com"><img src="http://1.bp.blogspot.com/-1FkuuXVZtRg/TjanQD78lnI/AAAAAAAAE2w/F6jlTj3E3ZE/s1600/up.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com"><img src="http://3.bp.blogspot.com/-qJt0cLCCEwk/TjanQl7IG1I/AAAAAAAAE20/mP2euczZ8d0/s1600/walle.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This is an example of a caption.
</div>

</div>

That's it over the next few posts we will cover the other versions of the nivo slider.Make sure to check out more of our jQuery tutorials.

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.

36 comments:

  1. Thanks Paul.
    I was really thinking to add a featured slider on my blog.
    Will try this nivo slider on my blog soon.

    ReplyDelete
  2. Can you add more than 4 photos or is that the limit? Thanks!

    ReplyDelete
  3. Thank You so much for the tutorial. I was just wondering if there was any way that this could be made into blocks of maybe 200x200 each?? That way you can have about 4 to 5 blocks. Thank you for any help.

    ReplyDelete
  4. I am so excited, looked everywhere for a tutorial on adding this slider! Can't wait to see the others!

    ReplyDelete
  5. Hello - I was so excited to find this. I went through all the steps and I got the slider to appear, but my photos aren't showing up. Do I need to host them from flickr? I"m pulling them from the URL of photos on blogger.

    ReplyDelete
  6. I figured out the problem from your simple slider post. You have to paste that one section of code before /head section. Sorry. I'm a total novice with HTML. Thanks for this great slider. I had to resize photos and relink from FLICKR, but this is so awesome. Many thanks and once my is tweaked, I'll stumble and tweet, etc. Just awesome!

    ReplyDelete
  7. On step 4, what code do we search for?

    ReplyDelete
  8. Is it at all possible to make the slider smaller? I am thinking only about 100 pixels smaller. It is wider than what my blog is set to.

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

    ReplyDelete
  10. hey, i can do it! Thanks a lot...

    ReplyDelete
  11. SouthernLady23 - There is no limit just repeat the code with another image and link.

    @ Jason, My Blog - Because of the background image and ribbon it cant be resized.The default theme can be resized though - http://www.spiceupyourblog.com/2011/08/default-theme-nivo-featured-slider.html

    @ jennifer - Glad you figured it out and thanks for sharing.

    ReplyDelete
  12. Awesome tutorial ! Tried it on my blog: http://www.mobilelitratista.com/

    It looks great!

    ReplyDelete
  13. there's a part on the scroll box that says "Tweak this to center bullets"

    How exactly can I do this? My bullets don't look good :)

    mobilelitratista dot com

    Thank you !

    ReplyDelete
  14. Hi,

    I figured it out, haha.

    I just had to change the numbers here: padding:8px 0 0 82px;


    Thank you again, for the tutorial! :)

    ReplyDelete
  15. Thanks so much for this tut. It's so much easier to change up slides without having to edit the template every time. Woot!

    ReplyDelete
  16. thanks for the most awsome script .. the best part is that how you explained to use this script .. no one else clearly tells how this scripts work.. but you did perfectly .. thanks alot .. :D

    ReplyDelete
  17. does this slows down the speed of my blog?

    ReplyDelete
  18. hi, how do i change the timing of the changing slides?

    ReplyDelete
  19. A fantastic work done by you...
    Hates off to you dear...
    chhaparri.blogspot.com

    ReplyDelete
  20. how to decrease the overall size of the slider..to fit it in my blogger

    ReplyDelete
  21. If a picture is opened in lightbox, the pink ribbon and button bar is still shown. Any ideas how to fix that?

    ReplyDelete
  22. very nice on my blog...if just incase can i add more than 4 slide images?

    ReplyDelete
  23. Hello nice tutorial i got it workin.but i wanna put it on my home page only
    how can i do so ? pleaz help

    ReplyDelete
  24. Helllo Nicew tutorial man
    but i wanted to know how to put this on the homepage only

    ReplyDelete
  25. i have resized it here http://testblog1150.blogspot.com/

    ReplyDelete
  26. Hi, I want the slider to show on the main page only. How do I do that? Thanks!

    ReplyDelete
  27. @ Isolated - You can find a tutorial for that Here

    ReplyDelete
  28. How to change the time for changing from one image to the next one?

    ReplyDelete
  29. I have installed it and can see the slider but the images are not loading. Any ideas?

    ReplyDelete
  30. I love this slider and have started using it on my blog (still have to play around with images/posts), but I was wondering if it is possible at all to hide this on post pages? I love it on the home page, but would like my post pages a bit more streamlined. Thanks!

    ReplyDelete
    Replies
    1. Kim you can see how to add it to the home page only Here .

      Delete
    2. Thanks so much, Paul! Do you happen to know of a way to move the caption bar down to the bottom of the photo? I am looking at the slider css and in my own template, but am having trouble finding that. It's not overly important, but would be nice to know how to do.

      Delete
  31. hey its great..looking nice on my blog :)

    ReplyDelete
  32. awesome findings! lol i have been looking everywhere on how to install nivo slider on blogger but none work. I run this on my test blog and it works like a charm! you're super genius. thanks for sharing.
    gbu

    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