Scribd
Upload
1K views

Trick To Create Tab View Menu For Blogger

This document provides instructions for adding a tab view menu to Blogger blogs in 9 steps: 1) Login to Blogger and edit HTML, 2) Find and insert CSS code before the closing skin tag to style the tabs, 3) Change CSS code as needed, 4) Insert JavaScript before the closing head tag, 5) Add a tab view HTML element where desired, 6) Insert tab code with tabs and pages within the element, 7) Initialize the tab view script, 8) Notes on customizing colors, sizes and adding more tabs are provided. The goal is to create a tabbed interface for content on Blogger blogs.

Uploaded by

imran49
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

Trick To Create Tab View Menu For Blogger

This document provides instructions for adding a tab view menu to Blogger blogs in 9 steps: 1) Login to Blogger and edit HTML, 2) Find and insert CSS code before the closing skin tag to style the tabs, 3) Change CSS code as needed, 4) Insert JavaScript before the closing head tag, 5) Add a tab view HTML element where desired, 6) Insert tab code with tabs and pages within the element, 7) Initialize the tab view script, 8) Notes on customizing colors, sizes and adding more tabs are provided. The goal is to create a tabbed interface for content on Blogger blogs.

Uploaded by

imran49
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Trick to Create Tab View Menu for blogger

Example of Tab Viem Menu :

Trick to Create Tab View Menu for blogger :

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

http://BloggerTrick.com
{
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. To get html color code
see HERE
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 />

http://BloggerTrick.com
</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 pink text(350px) Is size of the tabview.
- The green code is the main menu text
- The blue 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.

Share Your Blogger Tricks or tips To Bloggers in World !!!!

http://BloggerTrick.com

You might also like