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/AVvXsEiL5XccZPYl0eLO4ArCrygrEF81uWKlvJvEMsofUz5idbLL-frWS4MELFmOr5cfGr-YSp3t7mTuD8c7RwMuhKHMF9tC3uxLOaeQvOhQ-8oSr5lpruzzB3s9CNDl2MkZ4Z9UBAPGitonQGAL/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/AVvXsEiRj6u8IZkUur5yH_aTiGP4obMc7HO0Z5zGDxuEaa8zc4cyz7okwVwwy6tSOSmJJ2JwfftJuXSLWIkuwp7Ir4vy6IRmgQWnfGTvgWpGaJoXPA8R4NmrVQTafZ7N4zFDPmfo1pNoOedJqxqi/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/AVvXsEiiY7MO2mmcGhf-SE4Wts4Pp7Ik0AsugGyHhj9Ppaa1Lvc4g6QTNGZ8w0D8RNuR39xclxdjdIYIA6Gx2o07nLWH-w678_c355PAEcCDcMvr2gH0JoO6o_paNl7UdIoDR3zrB6HEYm-HTqtW/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/AVvXsEjD4pZDRyiPrbI-cRspPrPWrJmVs2FZbfmzSUft3krI0JPCUbiES7Y_McEsGLKEeS-x5mgbZFlNx8_w2_HZVbC8r2HkJ-EqjqrwVyS_43_z8MAD-0AR3vu8O1-HEMLRo9DXApdGYUPtjF0w/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/AVvXsEgxFEukFo4juYurSeTKlwpn6eOQvuH6OBqFPZ_bDc5Bziu89cOVliG955N4cy3YMNFu2EGPTAJl-NN8xO93lvVeAdWqvHBa9YUQPqFk4-ld1gIjtGPSpvtPzum_e4eNCp9PMPOmYChGnfYM/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/AVvXsEi2RmgORVpk73funAjyXRqosufsjdi3EZ9Svt9gR2AvkL_uAG3R2T92eW9gBnBw2JtoD_ua3tSCBLNjWkSNkpRcVEFNS1O5TyvQ-xbKI2gos3CPiRWLS6QDNgGz28iaz8O-_N0ZYWtIyLGI/s1600/Change+Mouse+Cursor+Generator.png"/></a>

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

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

<a href="#" target="_blank" class="toc"><img alt="Image4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4GwqcANHeZqnQI4Feu48EPgaeg2bDfrN_fyHW_JMQrIKCU4RSwRSzzw_u77PJAZURVDbdavGSHbjIO0TxORF-NvZhxtILftykiEtUKMzsyZGcqmLc_2Ugr8HT5Q75N5lvLkceYp7MmoIs/s1600/Blogger+Falling+Object+Generator.png"/></a>

<a href="#" target="_blank" class="toc"><img alt="Image5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX5BnxhQ25wblAHXJaxXVLAtISZg5DoAggaF4muI2uNtBIspwJbXAVr63jErG2AGJ11anc2dsaS94ypnMKniyetV7o1brnJhc92uPNHZw9VGmJ6vPt2HNIQnACmtsiGKdBUwvwqPLrawo_/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>