6 How To Add Smart Jquery Featured Slider to Blogger/Websites

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/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>

<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/AVvXsEhX8tWTgk_WNM3oFEpI7zds8-xGp34UgNMpnrV_Q55cX8J-QgqjJlslga77MrZcj91E-pQ8ShOCoa9wWqi8ScK-BUtUa_8iTgeRU6TwE3OEZ4muZv31gHRsaIOfpA24uyOrD1EexiCH9Ib2/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/AVvXsEhX8tWTgk_WNM3oFEpI7zds8-xGp34UgNMpnrV_Q55cX8J-QgqjJlslga77MrZcj91E-pQ8ShOCoa9wWqi8ScK-BUtUa_8iTgeRU6TwE3OEZ4muZv31gHRsaIOfpA24uyOrD1EexiCH9Ib2/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>

Now click Save Template

STEP #3 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:.

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

NOTE : Replace,


SLIDE-X-LINK-HERE with your real featured posts links.


SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.


Look at the example below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_LlolVtVruFuRTSiRFdn1PibbSBxOMAaA-u84MjVRBf8iSUpm1yb29ot1O481La9B7MRd1hktg4-_6yMbgisfZABnOoVVUr4wIZltH5KGcalVIxqOiRK0RREfve7dvPQog_HFT36_BEC/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawRM2ijcl29IP1853ArinFrk4UFrQ2Uz1GI6aOf5vFuJN6OSK1-3wFi8HBjG24nI6zOuAS7CxcP8JPO6C9eJjE_S2Xzcu1QOADS1u7bpw1labagFFmW8UHaTnfT3xPRogXBb9wcilE1L9/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNhAPm3CthloM7O-LIJ6QvnNjIKkL8ZGUcO8feLPiPBL2sAcAZuY17ckM_DLV0Hu_DuJUKx5qD-K7eh3cVb6uH72Cdws3fz7D3Hw6vImgkwB1nZ84pxUHIqNnxwqQ0zt0fJUsvnQ-wNWL/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JkLCqk6XyawgfFDnTh9aMMIhESvIAYcVCRlYvjbMJfJ8odKTVxYJX6G4bt2rxapkWMUvT5CksYhqkXn-MVm1Tx_z-JJxGm9MEL0PvOi4tq_U0JLAqZGTr10rWxmU3fKITegAi8Ecz96c/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK1sq1pjvi8ZwTL0Ys3uOd_bnIjZWogbykcG-zhJaKPRh4PwggGZwU0D0ZbiDYFxFA6pwD1Jj_cqBFtFY-rtLXK6KT0FX7rgHDPN4AZ1tLAi70IbHgLTznndKBZ_K26F6IE3VQmPZr0rAq/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.