How To Create Tab View in Blogger Template ?

How to show different labels or post in blogger as Tab View. Trick blog has given a good solution for this.

Create Tab View like below image for your blog template with easy steps, follow below

Steps to create tab view:



1. Login to blogger, go to "Layout --> Edit HTML"

2. Then find this code ]]></b:skin>

3. Insert the below code before ]]></b:skin> or in CSS tag.



div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Width top main menu */

text-align: center;

height: 24px; /* Height top main menu */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Top Main menu border color */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Top main menu font */

font-weight: 900;

color: #000; /* Top main menu font color */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FF9900; /* Top main menu background color */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Content Border color */

overflow: hidden;

background-color: #FF9900; /* Content 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;

}





4. You can change the code according to the text explanation.

5. The next step is put the code below before </head>



<script src='http://howtoraj.googlepages.com/tabview.js' type='text/javascript'/>





6. Then "save" it.

7. Go to "Page Elements" menu

8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.

9. Insert this code :



<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">

Tab 1

Tab 2

Tab 3

</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>





Tips To Remember :



- The number or the blue text(350px) Is size of the tabview.

- The green code is the main menu text

- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.

- To add more menu, see on the blink code. Add the code under it.