Membuat Tab View di Bawah Postingan

Assalamu'alaikum semua sahabat blogger tanpa terkecuali. Setelah jauh jauh terbang di dunia maya akhirnya saya nemuin sesuatu yang unik yaitu Membuat Menu Tab View di Bawah postingan.

Pastinya uda 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.

Memasang widget di akhir postingan sepertinya adalah salah satu hal favorit dari banyak pemilik blog. Biasanya kita menaruh iklan, artikel terkait, dll di akhir postingan. Nah dengan memasang widget TabView di akhir postingan, kita bisa pasang banyak widget tanpa harus menuh-menuhin tempat. Berikut ini langkah-langkahnya.

Cara Pasang Menu TabView di Akhir Postingan
Pertama, pilih menu Layout -> Edit HTML, beri centang pada pilihan Expand Widget Templates.. Lalu copy dan paste kode di bawah ini sebelum kode]]></b:skin>

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wB9Y9-BJmRLhhyphenhyphen45nykO5LsXhOWFzJMw2NVg4w1Gn7Y6E_WFrtmBgcUP5TxFVF5HDtkqGYdiux9tSn32rgLu52EQ-zhnNqlU7hsJC46bDI7bjHP-M_ZuHQ9MIEmZDNXzznlxZQz8T7U/?imgmax=800') no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
}

Silahkan Sobat edit kode CSS di atas mulai dari lebar, tinggi, warna dan lain lain. Untuk kode warna silahkan klik disini

Setelah kode di atas dimasukkan, lalu masukkan kode berikut di atas kode </head> atau tepat dibawa kode :]]></b:skin>

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

Setelah semua langkah di atas selesai, klis Save (Simpan Template)

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

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

Setelah semua langkah di atas selesai, klis Save (Simpan Template)

PENTING
Teks yang diberi warna Kuning dan orange bisa diedit-edit sendiri ama sobat. Oya, jangan lupa konten yang ingin dimasukkan ke tab-tab tersebut, kodenya di parse dulu...

Saya hanya ingin berbagi saja. Karena tampaknya belum banyak yang mengimplementasikan widget ini untuk ditaruh di akhir postingan

Selamat Mencoba semoga berhasil dan bermanfaat.