How To Add jQuery Featured Content Slider to Blogger

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/n17-content-slider/n17-content-slider-016.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-017.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-018.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-019.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){
$(".glidecontent").hover(function() {
$(this).children(".glidemeta").animate({opacity: "show"}, "slow");
}, function() {
$(this).children(".glidemeta").animate({opacity: "hide"}, "fast");
});
});

//]]>
</script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</script>
<script type="text/javascript">
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "glidercontent",
contentclass: "glidecontent",
togglerid: "togglebox",
remotecontent: "",
selected: 1,
persiststate: true,
speed: 300,
direction: "leftright",
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</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">
#glidercontent{
margin:0px 0 5px 0px;
font-family:Georgia,Century gothic, Arial,Tahoma,sans-serif;
}
.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 670px;
height: 300px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
margin:0px 0px 0px 0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7eKrQfM0N1KRhyphenhyphenZFCDHAj_Gi3RCdR5LDsLw_jo73BChbPu7PST2D2YOslVJiL2YBzP_1zJPDx1U_22jl4ZC1zFZEcZJxEbjhW8asuFGKBWCY5DA2skn94eG-FHh_CbqlO9aSzH-fRel37/) repeat-y;
}
.glidecontent{ /*style for each glide content DIV within wrapper.*/
position:absolute; /* Do not change this value */
padding:0px 10px 0px 10px;
width:640px;
color:#fff;
margin:0px 0px;
height: 230px;
background:#ec03d9 url() no -repeat;
overflow:hidden;
float:left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
padding:5px 0px;
font-size:18px;
font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color:#fff;
}
.glidemeta{
height: 80px;
width: 650px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDS7cmMVk3UK49wbpNhmPzif29NLLn9WoypgcYEn1BwUJPBy_BBHKP6p2dGGRYpd3QaJ3rNvYSfE3V697yS-3muqs6-vLiIITJVH7LR_wQgs17DnKf3rBWibn3_tsnBq3Z2vx7Lzau4m_r/);
top:164px;
line-height:14px;
color: #fff;
font-size:12px;
overflow: hidden;
display:none;
border-top:1px solid #000;
}
.gnav{ /*style for DIV used to contain toggler links. */
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
height:38px;
z-index:150;
width: 670px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSxyezFamlZzukqgO1gGiSpV2Ev-mgZA2Tu1OWoE0qGh7KMXw8pEj4u5FTEc4-GaJDhTmU5HUZXyl-RqNV28HBna2UhDzRIJNuP7aMA0Didqrz3CnG0b5p6QYfY4AOi3WlGavELBGJVOu3/);
}
.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}
.glidecontenttoggler a.prev{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
top:6px;
right:35px;
position:absolute;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyytzWkpbLbHFau8Zo0ljioDQLfIWISBuev1ctRud23WaDoTC0hRdo8hGY3dIdnyKw0DnnNUas5N76jf15_-LxqIAyXm4u57P3NrsL8zsVaivC_AbFFFc9fcrg8Kspu0ixI0vx11LxXSGD/) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12v6LJrlS_hLwu2-N55Sb7mz8ArRBIwcuUCkfqxiwrNOSq1upBEqf5K83tGDlvqD9_Woe7B25UIewkUwxzyxaq6YjbK7GPDqHspufa4YRXOaR_Fvj_AZcnMr67miSRRyE3zZG_0Q6BDu3/) bottom;
width:36px;
height:25px;
position:absolute;
top:6px;
right:5px;
}
</style>



<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>


<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCNioHNlJyl7doyY3o6LsJBjxLxBL1RHh4dpZMBClyJKX8_-OoLe0FvxNMTirjZe_UwCzQDAW7eghX21nj0zSSAd3VlSGi3Fkn-BcuqpCM0HEVPm6EZ205bNUEiJ5Os_J3F2-0KkJ12ySe/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5PAerk5ZFdiz1_A3xUEicBxHuUGlTeotXrFsgbEIxbh9cjsKsNOZWsFpoZRnDesX37PgJAVqmwmGSJvMynQ20rpK93AlNv39fRt7Jggp1x83USnr81WNjo3pW8ddfw5O5WXkCLbNmVXZg/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLIC0C_OA4ze91BV-u-dHm_zEBNeomgNRWWxzSy1SU0vkmAj6ayG1bNZuAKHD-zCUXmrCKwnl9UNGfVXBZIRPXUFG_zL_EzBJuzgtxQuK3ZxSGQiCbQ9SPlbERp4xKcJi8YQ1JUaltcHp/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CKvT5TQLCaKk11mu_v6jMPel4JoXhkA29GI67J28QcR97YCdq8thjCCcFR3iHE8weBJ8YjJKs6d1fc-fnfk6zNLSzG7Xp-RsInxyS5sTDjmFI386xHuLyJ9fFZqidAIAnbV9LaDWSwQo/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="#" target="_blank" title="LINK-TITLE-HERE" target="_blank">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-C-4zNXunMjwDZ3F0JmqMeCqUpgdN75frQx35XMoeK-QeIDhMD5BC-3sP7hlcih0KaPVy-gccVkgCRafb18cvhgbPH7SXrSdLzjnQ4_0mwXPMh8K0zAy5rdWTSP0-fbFwOD1TqvJZN7e/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="250"/></a>
</div>

</div>

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