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.
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)
]]>
Step 3. Copy and Paste the following code Directly Above / Before ]]>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhvBi4Hj1E4ktwUxWwkLkg-rb_lC26NIF_X5B93I3niWS6x2vH8E3-QeF5gbrOJ87pve7CE77zDSzIstaBuH5JJh1_oAbKfFJqBT1fYbwwIK5TtBnXUKRQZpHVBO6RzhSh11sWbYbGvXT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5dxJjGeRxtdjjlvzyv_YQuuE6Qg5bFjWRLvTLpxeb68Y5Kl1gb6SI6iH6S-0WmfCsssHkVlyn3CjZJY-eNefURXdSM3_hhdLM2ndshiL_3bl0EaAdBW9yCq67QlUzw1bxwDHOr1_hmTRw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhos_0PmdrbjDfbokejRjlpc6qoM8u6coMEUCurizpyiZHx7YKDNzKONULMQIuFchyWJvvxfnq_PILkpFCu0tYEd76qul4-PUB2OTroUOfScBbAOBRSOd5V4LqQZ58MXaIGiR2GY5nTcrUA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JBBwAm-ssJ76nBlni40WREqGmAG4AlWlTx_oE2zAVtRQIb2NCsTWJT6QEWYRTL4_-3ysOA7CZMJSua-yjXtGRgTYW4Zcr8oU1ZQyzDtZLs-vgiYCu7wvRwq78DSgYgrsOvn_gLAvG7Vq/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oj6jhzxD6eOKl4VWzi_HIH1OP8sF0mku8Cr3u3gfahWLTYMyVlZsYln3aXKwH3LKKwpDiAXE6rhNTvu1f-RUEdnrM40FGdu3hAEdaqZSUOX2ZPwQjT1WIT22opP27_suCDXBOAWNhZXL/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)
Step 5. Copy and paste the following code directly above
If you have previously added jQuery script to your template remove the line in green.
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.
This is an example of a caption.
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.
Libellés : blogger, Image-Sliders, jQuery
In the past I have provided Blogger users with a number of different Image sliders or featured posts sliders.Recently while working on a blog design job I had a client looking for a very specific slider to display some of their best images.The slider needed to have some specific specifications which were not covered by my previous efforts.I also needed to make the slider lightweight and easy to edit so the client could quickly change the images and links.
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 
This is an example of a caption" />
Earlier this week i brought you a very cool 
Featured Sliders also known as Slideshows, Image Sliders, Featured Posts Sliders and Carousels are very popular among bloggers.They can be used to link to featured content in your blog or just as an image carousel for your pictures.I have not really covered sliders or slideshows too much on Spice Up Your Blog.The main reason is there are so many tutorials already available for Blogger sliders, i did share 
Featured Sliders or Slide shows have become very popular with Blogger users over the last few months.They have becomes so popular that over 50% of the 
