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'>
</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 on Facebook to get daily Amazing Things |

