Posted by KaiseRCrazY on 30th September 2009

Use Tabs in Your Blog!

Some Premium WordPress themes have jQuery tabs in the original. But if you have a non-premium theme you can easily apply this tabs in your theme. You integrate 1 js file and 1 css file in your theme and some code :) Let’s Begin…

Here is the code and files;

Firstly Download this file for the begining. There are 2 css files in this zip archive. Upload these files in yout theme directory and just add these code in your themes header.php above the </head> tag;

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/domtab.css" media="screen" />

After that we will make our tabs. Just copey this code and paste it into your sidebar;

<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>Insert contents of the first tab here,
e.g. The code for a plugin.</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>Insert contents of the second tab here.</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>Insert contents of the third tab here.</p>
</div>
</div>

You can make changes for your interests. That’s All. Thanks to Blog-oh-Blog for this code.

  • del.icio.us
  • Digg
  • Facebook
  • FriendFeed
  • Reddit
  • StumbleUpon
  • Technorati
  • PDF
  • Print

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

No comments yet!

Post your comments