Sharing Info Blog

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/AVvXsEimYU2ABHYUH51_-a_3EQVrHGohHBTOuKFkvpoiXbIr9ln7eM5xFkknOzuYj8urHHIsbe8m5b2Tkz-Eq-ip4T9CfnRDpJ8v2bIt8qAOXX03Jxt0lxArTkI6WNwxRvkdhrsiT-jcHGPQ_8v-/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU8iis4s1G7PYqOJZ7BGUIr0gkDQC8kKGUCv9sEPhh72eKzht5kfpyoNIHrMkB5cxIQc2HWna2bUJqZyNO9Mxa7r5Cgj7fKK6MX3FXLQiH8aa4e2drpzXvMzxhZD_Asz4rulZKV9fVsBht/) 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/AVvXsEj9JL6_8W6PMlgNdafRmJcbW7xOCLEv_bxU_6uqrv-IjWPjuusL45hyphenhyphenKxfyjyJnOZokUnsCYqRDmPC8kHY2SGCXNgjzTRTcF_8Kv-SR0NFmhPcBmfZ1dO45No6u5oKubCIratlkVPKJRdI1/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDFciZC5FFYZqgmDiM3_uct-Pyj8Ux0SIaKNw_k-Mdxp8E6GVkDRHlJlWAwBB16WY78rdLuGCx53UVb_HF33sL1-gmGewfsaAC9E1t8KQbChs4APB50ZfrpCJM39N0M1QOzrJ0B24RFUuT/) 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/AVvXsEgKB92mC22poRp45ppfEoWR5lpz9Bidyh3jWqqI3i52iBi2z7-d4KYrXKkWpMk9Ldds_qM6yR4CJbWQ5FJwekSylPZe5jyRYj8aXnqtZrPNb7ZO8AhuOBpmFfkKauopB9qebyuCoPydrA8J/) 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/AVvXsEhnGBnF3qjuNiofhfMrZ8xs15k3wp2ZpWSJitjEZUUZ8xHJTmCmvTJM738sfwuiLOAR3u8AEXYrzAvxe3NDoZj12e06j5akCYnT-SliQsdxQKaQzFA315xcX4_LSInxfPODF_dmjo5f64Mr/+1+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxyy4rTB-1AuVU7ooBa9KUzy5LVva7JOyOCFjio_DNzcgaN3JGJwcA5NGsYxILmcw7ZBTVC5x9-OpOXi8FpN7Skzc138Hgg9tqcdlr3eTnZ7aDjgJuK1441rMGoyxr-NtYOGBjRuhSDsQk/+2+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju09544MzkFJvWkpdGWGeWr2H4kOUg5ybAXt3QLS4LojUVdgqY-ckiXsYyn-lxmPqaLi7izMtYmWYzIGyqdcKJO7ftXYsMzTkEv3WNyOYaaNEPwsc6A_sPjsVxnUuNiiFMWZZ_LajX3mw0/+3+big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFNMcNlRPlRI8YcI3yM5uMHzyPy_dLbp4txhbEI95qqryw-3SKuwdeoBhS-xQNB7RtvzG3KcLYpd8d_8j3aLgI6FRWixfAYBxp1VpBEQf7t3SkGa9KIQ-pa7KHevE8pqmgDw4E2D3Ts2U/+3+small.jpg" alt="Fear" /></a>
</li>


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

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

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


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

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

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTT2K7y8Itomo5e-is1k5ssWlmeRGJ2DpeHKcJ1iSYvc30a2pD1UtVNGamqHFaGE7lWv0MFQY_vYj-LouaYdunB244POKzlg3Do1dTrrNETgZ2YQyEeiZj6goLzBHd9imE44xAbnF7yf1/+6+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxJwdqvxvCOdxz_w-SCpqly61I_wbjRFqj8xU4WAbsFH5YK3C-kdGPnfmpzFlWjh2Wb4BTLv0vc-j0Un1yo-gkZER4dmyQWo3l63TtodgFVVGFej7qlCm-qo2NjHspxNKVGK7yT-lICL0g/+7+big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilY5gzAiAx25eQpMdnzw_2Sff7szkzdNi75OPwl7l_cPwULNOg70ZuIJmq27t7ns3ztFHU4-gVS7M1dm-w1ccB8YX-O_oPg3qLer1CUK5J0_M_y2ORcFv7IfGQWvZvLQ6fWsdNmhXYLKLY/+7+small.jpg" alt="Tomb Raider" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3hR-0FyINTuonGIMBhBPABTKm9fBWA4Jw6FqVI5lqOwRa1_jOakcdFYcgkd7WA24IwuRyoLB90pH35c058wb0SVGc3MlCUap7SzwxI2FceU0-t2RW_Wys_YzppAO8VKsKhK_3gnkmwmop/+8+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKfODSqTgMC4sHLRYWfEPXjLRnF_u9eMFINcIDVDQ7ORAvpFHgs8pRUj2ydJvYlp1E3RtjaXMa-WMAl8tNSjpLPoudPV79ykvm2ZSl0pXfKGXHcXIDsgPHQQn_D_-FaeZY2mzEcALR-ymM/+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijxPveWDUKz_mTtib4CzQZ0J3wnejtKuRoOpW3cnOtZwNOPsr2g5ICbvKMsWOO1LZW8Jxx9Zsj34O-9JWDGeVTyAE2bns-Lu6rLKwACqQ8wWUFGSpXReALxnIlFitD3zY0utPJcnC8HP1F/+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>

NOW CLICK SAVE TEMPLATE

thanks to Lasantha Bandara

Related Posts : blogger, content, excellent, slider, slideshow, to, website