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/AVvXsEhAB1DjrTj0ecCsdRXEZJ2fjJzqga4vARZ0361y6m3P0dytQJ0finnKVmDToLFmV-cBEZO75i3VeMUZFr22udpup77-z9VcFQWTCms1NF96CXH06rPyHmjuY9iU_f45b-ARrreDQT20ljpX/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPjKa9VY8bcfT_QA7ZljTKD7KcAyAN4fzzdi0854HDgNFURVjSEUWDVKAMVyILOv0aZEEc-i-85WODiRabhVEV6DDOH-0BE-5CXLH5vSxkZk13opH2mRHPG4WHCaitLgfIv2-3OfBsS8vL/) 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/AVvXsEhQKUKgs6us6R3Yc6_pKqm_FAljE6jpn0KBiUfsNXnkIpfk-vrXWw3GKB1XUYIIDC97to6dfqJlwAcF9yEtQLZl_b_eRdxFGqspF3zHvquEuvzVG-gi8M578Tgipwqpt4iN4k32AAMRiMvV/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxmkwb1DAVPBrou0xRAc1_mCpqzhKiPAGKB2Lo2J_O03JRKJAT3GrwfabLLLLgctCV1MSMIyR9ss6iC5rxXBRRfvtvaBlFZ7rrIb32_oI42691MTuOykMBEkv8lK2rx6vUe_vAjzWITtV3/) 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/AVvXsEgxCUTL4b4-9X8PROWA4ihYigrvs6nsY3NQDNfz288yXEZdtQRBhDfzDKwnWYbIln3P91sCKa29tSCUIWTQ9tKYPWZmXe_KrBRO4SukQ7QiuYxhxPvDukk_pGJCls01TEz9dHv7atmQslBA/) 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/AVvXsEg9W5q1OaGwT9_w1dO6sKhy_zU1m8cT_I3nu1DwmZ3rD05YI1NrsKqrw3jN5DR8svqAIyh6caFDn7C2_TykMCLfFlnFYGMUfExAcx8X6ccvspqUZg2k3EokW9BEn8_4tOwo-jgaJURd531v/+1+big.jpg</span>
<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibTL-PYgI4j8rBR3IgwqurqmlOsQOJ8rdoFJEq1WvoTcwznGGR5l0T75UqeyvPa8x2gvjayL9R2nQWqsDNsckNocO0koHlu1Ik82FeMWFsfVfuPJwVVCpJg6xqNkqiJgwsdoeZ3uwms3LQ/+1+small.jpg" alt="Bionic" /></a>
</li>
<li>
<h3>Enter Title 2 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzvuX26ZQPBeuabyuevfGS_9IoNmpxx5px2e0WIDtpQR1Wel3dLH_4vzKiDGKEqxJ4dl4Ksi7vloRf5l9vt3757XvFkY4JvUh9g9rxXPyQXJwDJ87wOzrjxs9WYekurH3PANJdpOxTsBYq/+2+big.jpg</span>
<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxvxEMP_9xSfZYs6nphSNJ1UvQBgEct9vSM-_ofXAmuI5nL9itHax9zyUZakY2Nr5jBm5dvyUYSzQsfi9zk3QM4dpgH-OV0BJBErBPCpuYLgLkHIJtXz0ZwjUNodOAwLWXxaidzs17cGV/+2+small.jpg" alt="MOH" />
</li>
<li>
<h3>Enter Title 3 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqAdcKlKHTXvhulAreIcWh_Nx57WTIjNAJ2I6vCbDOaKCmAlrtDSYj4m_9HdTQjUuY9P3Ba4I7vuMK_ZWiGUOfT2PMr2O0SjO7xZfEPD0nKv2tQNxfdSsIKNmvHQidNF7gTdWamzdPA9F/+3+big.jpg</span>
<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi35IMHTaAVzJqDbOPV2hdRxFK2EV0CvKOD4WflUaLy5rnev92_rjPA_KfTbQn-oSis_2QrZyQjrAyt2RbQZUwpt57EHrJ7DntX2xb56BoU1aTF7jpJeDcKc40MhTFqqtKxZcPAiX_qdeKq/+3+small.jpg" alt="Fear" /></a>
</li>
<li>
<h3>Enter Title 4 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHe877YH-wYKGnDbGF4dpqUoAiP2u3SrF5HKKJ8Iv6HL3KCddiXntInw3d_7vXgQto7G2zYejwGsXIZHrXHO9UI2X2tGZgAn__Wx4NGcT7BVkj4RzBggz6JtsDJtO_q21cW5_4tQ2gTas/+4+big.jpg</span>
<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdZDpeigknGNCvxv0RfG4J0zS4_-bYhOcu6znxzFCqrOH1rXAl_kv9AiEuQ6XLxaa8lME8dn9nl27PeAKllOfRXohAAEhN1QJxtZbZzaZHlSOSbx7n9KuRdjQ5x4JNsHc8Fc8d1Z7DM1V/+4+small.jpg" alt="Farcry" /></a>
</li>
<li>
<h3>Enter Title 5 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpwKquRHizbUsLDzEFSGmSiVlEWXYgpltBFgfsthfbPOgXvFc_RvKrnT_ZJAQLvMoixzzBE4CuF9mBDC22LIMu7FhAEvalUeE-Lg4KQA8PARAItHjk-Ke0YhXJEJZuFYyibAcUDlCi1n_/+5+big.jpg</span>
<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-84pcfrp2W3ewT__uAu5K7nPeN1CTe7zdgFRFURA3EOKnN4WpqjAPsG3eoXCNUBrw92__J0DILyCr-wZXQbqMhgQwkaOwvioEGJ4lZoL7OFjLxCPmIksuGlqNsQOwdP1Fnz3QyG5tiiCb/+5+small.jpg" alt="Farcry 2" />
</li>
<li>
<h3>Enter Title 6 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj3BybtLJZDbVeNYbWcLjycKC2YOan9vowvEb0FodPqPCc398RIHsVmvvH6IPtAuHx2wbCTc1ZITMbMjLgLec6_-f1CN-nMrp12ZFcIG7w8O37wskknAGlAQt9LT_Dw9cQaHj8hk4tVyJz/+6+big.jpg</span>
<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY1ZlKaMbqG5hwk_tPuAZo16cg35488Ro5h2ncxGnVQwC0813FKyBJDvxRmg21QNoQ2_fXb0X8HIoqKCJ2L8MEYB0DCHF486Q99uhcFPuRIqKQmNjTr9sS-SBYQ097leypTnxoky_a-QRT/+6+small.jpg" alt="Crysis" /></a>
</li>
<li>
<h3>Enter Title 7 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lYE-glbfZxa1ioevrKREb8DbRUA89vWCyPZZ8-lU6bVkblLwsb67PQ1r_CErdvax2ZuQD_0FbdKUtY7u43UE0-PvD2ikK6vlM2PUBauYp1NKhxBwBX91z50g5o1KEmkJPCjODV9Rh_s2/+7+big.jpeg</span>
<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXdin3bOsbD4oqImkcgS6ngcsktV64b3w0OmCNQC1h_5hTbvSjGL4UajyecRLYjdvCrsBMtZcmV1lgofIlqRfKsCgM3t_8H5xpOfExLz-T2QFV5y4gBdScXoMS1Qehns3xdENyxhy1rLxD/+7+small.jpg" alt="Tomb Raider" /></a>
</li>
<li>
<h3>Enter Title 8 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLzgbovExeJDqt5UZtiSeKDlt9B12A9_i8d2gVCBA9WXlK02GKlbGJrN8vyvmT5W3Z2o2F7y-RQak5rQl62unFUebvfBB7DnfbNR2SJp-nU4bkaZWqIWj7xKiWZeyZWtdaDE5rhsdEguA9/+8+big.jpg</span>
<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBJZ162qFh3bjZS7LdeZTpFPQMXTD5MAwW4HbR_dZQeGwt2YMVugOxTPTaqC19DB28LAGflM29qDmXw0PYZeESZS8GgOYH3mV6G5Ws_kfWPgtpxLfF42rsdDtdd_F8u-4z9qYeRsP7HNMr/+8+small.jpg" alt="Game" /></a>
</li>
<li>
<h3>Enter Title 9 Here</h3>
<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj32V6iT2_kg-K3GW-qmudR4BQOYiiEz1Sp1cGVN8ndreGcIjTikdWGsP5tsSWSfDiWko1vdii8U8OzGUs6k7S0DzaHJCTeVxgr6DdXjR26Yf9kosO8LoDJUuPEcUF2jqwm9kfYlSdRPIP/+9+big.jpg</span>
<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrWp0IYP2lfDgxe6Lk5ICNBjDWnkqy6nn-yLzDJQDgmqTjxs3v_PUoyNa03-8LKrtICOytrIO_2LCBiDgcnaIAod2YiNJjGJtxkEY-A0NUs1A0-g5JIItbbAqOIYlwj8iE3R3E-LTApAZ/+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
Article "Excellent Content SlideShow+Slider to Blogger/WebSite" protected
Tags:
Featured Post Slider