A New Featured Post Slider Captured From The Pascal Theme Nivo For Blogger

The Nivo "Featured post slider" is one of the most famous post slider available which is powered by jQuery.This Nivo powered by jQuery Featured Post Slider comes with lots of functions and most attractive features.The Nivo Slider comes with three themes with various options for the design and functionally.In this post we will start with pascal theme which looks most attractive and amazing.The pascal theme contains various transitions that make Nivo so popular but it also has some more unique features.

This widget is absolutely changeable i mean you are totally able to add some more pic's and able to put and change links of these pic's in Post slider.You are able to check it out this Nivo Featured Post Slider on our demo page.

How To Add The Pascal Theme Nivo Featured Post Slider To Blogger..??


Remember always backup your template before editing your HTML coding.


Step1.)Go to your Dashboard and click on Design > Edit HTML > Check the Expand Widget Templete


Step2.) Find the following code in your blog's HTML (Press CTRL + F for search bar for finding the code easily)

]]></b:skin>

Step3.)Copy and paste the following code directly Above/Before ]]></b:skin>

/*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/AVvXsEj4O6qqjQj_8dClNTNU8PsDvezq6zM8bYWs3GohSctUlKToJrElI5r0t_Xfhq_naquwXsod7kc8DobK4RKfDj6U8Jk3qg9jZEkB3J75jDpBrqOe0WAlUpLsO_6oivUvFFCGxkhv8KLEBMfv/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/AVvXsEioYfo9NKdGSMbn9KbiI3KJd5SgHbmJkxcJ3Uinlw9hEuPKnkbnul3hHixYzEo06SUh3KJVWsIX4ZZ0cdMDvIxaKkqGWzeNDeE75U87LDhGe-iaJbE5ksoNnx2dQ9ARkW34NvTFAervIWEf/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/AVvXsEizGDGVhiHUeF2nTWiyDnRywBOU8SAmrYTP3lrj3FvU4yk2Zz-712duxmWhgpOA6m1fKx-ljbvop2lCKGoJDpBROEpCUZ8NE0hiuuNiQCvikaidQEFnAr89covMeNTTYtnH1RJ4SmmL8jvb/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/AVvXsEh-rgoFSn6zbctHG41xBDC-lDKW5Dhjsu9BoepCG-ZrrkLAU78YW2v58WCkFNegegwxkQjt_yCVFcou3Fh0JtcI-XwRtjfOeAoKxsjGCHYYU8wNyKwuWANBmzXyVg9s5uActWTS8XP7i4N3/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/AVvXsEgw_KQTP004d2XFWTPS4mXRn9wsuJbJCBlf_Zdve3mYMdB8yyVS2ZRFZgsoA-E9Z9p6URiNeHX_DblV_9YPOFE0cKS4v6QpDS2Iotq0QNJ5V-_gtFEbKKnvMr3ZsPyyzT2WAQBOIARmTkyE/s1600/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/

Step4.) Find the following piece of code in your blog's HTML (Press CTRL + F for search bar for finding the code easily)

</head>

If you have previously added jQuery script in your blog's HTML then remove the green color line

<!--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 the script's which we added in the blogger template for the slider to work and next we have to add the slides.

Now we will be adding the Slider across your blog below the header.Below your header on design page you able to see a gadget named "Add a gadget" now click on this and choose HTML/Javascript gadget for adding the slider below your header.Look at the image for cross column.

Now Add HTML For The Slides:

The HTML goes in the HTML/javascript gadget in the cross column which you able to seen in the imaage above.

Below is the html for the slider in the demo.These is no really easy way to explain it so you will need to take a minute to figure it out as you want.I have the URL's (The destination of the slide when clicked) is in red, the image is in Green color and the caption(optional) in yellow color.Each slide works in the same way and you are able to add some more slides by repeating one of the above 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.tekleisure.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDyXduFqv3k3DCgXkt1k2YmF51-BYksHRZ_ixFvejZ2wglw2TiJur9pxvcmLHCDKnHNRIdJnmi0fH_uQ_nCIhntmcnZBQWNf2VN86o-oznOZI7lSkfA2-_QbYyINPA6UWdOGs9VjSaSa6f/s1600/nemo.jpg" alt="" /></a>
<a href="http://www.tekleisure.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw5JU6DGYgCo69I2dnQH8r2oadc5KUJaZXZzvPLcNXwKV0UvRrHPb4rhifKNd6KpIGueqYeNRnRgXo3ZCIm6F99mFob-ISszFoLa9kJbUYsce6KklWPX3MwH488GmBceq0bBvUp-FGN6tR/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>

<a href="http://www.tekleisure.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj08Xd5zKrYDiavI3gBUjmO5gQQF68uatorWoseN0R1G77m6NjkiztieHYUJMv_CaI4HfdgQ_tP_t9TiVBP-R-CzlX3x9B97nmYmnyuYCP2k5S6ZC-d8BvjyCu0vZEJlLgPRhANW8R5B3Mn/s1600/up.jpg" alt="" /></a>

<a href="http://www.tekleisure.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOPkkQUjDW4AiKRWWCIa2PDau-KD4zVWX_xIxdNT_8I0KXm3OrNWziQqATZazqf7EneJdlkGvL7vm1Hj8ZHWRaWJMmTr8LqnP0ec6ulu1Ndw9TmgLVSaiDD6QefCsRJmHUVhS1B5jaJFKc/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 now save this gadget and check your new Nivo Featured Post Slider in your blog which looks more attractive.

Drop your comments and questions below.