How To Create Menu Tab View on Blogspot.com

On this occasion I will try to share tips on how to create a Tab View Menu as shown below. Menu Tab View widget is able to save our place, so that we can include more widgets anymore. 

Here are the steps.

1. Log into your blogspot Dashboard, then select Design then Edit HTML. 

2. Use the search ( Ctrl+F ) and find this code "]]></b:skin>" without the quotation marks. Do not forget to check the Expand Widget Templates

3. Then enter the following CSS code right above the code ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Main Menu Top Width */ text-align: center;
height: 24px; /* Height Main Menu Top */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Menu border color*/
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Main Menu Top Fonts */
font-weight: 900;
color: #000; /* On the Main Menu Font Color */ 
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* On the Main Menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Main Box border color */
overflow: hidden;
background-color: #FF9900; /*Main background color box*/
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Note : You can set the display view menu tab on the texts of the blue

4. Use the search tool ( Ctrl+F ) and find the following code </head>, then put the following CSS code right above the code </head>

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

Save, and Edit HTML process is completed

5. Return to your blogspot dashboard, and select Design then Page Elements. Then on the sidebar and then select Add Gadget HTML / Javascript, and attach the following script code in an Gadget column HTML  /Javacript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note: In the code pink ( 250px ) is the height and width of the tab view. Code blue (<a>Tab 1</a>) is existing text in the Main Menu. And the black bold code (Tab 3.3 <br />) is the content of the Tab View ( you can fill it with links, images, banners, scripts, etc. )

Good luck and hopefully useful for you.

Thank You

Posted in: Tutorial Blogspot