.
,Sejarah jam gadang, danau singkarak, danau maninjau, hotel, tujuan wisata sumatera barat,daftar,jam gadang, fort de kock,West Sumatra, Sumatera Barat, Tourism

How To Create / Display More Tabview in a Blog

Posted By admin Saturday, March 26, 2011

I will be sharing how to create more than one tab view menu. View menu tab is used to save space / space on the blog, so that we could put a lot of widgets without having to think about the place. But we must also consider the weight of the many widgets that we attach.

To make more than one tab view menu you can do in the tutorial below.
1. Login / login to your blogger dashboard.
2. Towards Design> Edit HTML

1. after entry into the Edit HTML, find the code </ head>, then enter the code below right before / above code </ head>.
<script src='http://tab-menu-view.googlecode.com/files/Tab-menu-view.js' type='text/javascript'/>

The script code above is used if you only want to install a widget tab view menu. If you want to install two menu tab view, add more script code below the above code </ head>.
<script src='http://tab-menu-view.googlecode.com/files/tabview2.js' type='text/javascript'/>


But if you need more widgets menu tab view, you add another script code below the above code </ head>.
<script src='http://tab-menu-view.googlecode.com/files/tabview3.js' type='text/javascript'/>



2. After that, find this code ]]></ b: skin> and place the script code below before / above code ]]></ b: skin>.

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; / * Width of top main menu * /
text-align: center;
height: 30px; / * Height top main menu * /
padding-top: 3px;
vertical-align: middle;
border: 1px solid # BDBDBD; / * Top Menu border color * /
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; / * Font top main menu * /
font-weight: bold;
color: # 000; / * Font Color top main menu * /
-Moz-border-radius-topleft: 10px;
-Moz-border-radius-topright: 10px;
}
div.TabView div.Tabs a: hover, div.TabView div.Tabs a.Active
{
background-color: # E6E6E6; / * top main menu background color * /
}
div.TabView div.Pages
{
clear: both;
border: 1px solid # BDBDBD; / * Main Box border color * /
overflow: hidden;
background-color: # E6E6E6; / * 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;
}



The above code you install if you choose to install only one widget tab view menu. If you choose to install two widgets tab view menu, add more script code below before ]]></ b: skin>.

div.TabView2 div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView2 div.Tabs a
{
float: left;
display: block;
width: 98px; / * Width of top main menu * /
text-align: center;
height: 30px; / * Height top main menu * /
padding-top: 3px;
vertical-align: middle;
border: 1px solid # BDBDBD; / * Top Menu border color * /
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; / * Font top main menu * /
font-weight: bold;
color: # 000; / * Font Color top main menu * /
-Moz-border-radius-topleft: 10px;
-Moz-border-radius-topright: 10px;
}
div.TabView2 div.Tabs a: hover, div.TabView2 div.Tabs a.Active
{
background-color: # E6E6E6; / * top main menu background color * /
}
div.TabView2 div.Pages
{
clear: both;
border: 1px solid # BDBDBD; / * Main Box border color * /
overflow: hidden;
background-color: # E6E6E6; / * Main Box background color * /
}
div.TabView2 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}




But if you choose to install three widgets tab view menu, then you add more code below before the code ]]></ b: skin>.

div.TabView3 div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView3 div.Tabs a
{
float: left;
display: block;
width: 98px; / * Width of top main menu * /
text-align: center;
height: 30px; / * Height top main menu * /
padding-top: 3px;
vertical-align: middle;
border: 1px solid # BDBDBD; / * Top Menu border color * /
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; / * Font top main menu * /
font-weight: bold;
color: # 000; / * Font Color top main menu * /
-Moz-border-radius-topleft: 10px;
-Moz-border-radius-topright: 10px;
}
div.TabView3 div.Tabs a: hover, div.TabView3 div.Tabs a.Active
{
background-color: # E6E6E6; / * top main menu background color * /
}
div.TabView3 div.Pages
{
clear: both;
border: 1px solid # BDBDBD; / * Main Box border color * /
overflow: hidden;
background-color: # E6E6E6; / * Main Box background color * /
}
div.TabView3 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView3 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


3. Then save all changes to your template.
4. Now go to Page Elements
5. Add widget javascript / HTML
7. Enter the following script code into the form of javascript / HTML

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
class="Tabs" <div style="width: 300px;">
<a> Menu 1 </ a>
<a> Menu 2 </ a>
<a> Menu 3 </ a>
</ Div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
<br /> Tab 1.1 Tab 1.2 Tab 1.3 <br /> <br /> </ div>
</ Div>
<div class="Page">
<div class="Pad">
<br /> Tab 2.1 Tab 2.2 Tab 2.3 <br /> <br /> </ div>
</ Div>
<div class="Page">
<div class="Pad">
<br /> Tab 3.1 Tab 3.2 Tab 3.3 <br /> <br /> </ div>
</ Div>
</ Div>
</ Div>
</ Form>
<script type="text/javascript">
tabview_initialize ('TabView');
</ Script>


If you want to install one more widget tab view menu, so in your blog there are two widgets into view menu tab, add more widgets Javascript / HTML and fill out the form with the script code below



<form action="tabview2.html" method="get">
<div class="TabView2" id="TabView2">
class="Tabs" <div style="width: 300px;">
class="Tabs" <div style="width: 300px;">
<a> Menu 1 </ a>
<a> Menu 2 </ a>
<a> Menu 3 </ a>
</ Div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
<br /> Tab 1.1 Tab 1.2 Tab 1.3 <br /> <br /> </ div>
</ Div>

<div class="Page">
<div class="Pad">
<br /> Tab 2.1 Tab 2.2 Tab 2.3 <br /> <br /> </ div>
</ Div>
<div class="Page">
<div class="Pad">
<br /> Tab 3.1 Tab 3.2 Tab 3.3 <br /> <br /> </ div>
</ Div>
</ Div>
</ Div>
</ Form>
<script type="text/javascript">
tabview2_initialize ('TabView2');
</ Script>


Or if you want to install the widget menu tab view one another so that a third widget view the existing menu tab on your blog, then plug it in again a widget JavaScript / HTML with the contents of script code below.

<form action="tabview3.html" method="get">
<div class="TabView3" id="TabView3">
class="Tabs" <div style="width: 300px;">
<a> Menu 1 </ a>
<a> Menu 2 </ a>
<a> Menu 3 </ a>
</ Div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
<br /> Tab 1.1 Tab 1.2 Tab 1.3 <br /> <br /> </ div>
</ Div>
<div class="Page">
<div class="Pad">
<br /> Tab 2.1 Tab 2.2 Tab 2.3 <br /> <br /> </ div>
</ Div>
<div class="Page">
<div class="Pad">
<br /> Tab 3.1 Tab 3.2 Tab 3.3 <br /> <br /> </ div>
</ Div>
</ Div>
</ Div>
</ Form>
<script type="text/javascript">
tabview_initialize ('TabView3');
</ Script>


Well, now you can see on your blog. There will be more than one widget tab view menu.


Related Post



Follow by Email