Hacks And Downloads: Excellent Content SlideShow & Slider to Blogger / WebSite

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<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/AVvXsEjlF2cpnoAXYa7waULIJDb1MPGPXLYA-JuAD1Wgscor7HaJ9WKVoPcN3fmRUZtRkxPs4IqODdkiXFr2utFfoKI9ZhrIUf7uUW8D-KXhVSGijfbBcVI-ykF6koC9IM6W_fiOzgrQJBDbqliv/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJEEP1zLlxVAsSGMLeMLxR3B_yJQDWr-V1Uw2mbK64RUhlZOeyHVV20ubpeTvTMJh_f4eEKrhikvJli5LGjRIKiSCaBBmyDzKME68IGjQnP4bLnsV0k-mdAUKZ1aMca8zh_CDZZtZhT-0/) 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/AVvXsEiBHvPCCm_mMcG1G31hyphenhyphenmeDiKH84nySxN-F6wAzR3WNajGlK1x_7Ekihc13hP8EkiHisax-xy_UQT4YWKozB5tNxnktzQd9uAtoMLNgOr3Ci8yHaqj-rSQgQj09OvF7WLi1XP2liw-AYOAP/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirsA2I34AlFMfLL51MDBam1zWJgIHmu_uqm4cKAApmmb_MCApqH_AiQFE1NKnBCibo00kUB30HctxH7Pd7zximh4nRgE-Zaj-hQxsesKwcCSaSluSHnyPZlSSQOf89czcEySI7W5Jh7sv9/) 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/AVvXsEjTJH-Ln3q1YMZdjKAMYd9elb7npSCEG4mX1MAC3kXs12ZGxhNocCUvLb8kCnZieOX86ryl_qCdy53qp9o3A3dbMPPNRdLFrkiHm-33Bu0frMqC2ZnyCIUm206wMIMei4NNkIpm9cReeslJ/) 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>

4.Now again Scroll down to where you see </body> tag .

5.Copy below code and paste it just before the </body> tag.

<script src='http://keerthiset2.110mb.com/excellent%20slideshow/compressed.js' type='text/javascript'/>

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

Important !!! : Download compressed.js and 5 images as a zip file, from here and host compressed.js and images yourself.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<ul id="slideshow">


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJ72Iwqf-YXlZ1XaifpO3HmAu08uUFp9sPfaGSl1CGMs3HClu1tRZrF5kJpHt1aahZYDJsaA2o1c9xGeOjV96LHEvstv_Fp0XffDZdul6eOUyMZKkaD9ZufQDB2lAV0n4kQHvEYHXuFRW/+1+big.jpg</span>

<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia4c12RryHayyzhbwqM720L7NRZUi6wybYrlb42ejBjD75kC3ebGuZy1WCSwzVy3p5CTtamzxy5WNHgj22NyNxowm6KkExSAAgxJPCl3lAh0oOwiywlesw-lEDvbQuLFw4f4fIjEuW890x/+1+small.jpg" alt="Bionic" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFAnVdqBDoK5uaTumL58_g1uDVQMycuBQqDzRXB-G8oXXXD-Xhd76w-34tjzc2FY5ba6Wohq3CCN938Ds8p1LH52tp4spgRUV7N1atj0QwMVIlH-vgD6wyT0IgMQUlxpWSD6AoK4Xnbt7P/+2+big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUOv4hAS-BELdL9cdkzZSiDFp78Cc47w7bFcPDFFDiVRTJZIhNTGsecLW8gxCyqxoaW1ZUq2lIGQZwyvD2u0mYVOJveFH6Y7UjwW8n5j3vPJFVUsrBdLEMFrJi5s0-_h9OJOocJklCx3tr/+2+small.jpg" alt="MOH" />
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPdi8nX5c9eVg4UOGoLrcVPITqOqiUBwmBHEjqNodpX8npLuPlJoNU8qy0PLElhtH_x0RQhP7FynQ4_WUnZw_7wBlZrmJjBVsh1Dz-4mkOQpTgdx9XlERiN6Y1oapr7qU5jYvh8TQVZXW/+3+big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKURu0cHtHjoaCuJgTGH2WIuh4ZTJNFiOO829S66XqCXFcG5DOwVvYPDoR-t-ETrva3FYE0DfTOo6hsJIpBDHIOuZvXlPCgrH-4-dNG8boDsJ8pwu3jezyK7IS_SRKOS20Gn-RLxEtuok/+3+small.jpg" alt="Fear" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtLRwBImYBlkVoUYPstTbmFslKeX12cIJN5XeNN_HAUwRU5MjFVrmJMPcJPDERyz_xGnjBhFAcHqSlYiwKALAfvilF2J7RtrAEFrcBZR_OnC4mcbPwC8halvGyjDTNKhBdK3MpnPVIrfK/+4+big.jpg</span>

<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07xWj8jKrG2Y_zko-L6pc7bXuFS2wKXl30kKPnMHnfUoQRiOb_SLatruQgLJ9MfGowl2exiI6rRDHQrKhPLVz4TZaPc0jFdK69WjnDOa-YcCADbisgiwItyLvAWqS_kHhPeteJlL2Uh6S/+4+small.jpg" alt="Farcry" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgdmD7ciwFiuwHf5eSVLR8gAhg8cHQvUW7IzPJ9yCMcwIFI_xopGNvypq5diN34qXAKE-x3envKUyo1xtD95zZvNACglpR5lYn4SkTMye9wB7eLdjJDQdlKRhDX0lbVUwwl7c7O_NbZnJ/+5+big.jpg</span>

<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPRuYqPEISPGz1qZVd3ExSAnC1xIZfDpw0LVvJUxCoQxbm0URuu7BeHiJdwFfDuQISnIH8jW9DZsWMt65yRG1QerjnLpYavOM9gO68KqZtO91WXCrH8c2XTYwJiRqUOOXlY4xHQSTFAqx6/+5+small.jpg" alt="Farcry 2" />
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KbCNgjpiwmiKp34H0Q2baPQ6pljBV028VtVgUNO4IUKequuP7vo7eqo_XIx2XY_YaGFHD5r_XjSd-eaX1sgyuokgyf4fbg80TCpxZXjb0ax0F8RcR_LdCGryPgnlL17W5R9rTi1tZ82f/+6+big.jpg</span>

<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCT_6jE738b8iRvwgBCQ55ry_hPyOOzkqAhVAOOsIgHaBZxYc0sz9K4WAaOjLrDTP8xwBBHw-rahCnDtAt5T7Y3g9Wyqw1dwP-MODTg6uhmJAa_E5Lz_mUOiyIUsV5XtTi3oG88eck2ow/+6+small.jpg" alt="Crysis" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCBXFLdQ_wnXAPi78DqJoKgGTsHZlpo5vHeSQP72w3PW5UZzZl-QZQ_UjSyxzkd5KClOhlkq8UUmQ9e3R1hhmprlDgDkNP6co4WjiC0j3ZWHbtygTq7LvtURBSeTHAO57mt5vct6W5tPl7/+7+big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNqHpLeL68zAY1kfxLohWz5Ygq6xhGBTIkwGqTmWCcqL0yVCUGWPBUsjfc2KdltvOv18JJ6rjZyLn86YDPA-L5F_ZM12LimBeQjld6ZPo1WvmSqoxLdmd92Q-B0smATFn01-0H8NbdZOQ/+7+small.jpg" alt="Tomb Raider" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-Jcl9LEN1uzUrvquLDSnrD72puEAVhPXMS7bphxMp_ecZcezSLC3c0lokSMVDi9Mqr4-kwTksPoUj1tzMIx784ob1IbhcX0ggd8AVxL29Ao6r95A-dwOEu81GsPnbvgG4yoVrLqr5RiN/+8+big.jpg</span>

<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGnA81oCypfMcfKrFvaZACbw7G1rt9GZWHUXnZp-bKOQTVcv2c49UlwV25-rf48VgGufyMVovJhNolmKolEk2JpSBGcbtjbHk99k-v_SefDwkDASK79tpmOpCttZ8ko54Kv7uhbQlqMlV/+8+small.jpg" alt="Game" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBd6w2_NItIpQZMNzpLihpQwLv_1KwHd8cdHcq0Ooz5ofaGD5qhVFNStq7rJqHS23nd9k14cfmyC7OfHmpr71WqKJd-Q8smFs6iQjQeOxTVo_lWv2vfWij0-eZm9qbZUuHTaa6WUZ5YVFY/+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiy4mTVInMt9rItJ3YDY5beRMZV9UA7y9jqV3v4gPcXluix2rTPNRvCD2Gx53JLboTwv28GgcIa4Q7abu6mn1KFYbL8GR_ZZCt1MgrEP5YQHuRANd1cy_M2BzOG-eKtl67DMWihe63yXH0/+9+small.jpg" alt="Medal of honor" /></a>
</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>