Untuk Pemasangan iklan GRATIS silahkan Klik DISINI
« »

Pasang Menu Tab View

Pastinya udah pada kenal kan sama widget Tab View menu? Penggunaan dan pemasangan menu Tab View bisa bermanfaat sekali dan sangat cocok digunakan pada ruang yang terbatas. Cara pasang menu Tab View tersebut juga cukup simpel.

Biasanya menu Tab View ini dipasang pada menu sidebar ato footer, widget tersebut bisa dipasang di mana saja yang sobat mau...

Ok langsung aja ke TKP..

1. Masuk Ke BLogger tentunya login dengan account sobat sendiri..
2. Klik Layout/Tata Letak ->> Klik Menu Edit HTML
3. Download full template buat jaga2 kalo ada kesalahan dalam pengeditan
4. Cari kode ini ]]></b:skin> dan Copy paste kode dibawah ini diatas ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView 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 #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: Ă¢��Times New RomanĂ¢��, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


Kode kode diatas yang sebelahnya ada keteranya itu bisa dirubah jika warnanya anda kurang suka atau tidak coocok dengan template anda, kode warna html anda bisa cari disini

Selanjutnya Cari kode </head> dan copy paste script di bawah ini di atas </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

Setelah itu save template
Masuk ke ->> tata letak ->> tambah gadget (pilih HTML/JavaScript)


Copy paste kode dibawah ke dalam gadget yang telah ditambahkan tadi

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

kalo sobat tidak pas dengan ukurannya, sobat bisa mengedit sendiri pada widh dan height nya
dan jika ingin membuat menu tab nya lebih dari 3 anda tinggal Copy-Paste kode diatas yang bagian tab viewna saja..
Semoga bermanfaat
Share

Artikel Terkait



1 komentar:

Frienship mengatakan...

mantep..

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Buatlah komentar membangun, kritis dan berupa informasi

Komentar yang berbau pornografi, SARA, dan spam akan saya hapus.