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/AVvXsEhVOj_2IrfW3YZl4ppEebsMpVbIlsdYRk5de5BMzeywRSK-rI-heSDTQ80Bw2DHMvYuCaYI4fVjkHkvnkDN3LcY0aNmY4Y3D2sxRFQkv_xyU09iJrkRv2LHDRj162zG5yKxQjjKZIB_1XcR/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLbEu6Z7TYcMHKbwDA9x7jWPAj5D1MLuaR9oEcvrDsyHZv9RMo_Ip1QmcwuarhWKd0a-QGCl7IuK50RRzREdwFoyfRosJpxjHkB_whsSuz6PUoP2kskMTrryrsE4Zo6CRGFoeyOdv3RSmz/) 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/AVvXsEiFpZxNf6aSESM4dUielgb0TvpCigDgQmQKKaNuDHVEWz8YF-mZm0dkgak9SU8mRnSLHD9RHrBRRFmzjxpDLiPqYtVzKvmyqrjYs8B05jP-qjTBZfxnzEk2YdPn6bG4ziudyQ-Fh8CnhTP7/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3ac0FSwniZ3AwtjYlgfBIqO8zIwjQ_yIB6n0kT_du0e2Eeawy1qDBS4qKHS9iRoKW_Q4bhq6thAdkaPdPSV71_p-6Phlx7yj_Xp_tltd7_l1mmEt2WVN3GaXvFQ_roFIef-THfjO-Thn/) 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/AVvXsEibTGv5EVGXmgU__EBrVVfmzedd9gGa-360sTugQDugRVQaSOtcqL4T91sEN2x_o_SzvYrX3e1H6LGMnk7E-ESzbnXr1x5R5gExrUmHIDGLaNWx917n13t9Ll0jVpzPOWXwU2FSzJGrpioh/) 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/AVvXsEhSN9Kr3zOREdbbsUMCUUlHJm0eivb4L7Umroh942M0HcfdPvdWPE_iGcXO2zBMTOkSiY7kTl1E9B24-xw0U1BTXKL2a8LMflKaPNkIj1dtzRfa20ALgI7hmsE6SgCgyGBick9UDuBSy0w/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/AVvXsEiJeP5vWV12JkzGViEAOUnl-KI-LXJxx0hB1n9AAZbtkH6_c_UppLl_676eCRNxIaIdpHcT2MyKdyl-wnIcdLjIjlxnhtFHh9x9UdKy9P_qe_er9R0XWdLencDUsl-o8q8kkFmavC_NsDY/s320/deathly-hallows-part-2.jpg'/></a> 
</li> 
<li> 
<h3>Tittle Here 2</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC38PVfrmROG3HMPk6c8CFQOdKJ8QWYwY3BSMGpdFqkZ3BTvJaT79sU2opZhMrsTTrVfmlKh8VOia-vwKM2-NZ2SMImWlbBoqYKwEqNkVRW_z0bu1otEoWzyytJQHJ9CCFGSAf5BBebNM/s320/source-code.jpg</span> 
<p>Description 2 Here.</p> 
<img alt='MOH' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIeZk6cgdybfPcECqML3LFuOnBjt5z-UBDPbuwb5c3mYQ2MncxaP082fcmMHcrmXJKKcwfKIEvC8Yfvr-QlG65rDHKm-6UTYZCl323dZejR6q-oi3c_eVLVvYVWoahvLD1m3KId8dM6UY/s320/source-code.jpg'/> 
</li> 
<li> 
<h3>Tittle Here 3</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiytEMAJYynhJwP8QYG__SByAAAs3-xJWvfZDAkCL4ljYa1_PZd8hh0529H4sK_YXAxxncqdcEFG9PqjReF22dbAvOLZhTLuF4TeUoC81a4q1cBTnzRSRFJ4Ev2gFf1bQ5jAHsFCoy3nI0/s320/transformers3.jpeg</span> 
<p>Description 3 Here.</p> 
<a href='#'><img alt='Fear' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HTCUSK5Xx-2-u_0EFQVX8UCObegRKXjxYigvQuPwHp0VByKnhyphenhyphentJgk_ohmOpPEWV3TyQ_gypWiC5GwGt9qydGQOQcJQZlrKSBCBThT0h3RnQM_TW786hopjRoEQY9MaOgfsv6ClpPYw/s320/transformers3.jpeg'/></a> 
</li> 
<li> 
<h3>Tittle Here 4</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOKr-j8AYEuNgvLsd8xaL2aFBA5FTfJnMDCqCllKwdvcGD84f7WCIqlBA8mOYtMjLxXDgnJMDvkfEYZB7Ua3R51fTTtchi-juNDP1p6y3jLETVszr8o1HvMBRBE-wgtJgM4h19EJcLsQc/s320/X-Men-FirstClass.jpg</span> 
<p>Description 4 Here.</p> 
<a href='#'><img alt='Farcry' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6dMhqju_UnHt6v3_0jb2nxeCZbExDUr7gk7f4iC5Zo4M48QAX1PoH5BwQS1oAHuobAIX7hyXUmJu387cwttt3GF-NGwHGv2MyHWl7fdAyuveNWK97AgsHT0gVrYzI_u5ePkoFSDhdfs/s320/X-Men-FirstClass.jpg'/></a> 
</li> 
<li> 
<h3> Tittle Here 5</h3> 
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJYTH_6s_5DATFAvp9v_tvVzZKDmJYyC746F6gVfnwRc5k-q1cZYuE7TLnsNTdYvOkIOw-uLwX2RALf-j7_f3Jj3AswKckQLGpwXN2hzg9zQ_EHvk1eBwCKr9PYlDKQH03QL7g05-Nb5Y/s320/_dossier.jpg</span> 
<p>Description 5 Here.</p> 
<img alt='Farcry 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3AAR50a9pvBDtHjIyCb0lylSxOrHknEhHW9Bs978bcL5h9dAO9Ny46E4sZeWuOcAMZ35d-50_H3T6GovwRlVqpYyjZ73rtX-6O69iLAq9uefFLB6XLmO6p9PiYnSw2qQqfUqUFxrObuo/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.