Trik Pasang Sampai 5 Menu Tabview. Mau?

Baru Punya satu Menu Tabview? Disini ada 5 loh...
Dengan script yang sudah dimodifikasi, siap pasang.
Tinggal copy paste!






Artikel ini di inspirasikan oleh salah satu sahabat blogger, yaitu http://hera-ku.blogspot.com dengan tujuan untuk mempermudah sahabat blogger lain untuk memasang lebih dari satu menu tabview.
Langsung saja saya kasih script nya. Yang belum tau cara membuat menu tabview, bisa lihat DISINI, untuk cara pemasanganya dan pengeditanya. Disini saya hanya akan memberikan Tabvview 2-5 dengan script yang sudah dimodifikasi dan siap pasang.

TABVIEW 2

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://tipspackjs.googlecode.com/files/Tabview2.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView2 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView2 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView2 div.Tabs a:hover, div.TabView2 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView2 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView2 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview2.html" method="get">
<div class="TabView2" id="TabView2">
<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">
tabview2_initialize('TabView2');
</script>

TABVIEW 3

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://tipspackjs.googlecode.com/files/Tabview3.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView3 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView3 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView3 div.Tabs a:hover, div.TabView3 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView3 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView3 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView3 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview3.html" method="get">
<div class="TabView3" id="TabView3">
<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">
tabview3_initialize('TabView3');
</script>

TABVIEW 4

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://tipspackjs.googlecode.com/files/Tabview4.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView4 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView5 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView6 div.Tabs a:hover, div.TabView4 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView4 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView4 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView4 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview4.html" method="get">
<div class="TabView4" id="TabView4">
<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">
tabview4_initialize('TabView4');
</script>
<script type="text/javascript">
tabview3_initialize('TabView3');
</script>

TABVIEW 5

• Ini adalah script yang harus dipasang di atas: </head>
  

<script src='http://tipspackjs.googlecode.com/files/Tabview5.js' type='text/javascript'/>

• Ini Script yang harus dipasang diatas: ]]></b:skin>
  

div.TabView5 div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView5 div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #A9F5A9; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView5 div.Tabs a:hover, div.TabView5 div.Tabs a.Active
{
background-color: #A9F5A9; /* Warna background Menu Utama Atas */
}
div.TabView5 div.Pages
{
clear: both;
border: 1px solid #A9F5A9; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #; /* Warna background Kotak Utama */
}
div.TabView5 div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView5 div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

• Ini adalah script yang harus anda tambahkan di page element:

<form action="tabview5.html" method="get">
<div class="TabView5" id="TabView5">
<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">
tabview5_initialize('TabView5');
</script>
span style="color: rgb(255, 0, 0);" >

ADA YANG MAU PASANG LEBIH DARI 5??? :))