How To Add Smart Jquery Featured Slider to Blogger / Websites

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery.jcarousel.pack.js" type="text/javascript"></script>

<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySGdhNjeZBqBNcEnUTwmItUm6pb4KA0L9maZnft03sZBrLWk-8ashy6QVdobwUTmC6SQBOhrcrYBBtRXOQcMWvycO9Wi0MkoLcN_o36RSMI-U2O0s9uym7aZo-hb8HwyuVCHm0hOIFHOi/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySGdhNjeZBqBNcEnUTwmItUm6pb4KA0L9maZnft03sZBrLWk-8ashy6QVdobwUTmC6SQBOhrcrYBBtRXOQcMWvycO9Wi0MkoLcN_o36RSMI-U2O0s9uym7aZo-hb8HwyuVCHm0hOIFHOi/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>



<div id="news-slider">
<ul class="jcarousel-skin-tango" id="mycarousel">
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdqUJ3bUuVxO2ln3mS9ZFRcMKjdJSfiozq-ex0em7sK66z75LKrTqztIlBjHPNgYFQxHCanV03vgDj7m3JfxZW4vc8jmLmGAUhaTy8vjka77WrLv7Hh8mj_EBoa5TNwrI6ndqxfeHGx2QF/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3_5tlBIkwdtzIHATE9mlMTxytSgk2x5eF4Qt6Omp8C9IlqX9Pbw1tvbHexqY7E4huWVpLW9a8E4luFb_vyg3oFZRZsqjy6mF3YSVVv8J31TWfcg1smgl2pd6NgpQdrJjwj5YhjU5_bLS/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFfYHl-Z8_U669tddOu3ZhmhMvcGutNoI6_sgknVdg6k2OVwsjxWC7GtYefFhmca7O0v0_TksaXT2h-D88QdZMOFNPuSgMKir0kAUJdABYEFhH-h4qhMrl-SP92b9lB9GXf2urhheylQY/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFwIw362RSKmcjJKCJmXkn4Y4unsN08LSXtlErCiME47Qv_5w_ZhVFkrxvF08vqKiW-ewhuVtFLvr5aOXutuAOGHlSaZpXL5cHbuHlspYx0YpOTg2lkTa5yeRe9j_XERtdZizRtXfnMvlW/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width="307" /></a></li>
<li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWTOiR1pF5COMe4tCirAFHBR8nzeicRhC6eR_sx0RXeV2O5rOGH9jEthgghybb0tgKI4tDODUeZOxbwTR2F_o-P-SEkxU7iEOKy737lmd3eZD0LSwHzuUayh9dTdS0ur854X88epoDBOh/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width="307" /></a></li>

</ul>
</div>

<div class="clear"></div>