How To Add Smart Jquery Featured Slider to Blogger

How to Install This Widget on Blogger?

Steps...

A. Adding Script Code

B. Adding HTML Code


Adding Script Code


In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.


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

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/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/AVvXsEjMURywUGVzcChe_2Orlnq9aVTw3wP_sRIocY3OaZB0sQxY11i6PO4ANAWUgo16ilvPEcFals8Dh-ETOMM8ZWOWQTR-Q-A-hMTOTzWd0Hx2CUMo42qNbU3KvxQ2mpb5asjBIq97Au4nGK7h/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/AVvXsEjMURywUGVzcChe_2Orlnq9aVTw3wP_sRIocY3OaZB0sQxY11i6PO4ANAWUgo16ilvPEcFals8Dh-ETOMM8ZWOWQTR-Q-A-hMTOTzWd0Hx2CUMo42qNbU3KvxQ2mpb5asjBIq97Au4nGK7h/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>

And now click Save Template



Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<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>

And now click Save

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/AVvXsEjwRd8D7rcObBXI4CmX-gHr9BwhFEnkdcTpxqRWDJX-3EL_kAwfPv4z8Q4d4uA6DgZvJ2tVPQC8gtqfcNqgoxEfnH6yUCOrnZfWdXAPviYEznE6NaCRTsz9nxx7hkw7SbdxjbklSz20iva1/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgSMyiUYqaEzaqz46iG8xIl-rzdoYBF8yHEbC7W-0dH8EefJOPPouLUfhRmIPnWVKrp5IbFscv9OlaZMfNJLxmjDSWFjf4HqBWCF2ZxaR6YikjL55VkDmWY55n94ec1WZH4UEQB-gptVe/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoygfJGK7vliBaJRIZ9DzdguhmBTy1wqlaqGA0BElMmB7ZzqlRPO8STA3LJ_q9Qdac-isZtQCZFeqYEBhN6XMP89GdDwYKT0F-LzkoedNQL2-4CqczFNp-lvxYT2q1P-thBGD7nZBTEZw/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixK3d3mN8cxT1WuR3apNlFJ0t-Lw3SqJNTVcbbbUcPoRKyR5GEbWeParKG-aULWDtIhBvneYsZIkpwhH2iL76M-2gPu25_7-4Y-D4TmiFKO1xtz5eX11Wi8L1bq49lN4twx1lFkWeahMeV/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW3xVS_0Sp7bUSmiex5FohK9B8iJelwQdD8MBGIocjzQy3xevjcTpBAdzmFTJz1fV-I4Vxq0o0htOLN4P3p1aRFtp6KFEaD7-UKEQTAetJ5_yOZMqXbHPVmHURBMN764uqziw_87c-tpCj/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.