How to Create Tab View Menu

Tab It's been a long time I did not write about the tutorial blog, a few weeks I always write about the news and wonders of nature. OK, it's time we tried to return to the tutorial blog, and which we will discuss today is how to create a  tab view menu on the blog.


Tab view menu, very efficient, because it contains many titles in one place. In addition to saving space, tab view menu also looked very good. Creating tab view menu requires a lot of HTML code, so my advice, you should backup the template before you make the tab view menu.


To make it, please follow the steps below:

  1. Login to blogger with your ID.
  2. Click Layout.
  3. Click Edit HTML.
  4. Then look for the code ]]></b:skin>
  5. Put the following code before the code ]]></b:skin>

    div.TabView div.Tabs
    height: 30px;
    overflow: hidden;
    div.TabView div.Tabs a
    float: left;
    display: block;
    width: 98px; /* Width Main Menu Top */

    text-align: center;
    height: 30px; /* High Main Menu Top */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Top Menu border color */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Main Menu Top Fonts */
    font-weight: bold;
    color: #000; /* Main Menu Top Font Colors */
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    background-color: #E6E6E6; /* Background colors on Main Menu */
    div.TabView div.Pages
    clear: both;
    border: 1px solid #BDBDBD; /* Main Box border color */
    overflow: hidden;
    background-color: #E6E6E6; /* Main Box background color  */
    div.TabView div.Pages div.Page
    height: 100%;
    padding: 0px;
    overflow: hidden;
    div.TabView div.Pages div.Page div.Pad
    padding: 3px 5px;

  6. Then place the following JavaScript code above the code </head>

    <script type='text/javascript'>
    function tabview_aux(TabViewId, id)
      var TabView = document.getElementById(TabViewId);

      // ----- Tabs -----

      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

      var Tab = Tabs.firstChild;
      var i   = 0;

        if (Tab.tagName == "A")
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
      while (Tab = Tab.nextSibling);

      // ----- Pages -----

      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;

      var Page = Pages.firstChild;
      var i    = 0;

        if (Page.className == 'Page')
          if (Pages.offsetHeight) = (Pages.offsetHeight-2)+"px";
 = "auto";
  = (i == id) ? 'block' : 'none';
      while (Page = Page.nextSibling);

    // ----- Functions -------------------------------------------------------------

    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }

  7. Save Template.
  8. To make the tab view menu, please return to the Layout.
  9. Select a Page Elements .
  10. Click Add Gadget .
  11. Select the HTML / Javascript, then enter the following code :

    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">


    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>

    <div class="Pages" style="width: 300px; height: 250px;">

    <div class="Page">
    <div class="Pad">


    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />



    <div class="Page">
    <div class="Pad">

    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />


    <div class="Page">
    <div class="Pad">


    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />



    <script type="text/javascript">

  12. Then Save.


  • For red code is the width and height of the menu, please adjust the content. 
  • Code green please fill in the title of the menu
  • And the color purple, the contents of the menu. You can add links, images, banners, etc..

Related Posts


September 4, 2009 at 10:48 PM

nice info sobat, thanks ya, salam sukses selalu

September 7, 2009 at 12:17 AM

BV dah tak senggol, senggol balik tanpa tanda dollar ya bros

September 8, 2009 at 2:17 AM

nice info.

September 8, 2009 at 11:50 PM

Bro, kalau code ini diterapkan di wp, bisa jalan ga yach?? cakep niy code..

September 9, 2009 at 1:05 AM

@heru : kyknya ga bs deh men, kan wp ga bs kode javascript..

September 11, 2009 at 2:01 AM

just what im looking for! THANK YOU!

September 12, 2009 at 1:11 AM

Tab view menu is so useful. I think I'll use it if I've placed adds in mine. There's still empty area now.

October 10, 2009 at 1:48 AM

i've used it, but sometimes i faced error when i click on tabview... dont know why.

January 17, 2011 at 4:16 AM

Thanx bro.... infonya sangatberguna buat sya...

February 5, 2011 at 7:22 PM

Terima kasih sangat berguna info ini...

February 16, 2011 at 4:44 PM

Hi - Thanks ever so much for an intuitive and well presented blog. I really enjoy using these tabs and I want to use two sets on one page but only one set works. Presumably I have to rename functions/variables. Could you please possibly tell me what should need to be changed in order for the two sets of tabs to operate on the same page. Thanks in advance!

August 25, 2011 at 8:58 PM

Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

May 28, 2012 at 9:40 AM

Thank's di bookmarks dulu ya.. Izin..

Post a Comment


Recent Comments

Reader Community

Recent Posts