28 April 2011

Tabs based Featured Content Slider for Blogger

Advertisements

Content sliders are not new to you as they are popular and can be seen in most of the websites. This content slider is taken from the Pre Live Mag template. It is a new and elegant slider that shows small tabs beside main post content.


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 != &quot;item&quot;'>
/* 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(&#39; http://3.bp.blogspot.com/_aAjcAMHOGT4/TKgvzMEYPUI/AAAAAAAAE-o/t7KKKMyOelo/s1600/arrow.png&#39; ) 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:&quot;Allerta&quot; ,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 != &quot;item&quot;'>
<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(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 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
  1. Simple jQuery Featured Content Slider (with numbers to navigate)
  2. Content Slider with Read more link

Related Posts

16 comments

May 17, 2011 at 10:37 AM

Hi,can we find the top query of the day,of a blog or website.not for our blogs,can we find for any blog/site.

May 18, 2011 at 11:28 PM

Most of the time they have it as Top Search/query

May 20, 2011 at 6:41 PM

Thank you very much

October 14, 2011 at 12:54 AM

thanks i will try for my blog

October 19, 2011 at 10:59 AM

nice one but how to do apply this without tabs

October 19, 2011 at 9:49 PM

Hi premium

Tabs looks good and give the unique look to this slider. There are other sliders without tab as given in the bottom of main post. Check them.

March 30, 2012 at 1:51 PM

When I change the #featured{ margin to move it to the center of my page (to 0 320px 0;) the links stop working. Is there anything else I have to move, to make the links continue to work?

March 30, 2012 at 4:08 PM

How can you change the color of the little arrow pointing out of the tab, and the background of that arrow?

March 31, 2012 at 12:30 AM

Hi Curtain Up Cookie Design

First about arrow color and background. You can change it in Step 1 code. Just change the value at
background:#c2c0b5

When I change the #featured{ margin to move it to the center of my page ....> Keep the old code do not modify margin

August 6, 2012 at 10:52 AM

I have installed the slider in the center of three columns on my website, but it stays to the left of the column. How can I center it in the column? Thank you.

August 7, 2012 at 1:09 AM

Hi Curtain Up Cookie Design

That's very nice template you are using. Which one is that? I want to share it with our users.

Now solution for your problem. In step 1 code

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
/* Feature Content */
#feature-wrapper{
float:left;


CHANGE

float:left;

TO

float:center;

August 7, 2012 at 6:56 PM

Thank you. The template says it is
Name: Simple
Designer: Josh Peterson
but I had it designed by redbud Designs.

I changed the float to "center", and even tried "right", but it still stays on the left. Any idea why it might be doing that?

Thanks.

August 7, 2012 at 9:36 PM

you need to change every float:left to float:center in step 1 code.

It is present I think more than 3 times.

August 8, 2012 at 6:51 AM

Oooh. Thank you!

August 8, 2012 at 9:40 AM

Thank you. It works when I change them all to "right," but it stays on the left when I change it to "center".

August 9, 2012 at 12:10 AM

any way.. your problem is solved.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More