Featured Images Slideshow Slider to Blogger / Websites

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-06.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#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&#39;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&#39;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 style="float:left;">

<div id="slider4" class="sliderwrapper">

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGREd7uLne2yXSCM3u3nwYa5Vb27UY1EEpZcXasGbdDydJ18HSBLX7ZX7G49iApqVSgGdAPCnInsPPJ3lapSPaWoyI1yQ943hwez_iDQHyUl8Cf0IvtiRnBJQ7cwtfQ859Fo9x6TrmJoo/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ89KH24n6mAdYgHkqs56XEg13NTZsWDXfBXTSB_7YB1Iowfog-iSYSlDTWgxZbeeMj5SUARtJq4-vjRQ3GrQfflAw9LDRHR254uB5kEMNK189WCdSVUsFjVHPM3QbnDANnjwYfjIAO9zm/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewByYiKTcrnAQT1LrG2tAE0HTgwjMqM4QxTEwMZMUDPrydCdwpAyS-OXjRs2d_QHiiRFyC_YbqhyYyOuKTJpnN-YA6kzxmig_fHthn5V9dJYaXY0lXE6_eQ8orw7PPAui2AQpvie9Yq1E/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3KnF82hsNhBXi_8e8-7BHdxb9mGiEeCuG_l7OTDRzO71WLW8vQaL7KkqUoKXuLo3p_Ner4wwIq9Pqh_T-kMK5k7dxySKd4qu0C_3-f82rwKxI5eHlo9HJbyyoBuPUWDoi0v8hcBwYzO8l/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiBpPiasqgLZ2WyGbicWnsv8PQECWT05cI1z0pgwc6TSGoqXw4aYEqSdAlncVGwFcDk8fgVec2ZlVfMhuIZYB7WbFRNlQwgoo39iq5u6fOdPYOYSsRCUFRWpcUQzGlqNOs-dgtKSahdlC/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png') center left no-repeat" class="contentdiv">
</div>

</div>

<div id="paginate-slider4">

<a href="#" target="_blank" class="toc"><img alt="Image1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIkeYupRKM-1QkxRqDJzb2xHLAaOqKHXiG0QnSEAPX1Bx8FN8NvIhYsUuxQs0ThJpxEja8ULVNq8oKxYdNBcT8YGcwwPSfoD_Hzjb33AAIZh2RKUciplEf93j1YUT3Hkl4f7U-UUgEyF_q/s1600/Change+Mouse+Cursor+Generator.png"/></a>

<a href="#" target="_blank" class="toc"><img alt="Image2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikPcxsl1MnfWIRDTshieY3-FgHb5yUP8mQ7cA5omuvnmI89Z6c4saCWMwQcPgpg4nS1BUmAqNguKKO2ecn7htl2NTdYqfQIuBkf31mRRxubBI2w2CZg6BQ9c1zLzmcBDIcgoIgGr8GE7uS/s1600/Numbered+Page+Navigation.png"/></a>

<a href="#" target="_blank" class="toc"><img alt="Image3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsBrYu_eysawtkpJ0ddvKXavmzUsbQU2KABNU-r393bV_gkjZuMJwA0n7PaL4Wqo3oH5fZRrd5j8n1-TMz9O1m0IvtXB-N5s_h52ZMSSHHu5C1MEkRYdI5YSO8oQUqw9wFz6uBhw5XOGwG/s1600/Snow+Cursor+Code+Generatort.png"/></a>

<a href="#" target="_blank" class="toc"><img alt="Image4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ANgfv37S0-v16AASZLcV5qzxVaKGAI6k8v2PnrQ-40Rc1DYUhAqdfJIcgWgJxNnQHnqonH7_4ygeeXaqbvCWgos-72tjtBrfk6RdLWOMJf-kKP0u5EQLRp8XD0sf5uU63hM9wzSGcEdr/s1600/Blogger+Falling+Object+Generator.png"/></a>

<a href="#" target="_blank" class="toc"><img alt="Image5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaekOtKDYLvUW8ibRiG5Ku575DbO3-j0PhyyYPMHoxEJnk_P_D5yhyYCgDQD8S6Q2iMiC3MBa_HGx7sqmy1ZQseNPX9M0-xzmymBoT4sJqyBO6ltFbRZ9jQqcK6JL_pnWLTfUpNLLCNdPG/s1600/Animated+Flash+Clock.png"/></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>

</div>

<div class="clear"></div>