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/AVvXsEisfL0gdM_tj54z9WTepSYeQsUBCCeNvr-JNMlmvSxESZOcYPI_uptwjlbmPCAk3Isira6t0NjZH642jw8mmEJpyq5UbgpAz7sqMn3cdwMhyh98Vxd52fxxzeQkdBHVwuwk4UUiLm13Vai7/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXE4zcHvoNlbNy-LQJ3RtYfxjmDECuiGNeMveOnSuIKZeM3jwm4_RJdE0fKQWnAdwEhdrKvcQZM_5AbOShoy88yonpqsin0xvkyiv9WHDlDVjeH20ide9cQ_kgZXPvwSe10-sdnTqoO85/) 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/AVvXsEh4_m72GpJib5uu1ZA40OwUQF8i0GJHtetzrPIwGModc8woTIP-gPHKjKXcMjKFhri1fdDVk_Mv2E_8lagS6VYPKZ0c2c5E4TKsWTZRoLkIwypH9gTHAoq53kc_aMCxcY1EJxXNF5pGYka8/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLq2CQx7kYFbQwdAlLksqhW2NNvojcbDWtLDm_8Gx7fYnNDrWwGvKlTD7C2LhDcCINSpUCdNYir0p-P_eDpXsaDvgxQOg2jbGHEJUXDj7gHgj1uSYAgOo3lw-IzYiSvbuc9fzXKexlsxLr/) 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/AVvXsEgqoOk6Kuwxpue3Ev80yiv2f9sE0kw_wEeH_Hc-DTaDGCq0cFgYvTK1GXRhgRT5Z2fUFskNDMfd1AJqg2fBlieon_P2_OAlJczflnk80nvDRWHmvrIXMNwvLPAbszkPkQv4ai2YEijvVbNW/) 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>

6.Now save your template

7.Go to Layout-->Page Elements

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/AVvXsEiDiMfvrNrkIUFjzWgUnoyI0tcRvwyCNYocRyfeMMdcdBsKpVXo6vg-7ohNQP_T9YitvqyJSzrWrNdTO1g9xX8v3QP4bkmcKd65NKGidySiNGxqlB7oWVJkK8cXobYyRNs2JAF9j5u1z8j9/+1+big.jpg</span>


<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCzDJqdqPAqfc7erMoOYueRRGX3hVB4jFz5pbnEbu92negIngfd8OrMKwBNWU-S0g4ngy0HZphkZ-r7Q-9eHzZC4Ey75_hQkUFsVyymR00dxGmaQnOlaVTf2kwifBx64NByQCzHNCSqnw/+1+small.jpg" alt="Bionic" /></a>
</li>
<li>
<h3>Enter Title 2 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsH-1w5Fo4m4RGhrU3NwGl6SXeVPQnSpkyC7U7MwIaLTebuCXBrJc5faf44hy7fgPI3jfKBJ-ilhYV31DXGMYb9R1vHgYUXkdQKznfJPfVIWl7wS6bWjCLj-8P1CRPD3YCKjCQQt4OKKkg/+2+big.jpg</span>
<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIv8GbVby5pA8Sx7V_ZugWiEeBbAH5ebmYaNzFOq6hgwGt39URsaRscw2yF-nicNnnXrH3qlxWTwgs1YZNcwKJqfgGzcjswGv1LyGv-k0Xul5Cv-lmh8SkiKmBPEBs-5Tl3fTN8Pq1WINO/+2+small.jpg" alt="MOH" />
</li>
<li>
<h3>Enter Title 3 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJIcurR0V7ds4UaNMlZkAiBEu2ldxgGBgdKLA1AWwmm7ln0HnbcXY9hU5-pkHKG7bw44vZzpZofmKGLCB7-SCD8-2Boyi4-edKQOuE8jWsav7bgLt83OA4mnWw50EBFhj1TKb36qb5P-hn/+3+big.jpg</span>
<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQ1e6w6r0gTIZxQvV8MFkabxnqatk-vlTlsEc2Y3bq6NKkSlXQK_mMK0tGN7h71ijkjGBSUe72vYHTASiurTKVXlZ46O9g2WfZ6yEX0MWMc1mT93FhICcB3rO5Adnr0aRfrxpEyDP1wzC/+3+small.jpg" alt="Fear" /></a>
</li>
<li>
<h3>Enter Title 4 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNn6LPsPvt_sR6yadtDs52Xj3nWo_7G1JzUTLOsvOl7y2W56fjzSVCSlgyRiJRpIwYYecne2KXx8sUmmJ76PUKs1cKgNvzCAort_9GUbcZfCtrcqfnH_UsTTq6V_S_1Iqx9j3djQEVhVy9/+4+big.jpg</span>
<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOMBedWyzVeCVGsJO550m-BYi_nJn7W-RnyEW8XBvcLHwD31YLVPOka3WkruPSAmjiRUMqW3PgLrbmEvuGZH-pvmUBO551T7FVqIlU1a6uTCVUWMv5mpAOhYahqnTZ1OdwCazrnRw9H2o0/+4+small.jpg" alt="Farcry" /></a>
</li>
<li>
<h3>Enter Title 5 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBiE3ovPPOyfske4SI0NxkzqzlrboAznAz6WiNjiHPrACLw6uQPVCW31ICe3pzp-KAfZ0-Zz-9EFUUG8HJcDgk2lzRR5mb057dayZVJyE-BIZZZ8aGDWKDge-mUnAmlD-agRSLggUdMVLO/+5+big.jpg</span>
<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUVLtuWUDPEEOZ6RLlSafB0wiF7shHWzl5J3UsfsJaZcTjioPSDDrA-VgwaHjUB8mT62wvZCStxh2pram_XkgQPTj9BId4juKfJYI36YZgXRJ7Go5D4sN1ub_q5DkpvQ27mKrCt3ULI1aX/+5+small.jpg" alt="Farcry 2" />
</li>
<li>
<h3>Enter Title 6 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEMJa5ui-P6qiV-x7JnSbZlhSvkQYF8Csywgl1TNw2BXGGZH-J82MhlZh9TmKDfBjWrKtzeMf1DNgs3DRaJPEwujwqjsalwCLG0F2PS6ek4aDvcDytgGPbLpaLIaZrr9Es2qf70qM2xYLp/+6+big.jpg</span>
<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdo5VMYobfCbZHsJKOI-ASug8cGz-FDO7supm7yRoTeWm1nPtuj_4NEKGqErd5rRwp08tkp8NG3CggQPVOZzzwTVd6Ikfk2-VYNLAam_H1BttRFg5yFEOxj3VbGdTbPnwlOngVsPQ9PJH/+6+small.jpg" alt="Crysis" /></a>
</li>
<li>
<h3>Enter Title 7 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq22YEOSkUpDmpc-JHoN9whVmaTr_jbdA5nHrXImiO4P5cjH8ZuhSncugzec3c1_b1SH_Kt6NEdZGRov9j8wG5C0RstQerWtFV63IjGXYEJncNuSiEAmFg_6g1AdXIlfRNN_h2-yUeco60/+7+big.jpeg</span>
<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYfcVfuFQmaBZWsaOL3XABzkhSM17bKrY-kcN12V1lTs4b0mBXJrgH9gQESOdhIz6O-HoSCDXid1-MnvRm5sOhJo5PPgDvqxpviPPtkoEhXe-ep9_nq0eLppLTOkevZ2LygNcPNicLZF9N/+7+small.jpg" alt="Tomb Raider" /></a>
</li>
<li>
<h3>Enter Title 8 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGe57IeIBj2ZDiZKwL_kEE-KLQBcNp9ta4bOEYYtbtJz90pb8PIsTWBXyXiv3JHKywoOyuSkB4qPqmL94twp0do-X_buDlH_UTfWlNefDkLktQ0RQYxOkOAYh8d5pYvX2Urxau-cFOOTr-/+8+big.jpg</span>
<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0nk2NYOeNt9vBSlFT2KYtT253xTOtcgi7gcDM-YfO8Orf_XN8RQkhDnj-O-kgzUOKONxMJPcf8hhRIorr3FEnqa1s1hpRP2i2VfexCbTr7kZ-N1CzXtsMTeQ7oMCeeR1chxBE0qahcm-/+8+small.jpg" alt="Game" /></a>
</li>
<li>
<h3>Enter Title 9 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXkzbdplqg4yLeFuIbhFtSdY3lc8o004HaDDOFWFW758AbmZB4wq_X97yljQp5NNQ4dBc1ziQtrUCsAYrMox7PsHgehBAGC6xdjigNU_IDgCBF1hOWwJznr7FzFjEslLhWxhPztRlQUu-/+9+big.jpg</span>
<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiNzsLbdCEeAuYGyNx0VTEPrp02ufKpHLxdkVvdqDrHQkaAzfrbHRV1l9fJWHf0LqBTXxHT9dv12WLGcmT6rJW1XgINRTbUMwgaqd3RWKqI3W7fnCL7mv9RscCcHXO1jjs1Ak45vn-pYmv/+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.