domtabs Have you ever seen blogs where the popular posts, top commentators, and blogroll are all tabbed into one small area? Those blogs are using DOMtabs.

DOMtabs is a free script and by using the guide below, its quick to install. I’ve also created a simple stylesheet that you can use to easily restyle your DOMtabs.

You can see DOMtabs in action in the sidebar here on Pro Blog Design. It is a very user-friendly way of saving space on the page, and cutting your clutter.

Lastly, this guide is written with WordPress in mind, but the script can be used anywhere. If you’re on another platform, try applying the steps to your own platform, or read the help on the script’s site, and comment here for help if you need it.

5 Step Guide to Install DOMtabs

  1. Download the script from the official site, and unzip it on your computer.
  2. Upload the domtab.js file to your theme folder in WordPress.
  3. Download pbd_domtab.css (Right click, “Save Target As” or “Save Link As”), and upload that to the theme folder as well.
  4. In header.php, paste the following above </head> :
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" />
  5. In sidebar.php, or in a widget if you use widgets, paste the following where you want the DOMtabs to go: 
    <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>

And that’s you done. If you want to add another tab, just make another copy of one of the sections. There is no limit on the number you can have.

You can customize the colors and appearance by editing the pbd_domtab.css file. The lines to change have been highlighted at the top of the file.

If you have any problems, just comment below and I’ll help out.

Update: A lot of people have issues with parts of their page disappearing when you click an in-page link (e.g. the /post/#comments link). Thanks to Mike Smith for sharing a solution to that problem!

Enjoy this post? You should follow me on Twitter!