1.Login and go to-> 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/AVvXsEgNHsmBXqVAtSxziaVbXdfxVqOLJR2Zfk8HnQjXvQkygQMN-WGtdtSxyGLti5I8mE1vbaIKqR0sfaGai9MbnBQtO2jdbHBhQGhzPf4kEvYsHjdEGGz6tdqWn83ssBsOIlAqwmoOR1MllbOk/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSfpKgSO0T3U2hpVDZb9cHJciVdnij5-i3yZpl3t3SLgU14SAEq5fKCycGxDrPNI6BveeKwGkn8t0_96xOZoMOS3T59q947EkEnnYhgLwvReKsuATz5kFlkGR9d_hWWEBqP5dBuzAqqdmw/) 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/AVvXsEjs_KnWOZZ90r-Zy-MMOhbDixffWVaj9-oHpIPA5jhkQBiWX-DyiX57ZfkCeydzKI3rsJnyRHDxXbDlGy6u3mf2AZqjNckyQsrFGI99t7mvOn-H4znxVQcNk2E4hUtltyz8oCmSlwBgJbco/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWkJG3Ph4R7Q6M6b9QeacAfJ98f5xJTQ0-LdMz0PilOqlVelBULMv2m8VLJMMhXTGdpulxnagUFD1jEH77KQbIWMGa8T8WyDgxeC89f6UjnudgIijdtGBw7jvW29zKDavCvY3uMerCvpgn/) 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/AVvXsEgEMu2jc4uMq2unw1Zow18Clf6TRyxfbLPeLWaf6bO81D9Dw4psVoS6JLz266gSyNo5ld41xPckGnlZrlD-nuvbNn1WujL5YJ4_6MQQOWbPdwdOl7RoslQax8XLzAhFP1qJ7c15q4SigIHA/) 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://artistutorials.googlecode.com/files/compressed.js' type='text/javascript'/>
<script type='text/javascript'>
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
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/AVvXsEiDGSI5jrYT1dOEXs2UlJ2v3kvj6M6c8BFxJF_D9w8MJC4HKnS5U_0mmnTRofJ3lJ-7lfWjX3NUOdCvxamhuWBvnJXyZheHdGIEjZT99BuR8amW-O3wpW9ijVldjkEBWmRGMduzo1dhR2k4/ 1 big.jpg</span>
<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGB-iYVuoOKLI42mjd5URtK6LRxF0THIdF7mxRcLa-KYpy6jnzJZPRGoKhuMmaNH6TiC8gO8jQF-51D-9LuTHCmH3WaC_vYo0DtLy_K97dzmY2qoDc3wawxNU6HrwRINv8-eA9eSmCUXy/ 1 small.jpg" alt="Bionic" /></a>
</li>
<li>
<h3>Enter Title 2 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBy_eZaVe4AjpNqWepTZfFgiFzVT-rv8Nadamnx3zKqosi93LDbRcEoC5BvCMdC8u8pd85SpkD2EDIaq5nFyjaUHSb-2ZRntpqdk_WE4XvYXC5t91pidbZTHLUGvwttvZH3inIa6EnwqW_/ 2 big.jpg</span>
<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuiEZHLxlsCvvWidRG5DYkRoEAhVBpI2v7_wgTb6-U_M74VBQ0ZVCLKuzLIoaii259C7HyrPI_RMFSjwL848y1g19f6G8wXpKUykET13CvZojemdT6IfUneT5JDGW0WAUJvhoYIfN-VCuE/ 2 small.jpg" alt="MOH" />
</li>
<li>
<h3>Enter Title 3 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6o9DAWbCoJ9dpuFBycKfUZzC0Ft6xBnq0SiCwyZfbkMSMCq5Vsoe-eEZ46jHWuI_-b5NHXnxEzTE6yot0IJLBv8RwOvupQ97suKl0z3tS8OUzr_IviF8ihvlQrWbUYOhwGd6glShUGio/ 3 big.jpg</span>
<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYqf-ssSuu1WkmPtHn1JfzKFGttnd_t6izGVewHa1QY69dty-1LgbEhyphenhyphen6LwufJE5hyoEMjpabo6dTbUEuP8waXhfMaCB5YBmz5-O2-DGu9HPKWbTFH2QRLQRcuLqWsSRln94jBZoXyPaBv/ 3 small.jpg" alt="Fear" /></a>
</li>
<li>
<h3>Enter Title 4 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2aKxrl9Kx-XEvPwO9RmduLB-ZiZY5eDu44fMyQs1r2Z5vGSFlfLCI3QN4Hredcp7Tsbk5XH-bOK3k6MmwXwcLP8Wxev0MPqRMp32mEcQzDYGLFODGwVssswj0Mh-Vk-La0nQ0LR28yUp1/ 4 big.jpg</span>
<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ813kT6Y1DyHElFrF6l2_dG7jysezPl4dPpZXd8c13C3a6Cc-rDONDCI5jb-78jTxFKckmXQd8c4O1IOj9gPjsvFtdlFWrBeCrJ4rRu7dVWTASu90L47lwVn_3bQo79qd0wE_2utyJyea/ 4 small.jpg" alt="Farcry" /></a>
</li>
<li>
<h3>Enter Title 5 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SUOxJA53s5sgFv4z0XP79UTKh6zPkfa47H5FomisHwU21rDwPf4WTNzP6T5DDezAoG00zWgYm24r9aEiY37JzmetqYO-1y_oMxZ9js5pbT4PpvQde8lNjtGdVF8-_2yZyHC2KS6i2nVN/ 5 big.jpg</span>
<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7Yqd_0VDzmkfMeyLCP__QKnp4L8DN9J_FPN-mLI5POPAwm3-rSxmiZIi3Pri72M0i-tQ_tgNuDj5KOKi7kjIxfA_KbVVbcd5nBZJ5W9T42A4co17gPahNDo2Xmn3O9gWbR4wxSYQHFRL/ 5 small.jpg" alt="Farcry 2" />
</li>
<li>
<h3>Enter Title 6 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgxPMpf9gMhGOOOroLlmpmH7PTcfEylyfm2_07BcdRfA3VrcB-bsrrUYbXDReq8bY_BUqgkmJpEHp6bv1Ptc_UcQfJlAEU5cad5bYfAyOGB_woy2EiPydSEbXPKM-dKsKjfsWnqkaiywHQ/ 6 big.jpg</span>
<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpTj26XIzA_nsYSdFbhb2Oa0fOXz9K4N334vVdTdP7zX8FhuSbPnt5K_uqjWRwfog-TRjQSV-pim_aEdSeS2k5-rN6ffvF0d30lFDq27-8oclVs7QZF3xZgchz75UDj7aaAyL4Z-7ZLZe/ 6 small.jpg" alt="Crysis" /></a>
</li>
<li>
<h3>Enter Title 7 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga5F3we4IMneMNzgB8cBQdMLH5FHdnWBbXIG6d6Y67gc0E3E5oD4he1Z4gzHAZ7C7W-aMyNWEnwneje6g9pi-qUiQIB74HRzDAyFM32WGyzjRy6enf6VZ6GuoFCUNYXhLz7sIQfFtdtpfp/ 7 big.jpeg</span>
<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlRKRMSZJHdxGq7u05a1GyALQEtn70nxUe-Hx-wipSx2uPiZOUfk2L4_BIoLkyTmXCjzyJGXqeQD8cPQp6XngUvHx1dzSB8FzRRC5Xa6oLbs77r7nrKrVtVC7DtExQhZTIod1Nv0A9jYi9/ 7 small.jpg" alt="Tomb Raider" /></a>
</li>
<li>
<h3>Enter Title 8 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ocRYravG9hdQfp185M1XNAocX6DlJrp9GqfSnL7FCZ6-WKrEmZnHE_yfiuJ0dgxMXx57fkSW3h_tb5YNyQ49lUYN2urYXDdc6yuwXK48IsYbH-5mq4WPeAno429TO6tihx0VmiyVhKsw/ 8 big.jpg</span>
<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfcomVb5bcl6mhohBjN_zuTQhIlr-V4iNC9dEO7yBCt5npMFncZtnvRsbouoqxt4kuxm1qwr0_42v_S9Bmi1rx620KkxnrIg89IGZRYmsl4fXBkQq2CDBGiL92-GOxh_s0gJO9AQoQe1z/ 8 small.jpg" alt="Game" /></a>
</li>
<li>
<h3>Enter Title 9 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA6m2Jxj2utjCl92cGrM1Z9zffwXRk3p5TuXY7hPjfilyfDxgcGNSrzgyxefF2loflSNZQTrV00Fuo2ksLWURt-JKJHbLsHtcPO4Y0hw9bL6O1RMzW5RCf4YAEMFq_zfNXwyfGUTfnqXX2/ 9 big.jpg</span>
<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Xrptfo9IPaF_sYJk4RuVRqTd3P0bU_lmLxn5fdEfctzno0aSiFCfL1I8JPl4TSEPYUU1hjxn_G9BGT1kGVTXlJlTRxWPE1Pw1iSnmAj_nfeZvIqp47zszzAG7G3iQz2VB5o2kip6lIxm/ 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.
OPTIONAL: If you want to make the slider to appear only on home page follow the next steps:
Give a name for your html/javascript widget. Let's say Slideshow. Go to edit html, expand your template and search for slideshow. You will find this code or similar (without the red lines):
<b:section class='art-content' id='main' showaddelement='no'>
<b:widget id='HTML2' locked='false' title='Slideshow' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'> <!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:if>
For making the slide appear only on home page add the red lines to that code as you see in the upper code.
Save the template. Now you can remove the title of your slider widget.
Post a Comment