| 12 comments ]

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??? :))

12 comments

.rasainitakwajar. said... @ May 21, 2009 at 11:33 PM

dicoba dulu bro :36

Chandra said... @ May 22, 2009 at 9:02 AM

Wah... sip nih tips nya, tapi lumayan rumit juga yah... tuh....

Ombung (^ ; ^)v said... @ May 22, 2009 at 12:08 PM

wah banyak amat yachh kodenya :33,tp boleh jg neh buat dicobain :36

kereeennnnn banget :24

didir said... @ May 22, 2009 at 2:39 PM

wah kebetulan ni blog saya cuma ada satu tab view,,,,
:10

Blok c No.3 said... @ May 22, 2009 at 6:13 PM

hohoho...sangat bermanfaat sob...mantap.

Andie Gokil said... @ May 24, 2009 at 12:54 AM

bukannya tinggal yang pake li itu yah bro?
hueheuhehe.
ga ngert HTML.
hahhahaa.
nice post sob! :D

ekosky said... @ May 25, 2009 at 9:29 AM

mantap bro :25

Ali said... @ May 30, 2009 at 1:45 PM

Mampir sob

Arde said... @ June 30, 2009 at 1:27 AM

Mantab....!
Tapi aq males pasang'a takut terjadi komplikasi ntar....!
Buktinya tuh liat ja.... pada tab friends links...!

ardemaniacs said... @ June 30, 2009 at 1:42 AM
This comment has been removed by the author.
Saung Web said... @ December 26, 2009 at 7:26 PM

Komplit bener nih.. maksih ya atas tutorialnya

mGm said... @ January 11, 2010 at 9:24 PM

wah bisa berat donk blog aku...soalnya terlalu banyak script...dan blog aku memang sdh berat

Post a Comment