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/AVvXsEiaK9UafT7O0XWW6xe5svfKPhQT0SnkheVQAYMVJRUXSDeKkHtBFX-bpNTV6j4EIA9KQHG9Avo4D_SmcKamXks7HTnFEOCuVEWl7bUiq5S9kFR_ajYqsY4hzUiqYvRy5i_aGlRTWu7iqgYX/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-N_9wWPbV3VC0vuBo2gRzT8kwXN3FIgCUw-ImbXMWUS-2idVjfK7Xcc29bqD7avdZpJyKJhqZ42_Qg9gTAX1_pEi3SPQLOsfQDE_H5ZLlnu9b4DWmIaK21VIh2dQAnI3Ug0zc0RHSNZg/) 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/AVvXsEggRW7y3nVJPosDkK63HsI-tISxqsXS5REitSeC6zJmv73jmdIsy_03cHr4el8sQYgdAdhgMwQoRwKQuk78qIm2YCQxqn6z8OIVm2DCDeManHPlU-gjmFzzX9TH71tIhjCn6fq93sGvX7kp/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMGzcz6UXyDHowqFpABEZ82Mdl0ZAmx1JwnvDiQBgp-hL2ZfyBUGfgYD6Z5txBnfVyAwYGZApmk5tPero-8C_2AizyoHKtQmt4zOPv5cXTKKFjqKnbyTGAinUCs0FjkUXYqEN-QFxzdLDj/) 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/AVvXsEieotMyelePqug2_GogJqN9H7d57fbbvDt0aRBh5u7tzMkbFm1-DdKcyMhhAuaGmqSSfCuohJiOlv7gP6ZFXR3blz5j8eV5bHi4jKo_SwYF56dNkYcmgrkfpv1vMKVLnG29BIVnEJL8Z9Yk/) 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='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/AVvXsEi7b8wkEMLUUSx2LzClTGuvIMRcqY-3puFVghB5NKvMH3oZiFNQNxMXfM42hNkMJXVWQO3uJbEB4svKbkLgXiJ43fK_JkGtKiNGc3-FnqiBL7Bylhtn4oItPs_4-FcZFETjK4wo-uN5XS8-/+1+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Ai-r2ijIVsgJBcgxYEcdqU6VeYzKxwH4QmWpiGtHgXCwPendwRxEEnnutnfi3v-R56h-ctE-vD3iB_1HUwWvjUXUFWMHvWI_12eB_ulHwEb8LcedZAu0ilp_-rveeCYudaXWZ2qY7w4B/+2+big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZVUo337fbTgtdzP0-KkEE-kv4j2Vg14mOqCSO1ywFY53YhLODypTm43FY7KsPuz6RTkIK_yFdojTRdUXx1UJWSgJntX1z-mQaEHVu2XzK0DTNIF16o-CLw2My6E1LUv8S4miyVCVedm6/+2+small.jpg" alt="MOH" />
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVxgc8pt7WfLbms6yXhseOFwaR8XBQN64IBM5aEW-DrCUSCQJtav07JryO9fsAAZhDqjSN3uF1SbAlyL6XHbCxkNdNunmrwOfsUQ1uevLQVb9iq-L2Ee92EpeTMbQIAU_PQpAjNq-4uKCv/+3+big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6sHFpXILA5C8ULMrtOB4zX0sZvYYvVD8f_8eJZjypms3Z_UaQEymHwRAChckSqpQRgaZm_uLA6tsflJcKVki9hMuJ_Rfz2XO_996Lt_D-ULMqjtDwSQoDOVXw6n12lX2z-4t7DJEoZyJM/+3+small.jpg" alt="Fear" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFyt4RWziJKnve7QdjnZKyHY47WSXL_zWjcL358JdeXB4Ax3dDsSxASxt4oVmVD5V_YM9dJG0xTE6mHp4tK940Z5s2swwSfos-6_ZmPcYd4MkJSRdeogg5wj6ddbTmpoWnrHmN5GcBJVWP/+4+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghcQEF7EqBPpJrMPah92W1lN9_eD-nCA8dkGRjTO88K-bw9vIKTkQxpBrcfYsDhPE6rPZMYHkMwcD5Fr3UJRVSLihbTg2yjilCUzH57oV54bBQ9yvr8SRXrwwZOtrHQrCxG0hTqpfUL5Vn/+5+big.jpg</span>

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


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

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

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLmm_5SvPxEoJcB2IpqFKxNOY1pMbOgAZpbqHos7Y_rABZPef-DCQXQ-OFmiENw2s02Q7rYepRbe1Tq-_FGFa6KdZnZd-VPPK2mxpgI1MAGgofBMdDRkk7s9Br6XOOThWZAzyhHPr_Ue0/+7+big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX3GVwnPBRIb_hVbg5_krw5Lz1-2Wzb2dmCQS8SKa7ljr3DjQiG9RcfCwu7qiOKYkhs8SuTC6LIAhTD52nXRS-gJcnf2NvshpU3HTPx-fdOiicpD6PjD5zcuJq-AnqVTHV-elA6Uf17jpZ/+7+small.jpg" alt="Tomb Raider" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXcOcxzYiCZ7K8f0fA4uPtMzrMCddc_d_EhioQD4UVg_c6OvVHXhOIqUcHINxL20AQKa-zxEyMy7zvmvlB5QrWQfGxgOx0x5W0YmVsqDbR22uNcz4m5Pw6TbwxHNIj0EFyiXvQU2q5qQ-4/+8+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwM6klMfYAXAcjgChCF6Px50Jfbr3WiQABvcgrid3iPUI9QR5r2P_lHSZNkD6kTJgQXiKw5UzKa-lWp7CNl8nnIjtOVIW7cTZmvUC_eDPMvgrU4NFiAKPOdYvYe7XmyO4Of_sbEDwDSir/+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuTWsWF9D1O-Z-nG7pdgw60gBxAo6sGtqcrVSNmJIYOKm7wILsBQg11Or8Lt8LVgfF4cg6vbA5SDNjnx4_Y50IvlLlkU_3TOZFljNoFyp9CBFuz4S-ZgnU6VY2UFPGxNF2wlyN3GFDA-x5/+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>

You are done.

Demo