How to Create Tab View in Blogger Blog

Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)

Here is Tutorial how to create a 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 red text explanation. 
5. The next step is put the code below before </head>

 

<script src='http://superinhost.com/trikblog/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;"> <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 :
- 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.
Good luck every body.

Related Posts by Categories