UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........
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/AVvXsEjEXFpZ2C98ZTyDoOrhfTAxs8C-SYQSpAkQ7u2aCrZfwXvlJp-o8FpA9j5VYD6qNX4FR8BSbj53xypEkwb_OdV5cxCPsBMO2UA_20ufsIvRtf6WUPAReuq2KEk3NVHvsjBizUJBX4mFnmhA/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihfaZvwbZ7PkHU_4kFDdeM66-8rtiIKUffkfn_zo312JcetxQdFWBIu4gX1q5uERg90E8Nab0sZE1lU80RXpfdUIsGxKzKccgbfpWX7gY9cbLWnzHwwF0iPS4nsEC3rtTRgFgq8yKmqMN0/) 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/AVvXsEhOe7sPy3m2ypZXvUbEoEWKYAYwUYGQS6cO4gPZ3e13NQU5cT_jn44s1VtFX-7aseGBb6RLRJVQP9uqGieRYcM6xOvMRZScddp5vNMNNWuSkmjP-rEKRSFVno6Y43LFUtJynXtcApDdj0xD/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfF05Xjuo4bb_Y2zJdvpk5e9wewU_MiminyEj2ktVJbd_GYeVjC-OO3scj4lX-GrdCSuit4QBsbUmb0tf0e0HN19PH6hVSAGlxxPRFRf30pmynIViC7y5rzTq4NuL657ORhMgGIZquopx/) 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/AVvXsEj3tuKxadmkjFI0vaTfvxkyR_OxOd-AObpRxfP7pnjNlSWChY5Wj9ySxri-G81tpLKQpTjkg9IXE_9BEARBiqh-qPT2-XhwI1oAdrn7dM7wswkZbTJGH6vOwgnRdhkOxn073fLGjxGW9Z1L/) 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'>
$('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>
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/AVvXsEh3d4nnGJlGq74Z50WWCky1xm8OcsXPby1Yolo727hMlx504UUPnjzQQXOHC13S6zlxSDcJG4ciijoD0t2nmFmnN8g-N8f5dvpAJJ3I41hvWZhOqJesJirZdaddxG2yRy0e-b2jqel9JhSC/+1+big.jpg</span>
<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCjOisqnExnZZnrxE88959dfiDhxc1rc-MGp8IZr1zk9Uhh2nXuaHsmJOukCueRg3sRHiE_SyVzvibl2V4DJRWroe9CdZnwqX9LX9HMi-i3Yhu6OjeUuTUtb8iiqNXBXXE7aH9malVik6/+1+small.jpg" alt="Bionic" /></a>
</li>
<li>
<h3>Enter Title 2 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYo7KHDW2Yu6iQL_PFY3j__d5_rMRqZo4W9SCr-ljBgjqGUWcXbd-AWDlo3dUZ1SHhVvxLq-dvQIntinLn0-OyUI5YElR3l3NnInMK2pwOiEilA8a6Kv4RYU4ZfOP6SdcTkZm9uNrir2K1/+2+big.jpg</span>
<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE6h72yY4Qz8Gn4wFPBjheS5zRljUX__YNZAvQxrZhh1DBSv52g6XwuiBy_umuao2ed5PuyfqMWrfwPE1sbxJw_DMXsV0n4MvUs7MpxmG6lcedCygJv5_u6kN2mse06OK2kjB3L5tvXSA3/+2+small.jpg" alt="MOH" />
</li>
<li>
<h3>Enter Title 3 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjveCB7W-IsYvTn-CI1uomenBjKgU-sEadZVTaE3wzTU3WwSPl98-iNLdqqWYJmT_Ax_4-Tvl8dj3qbjDZgT17qbut_uYGGASXliGP5UbXa4TNiPksWOLlA3DahA6PYahIdnnbuCTP-ROMB/+3+big.jpg</span>
<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicqGFE-DPT5ZvsBpJ85y7awexPVIc5NPb85apRqBO6j_MZARwJuNkl7A6xc0M4U6wSa3xhSHmT9poRr6u-R7hOGiroXiIHcUGAl0bCIMqIWrzGccjimVp1zbfUv-VNouCtFv_rnmWMH5WM/+3+small.jpg" alt="Fear" /></a>
</li>
<li>
<h3>Enter Title 4 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaCnSdAgGGaNDuzfUWAAR8RJUNsc6tWaeox1ncN3WtWufofIZmEYSPIgrtThjJAeR0zb80fRNJpKzbjTFhkTdFMKBZ-Npd9G7NWfwebOkz4TbYR-r_Li_715pQX6TsbzVU4zw_EJS0Ofs8/+4+big.jpg</span>
<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPM1n1cP37x5oZE8pw1fSg-xfyyMduWJtlB7sBsv-SF7IA7nTWRDgy0-X1ZcPaozh8yzaLPP5we7JHa0lFFzMfhVs992Q7e3QQQIJE5_0xEJXqFh__6_nBl3aykl3sSDGcnRohGzkOi57/+4+small.jpg" alt="Farcry" /></a>
</li>
<li>
<h3>Enter Title 5 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbW2KTs526er0DQ0IMD1aAKyHcJvNdENRHLfNg_ftjbnbXp9tFpyO_XtPbgAWUsG2KAZSLYO1ZXsk0mvsDtZhQvZClnIYYbQ-uvAP1taN_EVvRJTQ2fHTUpniRNGOu2z34wNRMn9AOdnxo/+5+big.jpg</span>
<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIUJqcmv6SEr8q_TaJJtmf0r_58pWy49zRYd3kO7djhAdP3T7P9g_F4FQzls2nhOz2318xBkIiIy3wnXMcUgLJloNJPXCI-9K9j4agX1WqYNcQ5j_4Vc9Jx7EogRTIfo5dfHabZlRGR3u7/+5+small.jpg" alt="Farcry 2" />
</li>
<li>
<h3>Enter Title 6 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGmV0X9cTUtcRwE8W08XkSUdkYjHGZwNThVzrW6cLuLfEq5pk3zEeGFRlwznvTOCdTfx3FkDbwB_bsM2_xSu-OuQ0A0Ux9rtC9staZcl40WlRRQ5AWGWhBkbH4kXJJBKszTnJi8zaGoXF/+6+big.jpg</span>
<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOaOr8PpwPB71f6Af1j75qgNdLA3nnc4FFlahTizi1pwtU98sGTS8ni_iNS1aOm3ibve6wJsVfzqjjXtadCcCQPuPdkod9BfBRdN6ggHN1_zpRTH9nRhv1fUciiLV_m655DqVIa1ajy-d/+6+small.jpg" alt="Crysis" /></a>
</li>
<li>
<h3>Enter Title 7 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6S-yHK8zoU5PYXAC40wanIfy1kI4upPvicJ0MPhMNUJ7fH70ZXKxycdaNfdrwkc3Z3Dm1DNjUjcV_62TVjZ-gI2dDsyGfe5rdGMqNAoFWll97IVik4cyB7Lsm47KmsNDNfO8fckiDtczD/+7+big.jpeg</span>
<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8asSQhhCTm5NXOxjA3b32CAD_EZTP8ma87YRqKclEog5g2s1ztP8Bfo0Ht2hyphenhyphenkeMTQQi2BQESb3Y8PJQOdi4O0i9b9C0wMjShrIcT8Fr0h8JFpIr_pf_Xzvoxwp-75HfrO9MarkHkDK-P/+7+small.jpg" alt="Tomb Raider" /></a>
</li>
<li>
<h3>Enter Title 8 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpd3lor247QTpuGSB8otPee_GleBG_rPCiN7NAT2kyok5DlJtLx3tdhYd1y_Z8csDglQTL6YEwTGjzfsgv7Sza3T9yp5v6I3xrirZZY0LhE1GNSDY4MMzGgmrKdl1ZqIzyaOEHGRi_2R0/+8+big.jpg</span>
<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Qg0su-y1z84P4wI53ABK4dZwT_dCWuFk9eCPVD3XMi6OTmGeyUwNMeGoEAQ19egziNKrVzpJb2kaubeJK5mYRIEsFIKCjuato5W5NoYvf2leCbiCZvLjInib56dbeOnQsOtiYtR57UCW/+8+small.jpg" alt="Game" /></a>
</li>
<li>
<h3>Enter Title 9 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgmYsa9DaPGYSyhoOpEoSZw0G-ZABrHczylr1-qzqirz7Ex84JhGDVY8Q1F-qsh5IHVn320Te9Kbcj__GMy1PretAvvCfXu5nsuiStUCIRgQ5BfygmIBv_8E6RSVfgKx5xYoTQv_jB7jbH/+9+big.jpg</span>
<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFD0Ea8A4C0eaKbkWxtwgkW9SKwuamv6xJvNUpeO1DQIXDQwTSElZZIAQnrctmE-cJv_kSsirMgtcDq2Ag9zAP8ZuXhepBH9zNNTKCH3BkJbrkyUJi7RMsKSfiqCMGVTIyk0xStwIJQnZW/+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
No comments:
Post a Comment