Add a Featured post slider to your blogspot blog.

Blogspot is really a good platform for blogging. You can easily create a blog and also you can easily maintain it using  blogspot even if you are a nerd. Blogspot has certain disadvantages when compared to that of wordpress. The most important of these includes featured sliders and a few other things. In wordpress you can do it with plugins which are available in the wordpress directory. But in the case of blogspot you have to add some codes into your template for those featured sliders to appear. Now lets look on how to add a featured slider in your blogspot blog.

1. Login to your blogspot account.

2. Navigate to Design > Edit HTML.

3. DONT FORGET TO BACKUP YOUR TEMPLATE.

4. Now you are gonna add some CSS codes into your template. Find the following code in your template.

]]></b:skin>

5. Add the following piece of code just above that.

/*Start Slider Css*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lu2lhtv1qhDeAnTbupA3jrg2mzmkZeimRyEPssznD7li5mfSY74LQZa6eOgL4W30IWfBmnE2wXTefWoITW0HpL8Z3BaocuH1BIba9FV2cullIKitsOuEvJ5YdHfg8fXpOanYGlfizU8T/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/AVvXsEj2lu2lhtv1qhDeAnTbupA3jrg2mzmkZeimRyEPssznD7li5mfSY74LQZa6eOgL4W30IWfBmnE2wXTefWoITW0HpL8Z3BaocuH1BIba9FV2cullIKitsOuEvJ5YdHfg8fXpOanYGlfizU8T/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/AVvXsEh6dVgqZRQplOA2asmWzCjFQUTc8KO7WrYaz8Ch3_lvgqOBzObnBhyphenhyphenU-l9gPgdWDCl0J2JZu4WfQWlIhlsiC1-tbRTHaZpfBHMvCEHBa2gKzBTNYEn52IyYx1M5gZ5ygKkzF2jK4qRTKZgn/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/AVvXsEiU88UKH2OiEGtnq892m4tJwPoPguHb65uMESDKTQ4guGBCPPmXrtT7qiK3ZP1TcMEL72fJ-Ey2NNq0ilALP6HXC4YyMXccii7m43GpcPwtHgUhi5s_pdUeuI-bb5WXAqTUBKWCLhY3Libf/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/AVvXsEiU88UKH2OiEGtnq892m4tJwPoPguHb65uMESDKTQ4guGBCPPmXrtT7qiK3ZP1TcMEL72fJ-Ey2NNq0ilALP6HXC4YyMXccii7m43GpcPwtHgUhi5s_pdUeuI-bb5WXAqTUBKWCLhY3Libf/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/AVvXsEh6dVgqZRQplOA2asmWzCjFQUTc8KO7WrYaz8Ch3_lvgqOBzObnBhyphenhyphenU-l9gPgdWDCl0J2JZu4WfQWlIhlsiC1-tbRTHaZpfBHMvCEHBa2gKzBTNYEn52IyYx1M5gZ5ygKkzF2jK4qRTKZgn/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
/* End Slider Css*/

6. Now again search for the following piece of code in your template.

</head>

7. Copy the following code right above the head tag.

<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>

8. If you already have jQuery installed in your template remove the red coloured  line at the top or else just ignore this step.

Now that we have completed adding all our CSS coding. Now lets move on to add the HTML part.

1. Navigate to Design > Page elements.

2. Add a HTML / Java Script gadget and place the following code into it.

&lt;div id="slider">
&lt;a href="http://cyberfreax.tk">&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUoadddBCs9Op6RyxWRzdv99TdeQK3IS2Z5MAK2jWNKf_Zdjr7EbwYxarv233SrVl9rJnnyr4g5jLsRE2bmwC6um-ufHvGJyZkOVMFGauZ_I9jPPL5fQk381n7eE-xKbR1OWxI5PSO-_Yo/s1600/plus.png" title="This Is A Caption" />&lt;/a>

&lt;a href="http://cyberfreax.tk">&lt;img src="http://www.mosquitodefense.net/Pictures%20Used/facebook_logo.png" title="This Is Another Caption" />&lt;/a>

&lt;a href="http://cyberfreax.tk">&lt;img src="http://seahawksblog.files.wordpress.com/2011/01/twitter_logo.jpg" title="This is an example of a caption" />&lt;/a>

&lt;a href="http://cyberfreax.tk">&lt;img src="http://www.theblackandblue.com/wp-content/uploads/2011/07/google-plus-logo1-640x312.jpg" title="This is another Caption" />&lt;/a>
&lt;/div>

Now that you have added the codes. Lets start making changes in it. The code lines which are colored in red are the URL, Image and the caption. Change the URL image and caption according to your needs and save the widget. 

7. Now drag and drop the widget so that it appears in the top of the blog posts widget. See the pic for a better understanding.

8. Save it. And thats it you are off now.

Enjoy using your featured slider. Post your queries or reviews...