Featured Images Slider Widget For Blogger With Thumbnails

Screenshot - Featured Images Widget.

Watch Live DEMO: Click Here

You might have seen a few such widgets or may be using some, but this is quite different, yes...I mean it, as this is much easier to install and customize as per your need or as per your blogger template layout and the big thing - it looks good (you might have observed this claim of mine through the demo)!
But, I swear this is not my own creation, I just converted some codes from a nice Wordpress Theme by Topwpthemes.com.

Here are the steps and resources for you to have this widget on your blogger blog:

First of all download this Javascript File 'contentslider.js.zip' from here. Unpack it and upload to any file hosting site like sigmirror.com and grab the path (Url) of your uploaded file.

Now log on to your blogger account then navigate through Layout > Edit Html and press Ctrl+F and find </head> and add the following code just above it:

Code:

<script type="text/javascript" src="Your Uploaded File URL"></script>

Save the template and go to Layout > Add A Gadget > Html & Javascript and insert following codes in the content area:

Code:

<style>
#slider4{
border: 2px solid #181818;
background: #ffffff;
margin-left: 9px;
}
#paginate-slider4{
border-color: #181818;
margin-left: 9px;
margin-top: 4px;
}
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid #181818;
margin-top: 5px;
}
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid #ffc04e;
}
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 500px; /*width of featured content slider*/
height: 325px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width */
text-align: right;
background-color: #ffffff;
padding: 0px 5px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #181818;
background: #ffffff;
}
.pagination a:hover, .pagination a.selected{
color: #181818;
background-color: #ffffff;
}
</style>
<div id="slider4" class="sliderwrapper">

<div style="background: url('Your Image URL') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('Your Image URL') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('Your Image URL') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('Your Image URL') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('Your Image URL') center left no-repeat" class="contentdiv">
</div>
</div>

<div id="paginate-slider4">
<a href="#" class="toc"><img alt="Image1" src="Your Image Thumbnail URL"/></a>
<a href="#" class="toc someclass"><img alt="Image2" src="Your Image Thumbnail URL"/></a>
<a href="#" class="toc someotheclass"><img alt="Image3" src="Your Image Thumbnail URL"/></a>
<a href="#" class="toc"><img alt="Image4" src="Your Image Thumbnail URL"/></a>
<a href="#" class="toc"><img alt="Image5" src="Your Image Thumbnail URL"/></a>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

In the above codes there are some coloured texts, where you have to make some changes. As you can see some red texts in the first code, you will have to replace the red text with the Url of your uploaded Javascript file. In the second code there are some green texts that you have to replace with the Url(s) of your Images and Thumbnails and in the second code again you can see some orange texts which are to be edited as per the sizes of your images and thumbnails.

All done! Now save the widget and drag & drop it wherever you need to have it around your template layout.

Yesss.....! Now enjoy a new look of your blog.