Create View Tab

What is the View tab ...? See Demo Here, see the Content in the right side bar. In the View tab we can show links, Banner, comments, posting articles, etc.

How do I it?:

The first step:

• Login to Your Account Blogger.com
• Click ”Layout ” --> "Edit HTML"
• Find this code ]]></b:skin>
• Copy the following script, insert before or above code ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width of main menu */ text-align: center;
height: 24px; /* Height of main menu */
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; /* Font main menu top */
font-weight: 900;
color: #000; /* Font color of main menu */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Background color of main menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Main box border color */
overflow: hidden;
background-color: #FF9900; /* 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;
}

• Note the text-the text printed in blue, is the information that is in the View tab. There are size, border style and color. Please change as you want.
See HTML Color code click here.
See Border style click here.
• Then copy the following kode, insert before code </head>

<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>

• Save

Second step:

• Select "Page Elements"
• Select "Add a Gadget" --> "HTML/Javascript" to put View Tab menu.
• Copy the script below to them:

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

• Save

Description:

• Text of blue (350px) is height and width Tab View.
• Code of Purple text is appears on Top Menu.
• Code Yellow is content of View Tab.

Related Posts