Pasang TabView Menu di Blogspot

Widget menu TabView ini bisa bermanfaat sekali karena dapat digunakan untuk menampilkan beberapa menu sekaligus tanpa menyita banyak tempat. ;) Widgetnya juga dapat dipasang di semua tempat, di sidebar, footer, dibawah postingan, dll.. Cara pasangnya juga cukup mudah. Berikut ini langkah-langkahnya :

Pergi ke menu Layout -> Edit HTML, beri centang pada pilihan “Expand Widget Templates”.. Lalu cari kode ]]></b:skin> dan copy paste kode berikut diatasnya :

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 160px; /* Lebar Menu Utama Atas */ text-align: center;
height: 26px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Georgia", Serif; /* Font Menu Utama Atas */
font-size: 12px;
font-weight: 900;
background-color: #ccc;
color: #233e45; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1A3300; /* Warna background Menu Utama Atas */
color: #fff;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* 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;
}

div.TabView div.Pages div.Page div.Pad li {
background:url(‘http://lh5.ggpht.com/_pt7i0nbIOCY/SbZH_YTdW3I/AAAAAAAABZY/E3ietP4_U4c/Folder_thumb%5B1%5D.png?imgmax=800′) no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
}

Setelah kode di atas dimasukkan, lalu masukkan kode berikut di atas kode </head> :
<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

Setelah itu Save dulu.. Lalu cari kode <data:post.body/> dan letakkan kode berikut ini (sebelumnya di parse dulu) dibawah kode tersebut :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 600px;" class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div style="width: 600px; height: 160px; overflow: auto;" class="Pages">

<div class=”Page”>
<div class=”Pad”>

KONTEN TAB 1

</div>
</div>

<div class=”Page”>
<div class=”Pad”>

KONTEN TAB 2

</div>
</div>

<div class=”Page”>
<div class=”Pad”>

KONTEN TAB 3

</div>
</div>

</div>
</div>
</form>

<script type=”text/javascript”>
tabview_initialize(‘TabView’);
</script>

Selesai, kode yang diberi warna bisa diedit sesuai kebutuhan.. Bila ingin memasang menu TabView tersebut di akhir postingan, jangan lupa kontennya di Parse lebih dulu. Bisa gunakan layanan Parse HTML yang ada di BlogCrowds.. :mrgreen:

Contoh hasil :

TabView Menu

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>