blogger tips, blogger templates, 1column,one column, 3 column, three columns,wallpapres

1.Login to your blogger dashboard--> Design- -> 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/AVvXsEjOMIuRdLl3W8l159myfDIeXAC-lft2nCgjm_BS0R1gR73j-Xa3psEayHE8IxHP-i9xynmZ5zDhsUXtWf47Xnqd9BmwtCnO48qw4Fdh5mGxoCrfGIWpbRXebMSOUZzgu4wXG6nKYcxBd080//) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4bdOBIj5uYOJ0xfVjRSX8k6CrcAfmPrQQa4vb2HqeOsO2omEEhf2s_ff-A54iznXgnigb06Whs9T2LcOBkZF_315LoTKF-dfJ_TbhO2-ajBn6aUd9GglcqwERYmBj5Rw3YFSaw4lTV6x//) 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/AVvXsEjAwu2488N5Abn-lc5i6vdx2AKu6Liu2yrzLuBn7wfnz-UE2i8S5JF6cDlYrzzYJIXDYWUKa1tMa8NnNCzHudW6poCrxcuTNW2mAqcf5ZAy-h47tJGZlQONnP3oGdJEkBCQCcXIZFbuLomL//) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD3MaNW4OdIGRVWl4Yus4OuAyHIemkkQprGoZ4aGSoZGwJkLt0DNouAVK-Rio7KFnU6GtIY3KUxARnKSyLtOqUbOePa0B6kabT1-VDxvMq54UiAvC6St9gIZU3pDUDVUmrgpgS_OM0VIXl//) 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/AVvXsEgtE68dVA0ZvPkw611-Q7oPdXe2jEQ7qIU4KoM2M20WAk4UUGbr4zWozsw24N_udM-HN44ieRy_Gf0ZXzXaE8vZJX-kSFAKbjPesjnIFHK3dMgWfIbo6axh8Q1hmaKJXkPg0_76N2x1AJ-O//) 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 Design-->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/AVvXsEiuhgHO-fVW1oqbPnKnWQOHJ42sumf9ouq1-6sGca84kYh5RJHQOG0-Q3aWA-z-rLBGCDMCF7VVtp7iD9nSII9OPN5pciIit1QYQofQMgh5iSqJTieisNor4Z7oVNZqKNjhvDwuUoTaYOlg//+1+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiik3v1mkKnOokR4p2noP4F9GgsP-EgYOxdIIXTxNgJozKUuUQQmQP60cphc-4mjoE_QsO5d3Tx9L7907woixNr3ZHiygREX86V7gTfGjbUtMom-7QFWEmwbLI6giKY8d91dwkwkQVyN-D4//+2+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix9mdFZvqKg_vC4ju2RGuEwPI1_CRhpsqNPmS-j_hZMCeJctKBaaNwzWzy30hfNmWAQyMJTbfv1kkF99hTbvr-4prQYdIRui_6656vGeEQwxKeL6ltKsxf2pgoXrJM1PEUK7f13WOQXVQc//+3+big.jpg</span>

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


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

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

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuOYCiQ6pMqDVGH-oKGZRBiltK3mJ2osaMbKP7nG2n2_-qQKPPwnF92aaD-KtykdCdEbuCIhtcxpgu4w_S9s06o3i0lBroAl1lrt77Qm2750_KnOcPO0J1N1ZUaoYHeH0np6zZIoMmj7LM//+5+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMUjMxWEk_lHh64hOGox_lMl8gptjlBiVTBrIl3V70ZXYNV2_zNc4V6QeAXgA2y1LWOweFOLv11Da-ch-WXvM7rfMhJktPLcl1wiXP37vYnsWNcfVEPIjfc9PluEBc0UYlgEv5oEgVCEdE//+6+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PbwDMESLgKgzygz3NZCzww53Jvc1ajOP8jtAIEB9Oww3AMsSANc2dK6neL-uVYVPKn5axv0jhciBV5zKyEg9l9mKYamOrdxONr3U8dFyLO-hxzuRK3Z0f3InqPniE0o-eAcAslB3z5zf//+7+big.jpeg</span>

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


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

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

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


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

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

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjWGtuJ7sFqGa7gyNMHe2qqTYrF2-B6-NnPxIf1jfcKjkNMAXq1jS0Hc3WUZMExCTye_k3YJcv2ttQT8t9nXfnPoy-78hmwLabooCmTBSeH17rwC6o94kHalmDHZWtJWuE2Hw5WOG592R//+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

Wednesday, December 29, 2010

No comments:

Post a Comment