3D T-Shirts | Facebook Accessories | Amazing Software | Mindblowing HTML5 | 3D CG Girls | CSS3 2012 | Funny Blogging Tips





Pin It

Tabbed Content Slider For Blogger And Website

Posted by Aakash Doshi On Friday, November 18, 2011


It will be a great idea if you are able to show your latest post's | Recent post's | Link's | Contact's of your own choice that you want your visitor to get an eye on. Gayadesign came up with an idea of tabbed content slider which has ability to switch through links and contents with ease.I have converted it to a much simplified version so that you can easily implement it on your blogs.I will suggest you to place this slider below your page navigation buttons for better user interaction.

Take a look at the Demo below
Cooooool...
Blogger Tutorial
Part I
1.Login to Blogger Dashboard
2.Goto Design
3.Edit HTML
4.Search <head> (ctrl+f)
5.Paste the code below <head> tag

<script src="http://code.jquery.com/jquery-latest.js"></script>

6.Save Template.

Part II
7.Goto Design
8.Add Gadget (At your suitable location or after adding you can even drag and drop)
9.Select HTML/javascript
10.Paste the code below

<link href='http://www.gayadesign.com/scripts/tabbed/css/tabbedContent.css' rel='stylesheet' 
type='text/css' />
<script src="http://www.gayadesign.com/scripts/tabbed/js/tabbedContent.js" 
type="text/javascript"></script>

<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg'>
&nbsp;
</div>
<span class='tab_item'>
Latest posts
</span>
<span class='tab_item'>
Top posts
</span>
<span class='tab_item'>
Humour
</span>
<span class='tab_item'>
Links
</span>
</div>
     
<div class='slide_content'>      
<div class='tabslider'>

<ul>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
</ul>

<ul>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
</ul>

<ul>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
<li><a href="your-link">your-title</a></li>
</ul>
</div>
</div>
</div>

11.Change the Red font with your requirements
12.save 
Like Us to get daily updates on your facebook wall :-)