By using the tabs, you can adjust the content of postings like pages. So readers can more easily understand the contents of the postings.
Other than that which makes tabs should be implemented in your blog or website is that tabs can contain a lot of content with a place that is relatively narrow.
So you have to try it out if your site or blog consists of many materials and media.
I myself often use the tabs to make my web page can load a lot of things and categories so that there are still many empty places in my blog pages that I can use to load the other postings, advertising or anything that I want to put on my blog.
If you want to create tabs using css and javascript code, you can try the following way:
1. Downlod The JavaScript and css code Below :
2. Add the following code into Your Header ( Before /head ) to load the javascript and css code.
<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/tabs.css” type=”text/css” media=”screen”>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/tabber.js”></script>
3. Add the following code to add tabs into your page or post or bar ,etc.
<div class=”tabber”>
<div class=”tabbertab”>
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>
<div class=”tabbertab”>
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class=”tabbertab”>
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
For Online Demo:
And Below the screenshot:
Good Luck.
Hopefully Useful
Related posts:
- An Easy Way to Create Thumbnail Post with Timthumb and get image Function
- An Easy Way to Create a Menu with Rounded Corners Using Images
- An Easy Way to Create a Menu with Rounded Corners using css
- An Easy Way to Create a Dropdown Menu using css
- How to Create Elements Transparency with Opacity in CSS3
