Membuat Tab View / Multi Tab di Blog - Bagi kamu yang mempunyai pertanyaan '
bagaimana cara menyatukan 3 widget atau lebih menjadi satu?' disini
|>CM_Double'C<| akan membahas cara membuatnya, sebenarnya namanya adalah
Tab View, dengan membuat tab view kita dapat menghemat banyak ruang pada sidebar kita karena
beberapa widget dapat kita satukan pada tab view, buat kamu yang masih bingung apa dan bagaimana itu Tab View silahkan lihat contohnya: Klik Disini nah
lihat disana saya menyatukan widget 'recent post' 'entri populer' dan
juga 'label' menjadi satu. Oke, langsung aja yuk sob belajar
cara membuat tab view / multi tab di blog.
1. Masuk ke Dashboard blogger (
saat artikel ini dibuat saya masih menggunakan tampilan blogger lama / lawas) , klik rancangan, klik edit HTML.
2. Cari kode
]]></b:skin> dengan bantuan CTRL+F, kemudian letakkan / copas kode berikut dibawah kode
]]></b:skin> tadi
div.TabView div.Tabs{height: 24px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 84px; text-align: center;height: 24px;
padding-top: 3px;vertical-align: middle;border: 1px solid #999999;
border-bottom-width: 0;text-decoration: none;font-family: "Times New Roman", Serif;
font-weight: 900;color: #1E62B6;
}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #FFFFFF;
}div.TabView div.Pages{clear: both;border: 1px solid #999999;
overflow: hidden;background-color: #FFFFFF; }div.TabView div.Pages div.Page{height: 100%;padding: 0px;overflow: hidden;}div.TabView div.Pages div.Page div.Pad{padding: 3px 5px;}
keterangan, kamu bisa mengatur desainnya dengan memperhatikan kode berikut:
- 84 untuk mengatur lebar menu utama atas
- 24 untuk mengatur tinggi menu utama atas
- 999999 adalah kode warna border pada menu atas
- 1E62B6 adalah kode warna font menu utama atas
- FFFFFF adalah kode warna background menu utama atas
- 999999 adalah kode warna border kotak utama
- FFFFFF adalah kode warna background kotak utama
3. cari kode </head>, lalu letakkan kode berikut ini sebelum kode </head> tadi
<script type='text/javascript'>function tabview_aux(TabViewId, id){var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;var i = 0;
do{if (Tab.tagName == "A"){i++;Tab.href
=
"javascript:tabview_switch('"+TabViewId+"',
"+i+");";Tab.className = (i == id) ? "Active" : "";Tab.blur();}}while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;var i = 0;
do{if (Page.className == 'Page'){i++;if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";Page.style.overflow = "auto";Page.style.display = (i == id) ? 'block' : 'none';}}while (Page = Page.nextSibling);}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</script>
4.
Klik simpan template, lalu kembali ke page element / edit tata letak,
klik add gadget atau tambah gadget lalu pilih HTML / Javascript,
kemudian masukkan kode berikut didalamnya:
<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 230px;"><a>Menu 1</a><a>Menu 2</a><a>Menu 3</a></div><div class="Pages" style="width: 240px; height: 265px;">
<div class="Page"><div class="Pad">Menu 1.1 <br />Menu 1.2 <br />Menu 1.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 2.1 <br />Menu 2.2 <br />Menu 2.3 <br /></div></div>
<div class="Page"><div class="Pad">Menu 3.1 <br />Menu 3.2 <br />Menu 3.3 <br /></div></div>
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
Keterangan:
- kode berwarna
hijau untuk mengatur tinggi dan lebar tab view
- kode berwarna
orange ganti dengan judul tabview (contoh: recent, arsip, label)
- kode berwarna
biru ganti dengan widget yang mau diisi di tabview (contoh: gambar, link blogroll, script, dll)
5. Klik simpan lalu lihat hasilnya
baca juga artikel berikut: Membuat Judul Artikel dengan Efek Glow Keren
keyword: cara membuat
tab view di blog, membuat multi tab di blog, membuat kolom tab di blog,
membuat tab menu di blog, membuat tab di blog, menyatukan beberapa
widget menjadi satu, trik menghemat ruang di blog
