The 2nd Default Theme Of Nivo's Featured Posts Slider For Blogger

Some days ago we blogged an article which contains some tutorials which helps you to add Nivo Featured Posts Slider in your blog.And on that day i said that i will update all 3 themes of Nivo's Featured Posts slider on our blog.So here is the Second Nivo's Featured Posts Slider Default theme for blogger.The default theme while looking more basic still has the cool transitions and other options like pop up captions.This theme looks more attractive and cool it gives a good style to your blog.This slider is from Dev D studios.If you don't know how it looks and work then watch a live demo by clicking on the image below.

Adding the default Nivo Featured Posts slider To Blogger

First of all Backup your template before editing/or make any changes in your blog's HTML.

So now lets start the tutorials of how to add the Nivo's Featured Posts slider in your blog in very simple way.

Step 1.) In your Blogger Dashboard > Click design > Edit HTML

Step 2.) Now find the following piece of code in your blogs HTML (Press CTRL + F for search box for finding Piece of Code rapidly)

]]></b:skin>

Step 3.) Now Copy and Paste the following Css Code Directly Above/Before the ]]></b:skin>


Important -This is a scroll box make sure you get all the code.

/*Start Slider Css*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicep_AnQSDvOtE9ut041mk86JwO6zWJeqKy-JRb2PwQ6NjEI-0_VxLD5xZHKMFp8xBLs9lzuK5r79eZ4JpYAnM5vOrPQbfFrFEztPBF-aEm455vNmpKtOC1V-TeJOjTuQHGW745biEiO2_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicep_AnQSDvOtE9ut041mk86JwO6zWJeqKy-JRb2PwQ6NjEI-0_VxLD5xZHKMFp8xBLs9lzuK5r79eZ4JpYAnM5vOrPQbfFrFEztPBF-aEm455vNmpKtOC1V-TeJOjTuQHGW745biEiO2_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXKKc4UOhj-lQp5fxHk8QQpZxFGKmlpA4sctBdxyKXPMXixrL9NzG7g4hiqYj9FlI2Bz_PdHPydblje1EJB-p9wXTuK_tnXFpBmLK6Q-MKQBnZHK6jJldLf1sUU1fFWOlHKQqfOFJQxGg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj6xdkydzKfbULCcAlljCWGxvAOXlAaCmKcQUIbfE6r-dDXXKGzghRpAOdTVDIGeBG2QnldBZskXM3GX7mnjDQPktJcklSyaRNHff_BETpUBCn9g_96JMCMOHFquEKLntxS4JpO6ChruRD/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj6xdkydzKfbULCcAlljCWGxvAOXlAaCmKcQUIbfE6r-dDXXKGzghRpAOdTVDIGeBG2QnldBZskXM3GX7mnjDQPktJcklSyaRNHff_BETpUBCn9g_96JMCMOHFquEKLntxS4JpO6ChruRD/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXKKc4UOhj-lQp5fxHk8QQpZxFGKmlpA4sctBdxyKXPMXixrL9NzG7g4hiqYj9FlI2Bz_PdHPydblje1EJB-p9wXTuK_tnXFpBmLK6Q-MKQBnZHK6jJldLf1sUU1fFWOlHKQqfOFJQxGg/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
/* End Slider Css, Info @ http://www.tekleisure.blogspot.com */

Step 4.) Now find the following piece of code in your blogs HTML (Press CTRL + F for search box for searching the following piece of code)

</head>

Step 5.) Now copy and paste the following code Directly Above/Before </head>


If you previously added jQuery to your template so 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.) Now save your template.

This the the all Css coding which you add in your blogs HTML.

Now we will be going to add the Slider in your blog below the Header, the area in your blog below header known as Cross column which can be seen in the image below.

Now Add HTML In the Cross Column Section

The HTML for the Slides will goes in The HTML/Javascript gadget in the cross column section .Below is the HTML for the slides and there is no easy way to explain it more than this so first give a minute to this code and edit the URL and image for adding your images and links which you want to add in images.You are also able to add capiton for the images the code in Yellow color is caption edit it as you want.Now lets see the HTMl coding.

<div id="slider"> 
<a href="http://www.tekleisure.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJw1xbFim2UTAzXBMB4VXIg5Sn_3Kw41Jn5cgbYUmTpf-GtWEuoWgl15P9eLKIUSbQgkiPko-kmgP-QiAaPk7TKYjwH68sph-RepfB8CleLarMq_kegjaaavfygoo4PRp8OV7T5VniVQ/s1600/toystory.jpg" title="This Is A Caption" /></a> 


<a href="http://www.tekleisure.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA78MywYoMRY8p70YtVfOtjKNIdQxirVA4F_TT6WmmqMbjsMIaWyBbK_AUhyuRswGZ3l-9pwRL3WIxi1pndLj2PPXi5tGsKEYBNHY075NGO_7TggVp3IPiLZRQ2qC-EtDQnJk3ozG5Xgc/s1600/up.jpg" title="This Is Another Caption" /></a> 


<a href="http://www.tekleisure.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyARRVdUFmphHp5K2AlFlE2gj8kOU720xbqmJQBo9DprsJ5uPIsiTqYRD-MaO1QRXqz83qcGG7I2-H1IOklDupfmhXgg-owSP0q83yC0pyiizpWIURQw6jxGb3sOXP2rb1f2AjgVIzU8/s1600/walle.jpg" 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/AVvXsEjKdvGER0oyP02dlFOpIcGGKYJJSCq7pGU4Aa5Ub_mzkt3wLfGqm39lGMxFrS2kEhUOQJDi8S2i9bebc1Yn1MgIT-i7zUM5FCrJdi4kJY3PCwQivOT39fjFU6MDdfVxh3HlRsm11a9PFpw/s1600/nemo.jpg" title="This is another Caption" /></a> </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 it this is the Nivo's featured Posts slider for Blogger>make sure to check out our more of jQuery tutorials and blogger tips.Subscribe our news letters to get these following tutorials directly in your mail box.

Drop your Questions and Comments Below.