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/AVvXsEhNMyhs-J1vtylyLhf7Q_AfAdX0Y_VaiT7VrDCdLlQtdAOt3veMvCZsbePM_WOM8RWIwzA1fdEurufHbPVZqdPfq2TFnZiTVmsJZ2LsAZ3abZ4H40ErJPeL-pxaYWORF-MWgEN-zZz1msBa/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFtLmHtTZstScvZkJtSDL1bFA5Whq_cUpfHXm2vRhyphenhyphenPCM7iVuC05AAZr0nD935WcMV8UquULC7TU-0WzYdOc2-MFWNf2M2MbBMYBAXdhSIWNtoo3Gv3EACJDJlAmuF50ogds_NiHnsf97C/) 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/AVvXsEiLSSKB_j6IYmdv7tnP_6UIqjZy_10AWVkg_Tn52c0V71fmJfPpF0R8bq69UnW2RkNu2nd0a2YBmTICxfYMSq8rFD81th59zSg9ZMnBD7v2mcg9Phlcar9iHBYFYxv8PbPufMDo60gZKww3/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoy5GU341dAnKzCoKDOhTrQe2oc-wlR9IBeklP-mSBK6hFya6KdWOlumdwTMIJvlCFb2BpsEecALAP5dQY4EhAOqD2kSF0wJ8YIcCqpxwY4XlvD8m669ODrf7WEhQzyZtgSTrc2NoXns5e/) 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/AVvXsEgIzKPhoY1WGzNXx-l3ysUHNJuwtHAPWiUE_7DkvzxfO4-Wv0W6WIsVRgw0vT0knOnZ4qccX6kZNSSBwkbY951E_GqJ_DIAbc31CbOJ6d2S_5isxQz875_UIvyohUWJ6Kcfxj1H69qrC18A/) 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/AVvXsEhIGREd7uLne2yXSCM3u3nwYa5Vb27UY1EEpZcXasGbdDydJ18HSBLX7ZX7G49iApqVSgGdAPCnInsPPJ3lapSPaWoyI1yQ943hwez_iDQHyUl8Cf0IvtiRnBJQ7cwtfQ859Fo9x6TrmJoo/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/AVvXsEhIkeYupRKM-1QkxRqDJzb2xHLAaOqKHXiG0QnSEAPX1Bx8FN8NvIhYsUuxQs0ThJpxEja8ULVNq8oKxYdNBcT8YGcwwPSfoD_Hzjb33AAIZh2RKUciplEf93j1YUT3Hkl4f7U-UUgEyF_q/s1600/Change+Mouse+Cursor+Generator.png" alt="" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ89KH24n6mAdYgHkqs56XEg13NTZsWDXfBXTSB_7YB1Iowfog-iSYSlDTWgxZbeeMj5SUARtJq4-vjRQ3GrQfflAw9LDRHR254uB5kEMNK189WCdSVUsFjVHPM3QbnDANnjwYfjIAO9zm/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/AVvXsEikPcxsl1MnfWIRDTshieY3-FgHb5yUP8mQ7cA5omuvnmI89Z6c4saCWMwQcPgpg4nS1BUmAqNguKKO2ecn7htl2NTdYqfQIuBkf31mRRxubBI2w2CZg6BQ9c1zLzmcBDIcgoIgGr8GE7uS/s1600/Numbered+Page+Navigation.png" alt="" />
</li>


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

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

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


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

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

<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ANgfv37S0-v16AASZLcV5qzxVaKGAI6k8v2PnrQ-40Rc1DYUhAqdfJIcgWgJxNnQHnqonH7_4ygeeXaqbvCWgos-72tjtBrfk6RdLWOMJf-kKP0u5EQLRp8XD0sf5uU63hM9wzSGcEdr/s1600/Blogger+Falling+Object+Generator.png" alt="" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiBpPiasqgLZ2WyGbicWnsv8PQECWT05cI1z0pgwc6TSGoqXw4aYEqSdAlncVGwFcDk8fgVec2ZlVfMhuIZYB7WbFRNlQwgoo39iq5u6fOdPYOYSsRCUFRWpcUQzGlqNOs-dgtKSahdlC/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/AVvXsEhaekOtKDYLvUW8ibRiG5Ku575DbO3-j0PhyyYPMHoxEJnk_P_D5yhyYCgDQD8S6Q2iMiC3MBa_HGx7sqmy1ZQseNPX9M0-xzmymBoT4sJqyBO6ltFbRZ9jQqcK6JL_pnWLTfUpNLLCNdPG/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>