How Add Cool Jquery Slide Show For Blogger Part 4

This is also cool slide show to your blog.
Follow instruction to add it to your blog.

Demo here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<style> #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:200px; 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/AVvXsEgerM1_3zBaP67EkiRufxYQvBtP18aMQfpsR1BixiVPIHoL4HtGpmdD_cRhHmaI-AW333PQ61NvRri_fv24cg4gAS4BEKi46qTG9b1TvwzGzCmQ4lRO0RrBZyu7kziOPmIJG6ap79lSIH00/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70uEYtKNy9RiElILOkO4bpmumNpBZZBNrWf5QSxRZOgI0-Wi1i7_jw_O3f-r7hb6lNqP6wtvjM90Q4sZNEHyfIq63PDtF4Pi6hKMgu5zSbZYjkfWXMVfxRjEhUezvbt6M_oVg5bmggs65/) 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/AVvXsEg5lQ_b-3gA3ISGuH1vn14KdchPDihyphenhyphen3Clzbswk_jeSy92re_jILv1Q6pkHsqJe1tGnwzHMB6SuhnaXm4jV7KVP-FrAfDIqFyblSh47NdqTFUs1k88t0H9LppCOKTxSypnDXRx_wYOBF5PW/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDcaKzIkcjby6AHTK_EgWmZko8bvT15Ud5jxnAV2_C1mVlcU1HHdEFHKlNo597mVhSjfUs9fuPNMSujwCRP-CYDc_5W9BmISWG8WwVnAF6k4obWA6l9cDl_cauE4oG_4T_PJlpl1MEOqq/) 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/AVvXsEhEsaGFkvh8TlF1GxguRUWaDyIfmKs8n1-VvVpS6aZrNCYdhvEoxLcJhyphenhyphen1J3BpOg5Pc3sMLRW2p_-paVd5vJXLoZAmbaTx_i5D4_CjapH9K7-LMMJVUilIbPhhWR27sUQgmewRkewkVJ706/) 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. Find this tag by using Ctrl+F    </body>

5. Paste below code before  </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>

6. Find this tag by using Ctrl+F <div id="main-wrapper">

7.  Paste below code before <div id="main-wrapper">  tag

<ul id='slideshow'> 
<li> 
<h3>Tittle Here 1</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnMHpF8Jg7Y5QYzSgEHu-IQpJNnXz2lUVUUVSCcDAjIbcMszPpctSgXK2UUzPr4DEDwh75R84YBUGaWlVtrmy2Lg84lTs-HKfhFTeTE7Sn92MfcfDH9T9OQnyOHuszsXKQKx1BxqAENw/s320/deathly-hallows-part-2.jpg</span> 
<p>Description 1 Here.</p> 
<a href='#'><img alt='Bionic' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcFD4dhD27PAv16f0OJJo1SLWJ4czE-Ox9QZxUI5WHwKGJCk8iwrdnwb3MoO2WgoLPQtqfzJPdtK3o5Rg0k4jKMM-4QwP4-DnR3DuhKYFlEjGVjmzxDZu2Gfb_zUsMvghw-Um6soGStLQ/s320/deathly-hallows-part-2.jpg'/></a> 
</li> 
<li> 
<h3>Tittle Here 2</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dacHOIUvf8wm2XlqWRinRnAXk2prY8DuXcQFZ_fY5ts_Ux4Fvf1h2Xmy6fWRYC93j4jAx6i58nIkXN4ONapUIfRXNZ8vu5R_K5pNz76Gob11W1dVEQNktCWtH_Z_wIAIwo6lOE33JvM/s320/source-code.jpg</span> 
<p>Description 2 Here.</p> 
<img alt='MOH' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5nD5OsxLthkZjC-T4sGiPIWZHOg2QlIq4r-zzYxWkecr2Y1J3JWOVZSHH1WhKXHbqTsb7GXp5ljxAw9HYnjv1iw084tCZsybIh3f8P981Lb-JkGQ-leE_nrPfasNRUHW4trxzQmPjlHI/s320/source-code.jpg'/> 
</li> 
<li> 
<h3>Tittle Here 3</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0039ofFLKLIjCeZxceP77pvqwEVi7HvOKxcbkde89urNI9xEFzlNsMmMZ0g9JXYS_HrwNo9RseTdCjB_zotUcmD3K8slVhV5stglz8XbQwqw85Pdj2CkKkrLzWO_n9rlzZW9Sh4Kjso/s320/transformers3.jpeg</span> 
<p>Description 3 Here.</p> 
<a href='#'><img alt='Fear' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX4J9SauJ7VJncIUrsTWw0PBi4YxfLuJWTUkPihL3k4klBwcQhTZt8X_Og2wUoB3j6sHrrwaQgd7lburi0SkTEk12mm47nnXvrlMKQUSCr-tqR09s9JbCrR3a3qvG0VWDRqpMeEYqJGv8/s320/transformers3.jpeg'/></a> 
</li> 
<li> 
<h3>Tittle Here 4</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8UWJP3dOJcnzF7Nix1AUMjieSJ9Gtnx2GjmIgFl3rfvajvy24N_JSV7JSM-_FopU0i478-2u1kQGUKRtIgOTKI4Cdqm71Bdn913uVcQ9a9OHwXzHxhl8_w3D0Ou2LcGFNgxXnkkjdYF4/s320/X-Men-FirstClass.jpg</span> 
<p>Description 4 Here.</p> 
<a href='#'><img alt='Farcry' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HEelX6S-Lznc1OKT6JG0kHMKPaSCwXjzEEB-4qrja5FMOYo4xy4Bj3aVEQsueKzweLru1bUbi6D8us05KQEORqg26CmEIWVtATGX2kreBLADDytUB2UCeXo2O-dUm2qhmEsIDNvZA20/s320/X-Men-FirstClass.jpg'/></a> 
</li> 
<li> 
<h3> Tittle Here 5</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI9qh_I6yq4m2t0RPa_gsqemF4lsFgjPxLJIuKleYlqxwZ66_27u36Rq49adtNwUQ6T1GVbFSZSUN0xnMNMWnlhAgAErJ5Ryi05jkMKUlwecE7UMFo19GSzSyF2denSaBd03EqoUtMtno/s320/_dossier.jpg</span> 
<p>Description 5 Here.</p> 
<img alt='Farcry 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnNmaOtSfBpTRUjJDCn2q3J5mgwBtDY2nuyo5XejyYqyq0sBgCDg00IoBbpJP-d-RKL6gpYoM2Whx5xwtDk2BC5aiGq3fYU3C8BZqxfY1jPR5Y_va92hZXPjvuN-T-8WqoKbOqNt-MmXo/s320/_dossier.jpg'/> 
</li> 

 


</ul> 
<div id='wrapper'> 
<div id='fullsize'> 
<div class='imgnav' id='imgprev' title='Previous Image'/> 
<div id='imglink'/> 
<div class='imgnav' id='imgnext' title='Next Image'/> 
<div id='image'/> 
<div id='information'> 
<h3/> 
<p/> 
</div> 
</div> 
<div id='thumbnails'> 
<div id='slideleft' title='Slide Left'/> 
<div id='slidearea'> 
<div id='slider'/> 
</div> 
<div id='slideright' title='Slide Right'/> 
</div> 
</div> 

Now you can edit it as your like,(above code)
change URL for new images,and enter new Title and description,

9. Now save your template
You are done.