Excellent Content SlideShow Slider to Blogger / WebSite

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/17-content-code/excellent-slideshow-compressed.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">
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDRPNkOIgJSVmjP2UYNh7MnIO2KQrPUjswpL0owrnRmDWyGSfoaA6QpmTcMFAA4Fpp2GTnXR3_4SF7ejnViLdNZEdoa1K7guWfPT8dzfGPI4AeQqttzNf8XNqILVmpMw5rKsuAdKOu2Rl/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYK-Sfkr-c6JSegRFTxoAWPVIz87czFSj5woEM9ILfIeRExDjHLgdjsob5a3Wqi-PEb9YIMZT30kMNjEelvrQzbjQCTruF9MWQVuc_oav_-H4Zq0Xju8jhD5mJF895ojF2I17YnycWSjQP/) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEdKrsmCyAgrl0dr6kljI_rKsy7VTPVChG3nEPK36bPQZUdRg6ohDO_rTNOaOXlZMpWLirTPFgVQ4NrxO9J8AqAEBP4fZFKK0ezgCmFWM1Cm7eQE1kM4rSsRDCz19w4VPZdlS0nrPu5DPg/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPT32aISpZ-h-en-b-e_Bktx7JFzi5WiWNn8yoDrFGPXLr3c22p_xqC9VWDl1-Hdfq8QpW32MczjzuIRVDf9oEpe3SHpc7tX1JlHzO1_a2urbNp4ZIMBBDyuzvtbKHiZkVuacUwuGNfDm/) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5wRxFF_XZRiO-4mBC5htlfyDKE7OSmDLFvVVuseSVTA6FhTFhu4I3dvo_f2zfd4NIFWOHXoVszWlzry-O04FyafSCM-jH2I4jNeTtn0YWY6UBHyyAkXp70kQlCyd7o-2W6uCZzxiV7gxl/) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>


<div style="float:left;">

<ul id="slideshow">


<li>
<h3>Enter Title 1 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5XccZPYl0eLO4ArCrygrEF81uWKlvJvEMsofUz5idbLL-frWS4MELFmOr5cfGr-YSp3t7mTuD8c7RwMuhKHMF9tC3uxLOaeQvOhQ-8oSr5lpruzzB3s9CNDl2MkZ4Z9UBAPGitonQGAL/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png</span>

<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RmgORVpk73funAjyXRqosufsjdi3EZ9Svt9gR2AvkL_uAG3R2T92eW9gBnBw2JtoD_ua3tSCBLNjWkSNkpRcVEFNS1O5TyvQ-xbKI2gos3CPiRWLS6QDNgGz28iaz8O-_N0ZYWtIyLGI/s1600/Change+Mouse+Cursor+Generator.png" alt="" /></a>
</li>


<li>
<h3>Enter Title 2 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRj6u8IZkUur5yH_aTiGP4obMc7HO0Z5zGDxuEaa8zc4cyz7okwVwwy6tSOSmJJ2JwfftJuXSLWIkuwp7Ir4vy6IRmgQWnfGTvgWpGaJoXPA8R4NmrVQTafZ7N4zFDPmfo1pNoOedJqxqi/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png</span>

<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsbh92zwctZ1Dww8dAChccM2jcKoVyQRJF3IGisqfvXt1sY2t4MTAkoxrPu87_XLyqoShWzLMbvY4iFOhl8vEsHKxWstnvEu7VWjt21-CMHHDC0Gk5KXig2Poda1bxuSVx5xhQD5ZtDr7M/s1600/Numbered+Page+Navigation.png" alt="" />
</li>


<li>
<h3>Enter Title 3 Here</h3>

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

<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ4HaHTN3aFMgSV8f9smfDDBkAdRbo_dNPGNZtIq-WtwUObi5fWjwRSDcEp837j1oj10YBpeF4UZaWT4UNBcrzrbqXHWgwL0Rnsn5Hme-Z8mmvNebVmiIq30xpXd86gEonLRpd9BBWs0Lg/s1600/Snow+Cursor+Code+Generatort.png" alt="" /></a>
</li>


<li>
<h3>Enter Title 4 Here</h3>

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

<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4GwqcANHeZqnQI4Feu48EPgaeg2bDfrN_fyHW_JMQrIKCU4RSwRSzzw_u77PJAZURVDbdavGSHbjIO0TxORF-NvZhxtILftykiEtUKMzsyZGcqmLc_2Ugr8HT5Q75N5lvLkceYp7MmoIs/s1600/Blogger+Falling+Object+Generator.png" alt="" /></a>
</li>


<li>
<h3>Enter Title 5 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxFEukFo4juYurSeTKlwpn6eOQvuH6OBqFPZ_bDc5Bziu89cOVliG955N4cy3YMNFu2EGPTAJl-NN8xO93lvVeAdWqvHBa9YUQPqFk4-ld1gIjtGPSpvtPzum_e4eNCp9PMPOmYChGnfYM/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png</span>

<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX5BnxhQ25wblAHXJaxXVLAtISZg5DoAggaF4muI2uNtBIspwJbXAVr63jErG2AGJ11anc2dsaS94ypnMKniyetV7o1brnJhc92uPNHZw9VGmJ6vPt2HNIQnACmtsiGKdBUwvwqPLrawo_/s1600/Animated+Flash+Clock.png" alt="" />
</li>


</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

</div>


<script type='text/javascript'>
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>