Assalammualaikum wr.wb.
Salam sejahterau untuk kita semua...
Kali ini saya akan memberikan Tutor tentang cara "Membuat Tab Menu pada Blog" seperti contoh di bawah ini :



Caranya gampang-gampang susah... cuma butuh ketelitian aja. Saya yakin IT Loverz semua bisa.
Saya rasa cukup basa basinya, kita mulai saja langsung.

Membuat Tab Menu pada Blog

1. Login ke blogger kemudian pilih menu "Layout --> Edit HTML"
2. Cari kode berikut ( Tekan CTRL+F untuk mempermudah pencarian) ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau ke dalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;

***Text berwarna merah merupakan keterangan untuk melakukan editing menu tab view sesuai keinginan IT Loverz.

5. Step selanjutnya yaitu memasang kode berikut ini sebelum kode </head>

<script type='text/javascript'> <br /> function tabview_auxundefinedTabViewId, id)<br /> {<br /> var TabView = document.getElementByIdundefinedTabViewId);<br /> <br /> // ----- Tabs -----<br /> <br /> var Tabs = TabView.firstChild;<br /> while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling;<br /> <br /> var Tab = Tabs.firstChild;<br /> var i = 0;<br /> <br /> do<br /> {<br /> if undefinedTab.tagName == "A")<br /> {<br /> i++;<br /> Tab.href = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");";<br /> Tab.className = undefinedi == id) ? "Active" : "";<br /> Tab.blurundefined);<br /> }<br /> }<br /> while undefinedTab = Tab.nextSibling);<br /> <br /> // ----- Pages -----<br /> <br /> var Pages = TabView.firstChild;<br /> while undefinedPages.className != 'Pages') Pages = Pages.nextSibling;<br /> <br /> var Page = Pages.firstChild;<br /> var i = 0;<br /> <br /> do<br /> {<br /> if undefinedPage.className == 'Page')<br /> {<br /> i++;<br /> if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px";<br /> Page.style.overflow = "auto";<br /> Page.style.display = undefinedi == id) ? 'block' : 'none';<br /> }<br /> }<br /> while undefinedPage = Page.nextSibling);<br /> }<br /> <br /> // ----- Functions -------------------------------------------------------------<br /> <br /> function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }<br /> <br /> function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId, 1); }<br /> <br /> </script><br /> <br /> <script type='text/javascript'>tabview_initializeundefined'TabView');<br /> </script><br />
 6. Save

=========================
Next Step ==&gt;
=========================

1. Cari menu Element yang terdapat pada blog
2. Pilih menu "Add a Gadget" --&gt; "HTML/Javascript" (tata letak bisa disesuaikan)
3. Masukan script berikut :

<form action="tabview.html" method="get"> <br /> <div class="TabView" id="TabView"> <br /> <div class="Tabs" style="width: 350px;"> <br /> <a>Tab 1</a><br /> <a>Tab 2</a><br /> <a>Tab 3</a><br /> </div> <br /> <div class="Pages" style="width: 350px; height: 250px;"> <br /> <div class="Page"> <br /> <div class="Pad"> <br /> Tab 1.1 <br /> Tab 1.2 <br /> Tab 1.3 <br /> </div> <br /> </div> <br /> <div class="Page"> <br /> <div class="Pad"> <br /> Tab 2.1 <br /> Tab 2.2 <br /> Tab 2.3 <br /> </div> <br /> </div> <br /> <div class="Page"> <br /> <div class="Pad"> <br /> Tab 3.1 <br /> Tab 3.2 <br /> Tab 3.3 <br /> </div> <br /> </div> <br /> </div> <br /> </div> <br /> </form> <br /> <script type="text/javascript"><br /> tabview_initialize('TabView');<br /> </script> <br />  <b>Keterangan tambahan :</b><br /> <dl class="codebox"> <dt>Code:</dt> <dd><code><div class="Pages" style="width: 350px; height: 250px;"> </code></dd></dl>


untuk mengatur lebar dan panjang kolom

Code:

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

Merupakan Menu Utama

Code:

<div class="Page">
<div class="Pad">
Tab 3.1

Tab 3.2

Tab 3.3

</div>
</div>

Merupakan isi dari tav view yang bisa ditambahkan dengan link, gambar, dsb.
Selesai.

Semoga tutor kali ini tetap berkenan dihati IT Loverz. Di tunggu komen-komennya :)