WIDGET : Slideshow with Navigation Caption Features for blogger

Today it is very common to have an own blog for oneself. But many of us have little knowledge of HTML, CSS and JavaScript. So what, can’t you create a professional Blog? Of course you can do it yourself.

If you are new, I suggest you try free blogger of Google. I always share all the new information and resources to you.

In this post I am going to share a feature post slideshow for Blogger post. I'll show how to add a slider to blogger blog above blog post. Using a featured post slider in blog, you can
attract your visitors to your hot and topmost posts. Besides, it makes your blog look professional and beautiful and increases page views.

How to add beautiful slideshow widget with navigation and caption features..

Please carefully follow the steps to add this slideshow to blogger blog.
Step 1. Go to blogger layout section (see image below)

Step 2. Click on add a gadget and follow next step

Step 3. Find html/java script widget and click on this link..

Step 4. Now paste following code in to box opened after clicking on above option..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
#slider {
position:relative;
}
#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(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/s400/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(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/s400/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;
font-size:16px;
padding: 10px 0px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.clear {
clear:both;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style>
<div id="slider">

<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="#htmlcaption" />
</div>
<!—Write Descriptoon With Links In this Part—>
<div id="htmlcaption" class="nivo-html-caption">
Nice ! Now Learn How to create one by <a href="http://wwww.seodesign.us">Clicking here</a>
</div>

Customization

If you want to add more images then copy code then paste it below. change the image url with your image urls.

<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="#htmlcaption" />