Membuat Menu Tab View di Blog

Halo, Assalamu'alaikum Wr. Wb.
Bagaimana kabar sahabat hari ini? Semoga baik-baik saja ya... Kali ini, saya bakalan ngasih tau tentang Membuat Menu Tab View. Sebelumnya, saya mau nanya dulu ke sahabat pembaca. Kayak gimana sih, menu tab view itu? Nah saya kasih contoh dulu seperti gambar di bawah ini.

Nah, udah tau kan kayak gimana menu tab view itu. Sekarang kita langsung saja ke tutorialnya.

1. Login ke Blogger sahabat
2. Pilih blog sahabat, dan klik "Template" pada sidebar sebelah kiri
3. Pilih "Edit HTML"
4. Klik "Expand Template Widget"
5. Cari kode </head> dengan cara menekan tombol Ctrl + F
6. Copy kode di bawah ini, dan pastekan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>//<![CDATA[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>

7. Cari kode ]]></b:skin> dengan cara menekan  tombol Ctrl + F
8. Copy kode di bawah ini, dan pastekan kode di atas kode ]]></b:skin>

div.TabView div.Tabs{height: 30px;overflow: hidden;}div.TabView div.Tabs a{float: left;display: block;width: 98px; /* Lebar Menu Utama Atas */text-align: center;height: 30px; /* Tinggi Menu Utama Atas */padding-top: 3px;vertical-align: middle;border: 1px solid #BDBDBD; /* Warna border Menu Atas */border-bottom-width: 0;text-decoration: none;font-family: "Verdana", Serif; /* Font Menu Utama Atas */font-weight: bold;color: #000; /* Warna Font Menu Utama Atas */-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color: #E6E6E6; /* Warna background Menu Utama Atas */}div.TabView div.Pages{clear: both;border: 1px solid #BDBDBD; /* Warna border Kotak Utama */overflow: hidden;background-color: #E6E6E6; /* 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;}

9. Simpan template sahabat, dengan mengklik tombol "Simpan Template"
10. Selanjutnya, klik "Tata Letak" di sidebar sebelah kiri
11. Pilih Add a Gadget, dan pilihlah "HTML / Javascript"
12. Copy kode di bawah ini, dan paste ke dalam text box tersebut

<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 300px;"><a>Menu 1</a><a>Menu 2</a><a>Menu 3</a></div><div class="Pages" style="width: 300px; height: 250px;"><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>

14. Setelah selesai mengedit widget, klik "Simpan Gadget"

Catatan: 

• Tulisan yang berwarna merah merupakan ukuran dari tab tersebut
• Tulisan yang berwarna ungu merupakan warna garis tab tersebut
• Tulisan yang berwarna hijau merupakan font dari tab tersebut
• Tulisan yang berwarna biru merupakan warna dari tab tersebut
• Tulisan yang berwarna merah jambu, ungu tua, ungu muda, dan hijau tua adalah tulisan yang sahabat inginkan

Demikian tutorial dari saya, semoga bermanfaat bagi sahabat.

Wassalamu'alaikum Wr. Wb.