Cara pasang menu Multi Tab View di side bar blog

Untuk membuat tampilan blog agar terlihat lebih rapi dan ringkas " Multi Tab View " mungkin menjadi salah satu pulihan untuk di pasang pada blog.

Selain membuat tampilan blog menjadi rapi dan rinkas,Multi Tab View ini juga menjadikan banyaknya menu yang ingin di tampilkan hanya membutuhkan tempat yang relatif sedikit.

Umumnya menu tab view digunakan untuk penggunaan " Popular Post , Label , dan Archives Blog atau Posting terakhir". Untuk membuat Multi Tab View dari ketiga menu tersebut di atas, diperlukan editing pada HTML template Blog dengan memasukkan kode HTML ke dalamnya, sehingga secara otomatis jika ada posting baru, atau label baru misalnya, ketiga menu pada multi tab view tersebut akan meng-up date dengan sendirinya.

Namun yang akan saya bahas sekarang adalah membuat Menu Multi Tab View pada side bar blog tanpa harus merubah atau mengedit HTML Template blog, melainkan cukup dengan menambahkan gadget pada side bar, lalu memasukkan kode HTML ke dalamnya. Namun kelemahan untuk Multi Tab Viewjenis ini adalah harus memasukkan isi dari menu tersebut satu per satu secara manual, penggunaan multi tab view jenis ini biasanya tidak digunakan untuk menu-menu tersebut diatas.

Ok, yang ingin memasang Multi Tab View jenis ini berikut adalah kode HTML nya :

<div>
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 95px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #dc8126; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #dc8126; /* Warna border kotak Tab */
border-bottom: 1px solid #dc8126; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CC6600; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #ffffff; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a href="#"><span style="color: white;">KONTEN-1</span></a>
<a href="#"><span style="color: white;">KONTEN-2</span></a>
<a href="#"><span style="color: white;">KONTEN-3</span></a>
<div class="Pages" style="height: 200px; width: 300px;">
<div class="Page">
<div class="Pad">
isi konten-1 disini
</div>
</div>
<div class="Page">
<div class="Pad">
isi konten-2 disini
</div>
</div>
<div class="Page">
<div class="Pad">
isi konten-3 disini
</div>
</div>
</div>
</div>
</div></form>

<script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Silahkan Copy kode HTML di atas, lalu buka Tata Letak >> Tambah Gadget >> HTML/ Java Script >>Paste kode HTML >> Simpan
sumber