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
- 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
Keterangan: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;keterangan, kamu bisa mengatur desainnya dengan memperhatikan kode berikut:
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;}
- 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);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:
// ----- 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>
<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>
- 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
5 comments
makasih banyak
Tono sama-sama sob :D sering mampir ya
blog nya lumayan
Cebe lumayan apa dulu nih sob? :D
aku bingung di kode biru kan di ganti dengan kode yang mau di pasng tapi disitu ada mne 1 samapi 3 jadi jumlah nya 9 , bingung disitu bang, mohon pengarahan, keren posting nya, minta templete green nya dong yang dipake buat demo diatas
Hargai penulis dengan cara memberikan komentar di artikel ini ya sobat.
Dan berkomentarlah dengan kata-kata yang sopan.
"Jangan Menggunakan Link Aktif di Komentar" (akan dihapus)
Untuk menyisipkan gambar dalam komentar : <i rel="image">URL GAMBAR</i>