Tabs based Featured Content Slider for Blogger
Installation
Step 1
Go to Dashboard > Layout > Edit HTML. Download template for backup. Add following code just BELOW]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
/* Feature Content */
#feature-wrapper{
float:left;
width:645px;
padding:0;
margin-bottom:20px;
}
.slide{
padding:0;
margin:0
}
#featured{
float:left;
width:480px;
height:310px;
padding-right:165px;
margin:0;
position:relative;
overflow:hidden;
background:#474640;
-webkit-border-radius:8px;
-moz-border-radius: 8px;
border-radius: 8px
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:430px;
list-style:none;
padding:0;
margin:10px 0 0 10px;
width:195px;
height:290px;
overflow:auto;
overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
padding:2px 0 0 13px;
font-size:12px;
color:#111;
}
#featured ul.ui-tabs-nav li img{
float:left;
margin:2px 5px;
background:#fff;
padding:3px
}
#featured ul.ui-tabs-nav li span{
font-size:12px;
line-height:18px
}
#featured li.ui-tabs-nav-item a{
display:block;
height:70px;
text-decoration:none;
color:#474640;
background:#dfded8;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#c2c0b5
}
#featured li.ui-tabs-selected{
background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxsTDvEGffPziMkkmk4SuCU9ZJRn4dcaFccC82_Ko99SOII6IuGhddE0jQDKsEmx1ajvjdv7rwtgm5ZPvqEfFmQdHELTMGwMX4Iu5yqyaVm_sts_DTFtNtTVQBaH9WK-hjRmUTUR80GI/s1600/arrow.png' ) center left no-repeat
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#c2c0b5
}
#featured .ui-tabs-panel{
width:425px;
height:290px;
position:relative;
padding:0;
margin:10px 0 0 10px;
.top:10px /* IE */
}
#featured .ui-tabs-panel img{
width:425px !important;
height:290px !important;
}
#featured .ui-tabs-panel .info{
position:absolute;
bottom:0;
left:0;
overflow:hidden;
height:90px;
width:425px;
background:#111;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%; /* IE */
}
#featured .ui-tabs-panel .info a.hideshow{
position:absolute;
font-size:11px;
color:#111;
right:10px;
top:-20px;
line-height:20px;
margin:0;
outline:none;
background:#dfded8
}
#featured .info h3{
font-size:20px;
font-family:"Allerta" ,arial ,sans-serif;
padding:5px 10px;
margin:0;
font-weight:bold;
overflow:hidden
}
#featured .info p{
margin:0 10px;
line-height:14px;
color:#fff
}
#featured .info a{
text-decoration:none;
color:#cd3301
}
#featured .info a:hover{
text-decoration:underline
}
#featured .ui-tabs-hide{
display:none
}
</b:if>
</style>
Step 2
Add following code just ABOVE </body>
<b:if cond='data:blog.pageType != "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</b:if>
Save your template.
Step 3
Now go to Page Elements > Add a gadget > HTML/JavaScript and add following there and save.
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt="testing" height="60" src="http://www.mobigod.com/wp-content/uploads/2010/07/How-to-Check-Your-Account-Balance-on-Vodafone-Idea-BSNL-Reliance-GSM-Aircel-Airtel-Tata-Docomo-networks.jpg" width="80" /><span>Mobile Balance</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt="testing" height="60" src="http://2.bp.blogspot.com/_tbHfaj1A058/THJK8Y2zSBI/AAAAAAAALjw/h-wCMIxEUig/s1600/pyar+hua+ikrar+hua+hai+1.JPG" width="80" /><span>Rain Songs</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt="testing" height="60" src="http://3.bp.blogspot.com/_tbHfaj1A058/TSMgX-M1KWI/AAAAAAAAL7Q/AW6gc9IP1bI/s1600/mafia2.jpg" width="80" /><span>Top PC Games</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt="testing" height="60" src="http://1.bp.blogspot.com/_tbHfaj1A058/TSMgWZPUPuI/AAAAAAAAL7M/RGj9UwEOdis/s1600/film%252Bcast%252Bcrew1.JPG" width="80" /><span>Upcoming Movie</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt="testing" height="290" src="http://www.mobigod.com/wp-content/uploads/2010/07/How-to-Check-Your-Account-Balance-on-Vodafone-Idea-BSNL-Reliance-GSM-Aircel-Airtel-Tata-Docomo-networks.jpg" width="420" />
<div class='info'>
<h3><a href='http://www.mobigod.com/how-to-check-your-account-balance-on-vodafone-idea-bsnl-reliance-gsm-aircel-airtel-tata-docomo-networks.html'>Check Mobile Balance</a></h3>
<p>How to Check Your Account Balance on Vodafone / Idea / BSNL / Reliance GSM / Aircel / Airtel / Tata Docomo / Virgin Mobile / Spice networks?...<a href='http://www.mobigod.com/how-to-check-your-account-balance-on-vodafone-idea-bsnl-reliance-gsm-aircel-airtel-tata-docomo-networks.html'>More</a></p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt="testing" height="290" src="http://2.bp.blogspot.com/_tbHfaj1A058/THJK8Y2zSBI/AAAAAAAALjw/h-wCMIxEUig/s1600/pyar+hua+ikrar+hua+hai+1.JPG" width="420" />
<div class='info'>
<h3><a href='http://film-cast.blogspot.com/2010/08/evergreen-bollywood-songs-on-baarish.html'>Evergreen Bollywood Sawan Songs</a></h3>
<p>Evergreen Bollywood songs on Baarish, Saawan, Rainy Season with video...<a href='http://film-cast.blogspot.com/2010/08/evergreen-bollywood-songs-on-baarish.html'>More</a></p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt="testing" height="290" src="http://3.bp.blogspot.com/_tbHfaj1A058/TSMgX-M1KWI/AAAAAAAAL7Q/AW6gc9IP1bI/s1600/mafia2.jpg" width="420" />
<div class='info'>
<h3><a href='http://www.systemrequirements.in/'>Upcoming Top PC Games</a></h3>
<p>SystemRequirements.in is a site where you can get the most accurate reuirements for PC...<a href='http://www.systemrequirements.in/'>More</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt="testing" height="290" src="http://1.bp.blogspot.com/_tbHfaj1A058/TSMgWZPUPuI/AAAAAAAAL7M/RGj9UwEOdis/s1600/film%252Bcast%252Bcrew1.JPG" width="420" />
<div class='info'>
<h3><a href='http://film-cast.blogspot.com/'>Upcoming Hollywood / Bollywood movies</a></h3>
<p>Complete discription of top upcoming movies both from Hollywood and Bollywood...<a href='http://film-cast.blogspot.com/'>More</a></p>
</div>
</div>
</div>
Customization for Step 3
Red > Image URL
Pink > Image alter text
Blue > Post URL
Green > Title of Posts
Bold and italic > Description of posts
Note: To fit to your template you have to change the width/s given in the Step 1.
Other Versions of Featured Content Slider
No comments: