You may also like our jQuery related posts
Add Lavalamp Menu to blogger
Add jQuery effect Flip over pages widget
Add Animated Notification bar widget
Step One
Sign into your blogger account
Select ‘Template’ link tab
Click on ‘Edit HTML’ link tab (Before you experiment this backup your template, if anything goes wrong you can reuse it again)
Search for code
</head>
After finding code copy below code and paste above to it
<style> #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:200px; 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/AVvXsEhMNSJA5h-aief8ETGslnurK7qisgC83lrD-w0CccOx3Y-naajsGAB9xN6kjIdLHLXvfcyl4-lpgaawonQn8JhmNKQ7Io4pru2nvvjq-0jxwEGK6KNAluikT5BuKLWqTJJyry1YIXh-3H7s/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMwdQ1-Sx2mVt5rrSFwphaPRxIUjhUIPOnCj9wOu0RHfOegqSSCWVDEb6I-68YfxO54yj4nKsEYRAXrFPPFU7o53hFSFR6dZMybZdcN7MtIVrZlrWSwaa97y_hfjWXLMxINsDOGwEw-yn-/) 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/AVvXsEhjqs7g9kwdgZRDZc4OMYg6cNUQbG6WABuUIBrxK4KjCulxPS9p9H8Amm6sRrdMnZUgGvf4iP_NRYqtCAI8qNppcQM4T9HIZUoVB8gqxL5ydq0B-iWa2J_Yk9ABloVEx2Jg8b_nuAMhYzPb/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXEh-HDNiltVL3RbPp3nQDJcmXEEI1FqdozJTfYDQsfFU3tEFrNW24vkRgx95iqDfeukk6gBbgkzL6sDWC4F5bkqKcNqPQ4kutwDNmtgBXRH93WWKiuHhKLvZOm5HRVp4oGwZfFbuL06Q/) 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/AVvXsEjie-2Ytbpb0Rm_GIqJQCPAimzwJhlllPRjWETMYiD_9tAHEl46LPeNIFQYgksZxitHmugRi7h0tw57nivij_mh49Ocawa9_RWXILlkh-PZGcf4Ix8RizLP5cE1kHGzD_24in_uTI-4RP8I/) 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>
Step Two
Search for code
</body>
After finding code copy the below code and paste above to it
<script src='http://keerthiset2.110mb.com/excellent%20slideshow/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>
Step Three
Now, search for tag code
<div id=“main-wrapper”>
After finding tag copy below code and paste above to it
<ul id='slideshow'>
<li>
<h3>Add Tittle Here 1</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6OBb5VTBoeEPI80W3GFJDd85ShyphenhyphenPvlpWCuwppdFetzbYgkAgJi6Alct_2Hi-YfhEqHxvlV3HnVPWqhjeqdLeKYRPThQjfXCh56CcnBPZRClYhHhRnkwx1FHqUQe3lD0nQ1PJFe0ziOI/s1600/make+money+online+social+website+earn+dollars.jpeg</span>
<p>Description 1 Here.</p>
<a href='#'><img alt='Bionic' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb6OBb5VTBoeEPI80W3GFJDd85ShyphenhyphenPvlpWCuwppdFetzbYgkAgJi6Alct_2Hi-YfhEqHxvlV3HnVPWqhjeqdLeKYRPThQjfXCh56CcnBPZRClYhHhRnkwx1FHqUQe3lD0nQ1PJFe0ziOI/s1600/make+money+online+social+website+earn+dollars.jpeg'/></a>
</li>
<li>
<h3>Add Tittle Here 2</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70ds8-7pAqvsAEuabz6LlHxiSU4bhplCASP8wGtI6JhkEX7NCPJSVTpCgMJZv53_GhosW1yqi8Z2dUYWiCaybl_T2vrdyuERNrWo5fdfPIjhRRjbM8j2f0D4FS6_hU7NRxSzcXGQRnMk/s1600/save+money+tips+earn+money-blogtariffcom.jpg</span>
<p>Description 2 Here.</p>
<img alt='MOH' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70ds8-7pAqvsAEuabz6LlHxiSU4bhplCASP8wGtI6JhkEX7NCPJSVTpCgMJZv53_GhosW1yqi8Z2dUYWiCaybl_T2vrdyuERNrWo5fdfPIjhRRjbM8j2f0D4FS6_hU7NRxSzcXGQRnMk/s1600/save+money+tips+earn+money-blogtariffcom.jpg'/>
</li>
<li>
<h3>Add Tittle Here 3</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4sEJkr477qqAcXZmKeN3s8qsdxtvu12XGFARMa7iVlxKbuKe4E0xSHnERjrULmdnslnWXpQccF0dKYfAG7JjsQhBaaBvKx4pNcqluzjs-U1bQSzXkWBJ48rnfD4ZmThoX11io0QclzQ/s320/swf+files+upload+to+blogger.jpg</span>
<p>Description 3 Here.</p>
<a href='#'><img alt='Fear' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4sEJkr477qqAcXZmKeN3s8qsdxtvu12XGFARMa7iVlxKbuKe4E0xSHnERjrULmdnslnWXpQccF0dKYfAG7JjsQhBaaBvKx4pNcqluzjs-U1bQSzXkWBJ48rnfD4ZmThoX11io0QclzQ/s320/swf+files+upload+to+blogger.jpg'/></a>
</li>
<li>
<h3>Add Tittle Here 4</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3mz_a_KwEOq4NzjnV-rfndPp_smHM8LROSqRSm7ZNlgPmfiUGRmxVe13oO18OwW_kKR72WX_1G8SZHHOETxPjhzCkNEjuInRs5GUb4czIku9CcgbfPbAkFMCyiAYtuVQiu_jUjBU8CpA/s760/animated+cloud+label+widget-www.blogtariff.com.jpg</span>
<p>Description 4 Here.</p>
<a href='#'><img alt='Farcry' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3mz_a_KwEOq4NzjnV-rfndPp_smHM8LROSqRSm7ZNlgPmfiUGRmxVe13oO18OwW_kKR72WX_1G8SZHHOETxPjhzCkNEjuInRs5GUb4czIku9CcgbfPbAkFMCyiAYtuVQiu_jUjBU8CpA/s760/animated+cloud+label+widget-www.blogtariff.com.jpg'/></a>
</li>
<li>
<h3> Add Tittle Here 5</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Y97Cs01Ki_4StHhm4pai086lXSMEeMVKwsFxtABlODR7s6cbR0jgmqRIDoEFM__gqLOuEEopg4EpXjR0g8x5tAmpzzPYCMcp-kc5A6-TezaX30PkIO1BMXTRbeexui1bzMaBM64Tgys/s760/stop+content+stealing-www.blogtariff.com.jpg</span>
<p>Description 5 Here.</p>
<img alt='Farcry 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Y97Cs01Ki_4StHhm4pai086lXSMEeMVKwsFxtABlODR7s6cbR0jgmqRIDoEFM__gqLOuEEopg4EpXjR0g8x5tAmpzzPYCMcp-kc5A6-TezaX30PkIO1BMXTRbeexui1bzMaBM64Tgys/s760/stop+content+stealing-www.blogtariff.com.jpg'/>
</li>
</ul>
<div id='wrapper'>
<div id='fullsize'>
<div class='imgnav' id='imgprev' title='Previous Image'/>
<div id='imglink'/>
<div class='imgnav' id='imgnext' title='Next Image'/>
<div id='image'/>
<div id='information'>
<h3/>
<p/>
</div>
</div>
<div id='thumbnails'>
<div id='slideleft' title='Slide Left'/>
<div id='slidearea'>
<div id='slider'/>
</div>
<div id='slideright' title='Slide Right'/>
</div>
</div>
Now you've done, 'Save your template' and preview your experiment.
Customization:-
Change sliding speed and scrolling speed with your value highlighted in PINK color
Replace Red color image URL with your image URL
Replace Blue color highlighted words with your Title and Description
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments