Add Tabbed Menu

Hi friends, you must have seen many blogs with an array of tabs at the top, giving their blog a more professional look. Now you too can add these tabs and give your blog that professional look and feel.

This post will help you add a tabed menu to your blog (as you can see mine - Home, Concept Cars,.. etc). This widget, was a default feature to my present template. To make it better, you need to have a bit knowledge of CSS and HTML.

To add Tabbed Menu to your blog, just go through the following steps.

Step 1 :
Go to your template-> Edit HTML and "expand widget template" [select the check box].

Step 2:
Before making any changes save a copy of your template. To save it to your desktop, just click the link 'Download Full Template' (at the top).

Step 3:
Now first, we need to add the required CSS. Find the tag :
]]></b:skin>

Just before this tag (i.e. above this tag) Copy-Paste the following code :


/* Tabbed Bar               */
    .tabbed-bar{
        background:url() top left no-repeat;
        height:26px;
        line-height:26px;
        float:left;
        display:block;
        width:auto;
        padding-left:8px;
}
    * html .tabbed-bar, * html .tabbed-bar div{display:block; float:left;}
    .tabbed-bar div{
        background:url() top right no-repeat;
        height:26px;
        line-height:26px;
        padding-right:8px;
    }
    .tabbed-bar a:link, .tabbed-bar a:visited{
        color:#ca0002; text-decoration:none;
    }
    .tabbed-bar a:hover, .tabbed-bar a:hover{
        text-decoration:underline;;
    }


Step 4:   
Now we need to place the tags. Find this code in your blog :

<div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>

Every template (except default blogger templates) may or may not have this code. The point is that the tags need to be just below your Header. But you can always place it according to your choice.

Just below the above mentioned code, paste the following code :


<div style='font-size:15px;'>

<a class='tabbed-bar' href='http://carsonroll.blogspot.com'><div>Home</div></a>
<a class='tabbed-bar' href='tab2'><div>tab2 name</div></a>
<a class='tabbed-bar' href='tab3'><div>tab3 name</div></a>

</div>


The tags can be added and removed according to your choice.

You can Preview your template and customize it accordingly. After making it your way, Save the template and view the new look of your blog.

You are DONE.

Go to Useful widgets.