Cara Membuat Tab View Menu Blog di Blogspot

AB | Cara Membuat Tab View Menu Blog di Blogspot - Salah satu mempercantik tampilan blog kita adalah dengan Membuat Tab View Menu Blog. Ada pun tujuannya Membuat Tab View Menu Blog adalah ntuk menghemat tempat, dimana tab view menu sangat efisien. Bayangkan dengan ukuran yang relatif kecil tapi bisa memuat banyak space/tempat. Oleh karena itulah AB mencoba membagi bagaimana Cara Membuat Tab View Menu Blog di Blogspot.

Contoh Tab View Menu

Kode script Cara Membuat Tab View Menu Blog di Blogspot sangat banyak sekali. Diperlukan kehati-hatian dan kesabaran ketika kita ingin Membuat Tab View Menu Blog di Blogspot. Jadi, setelah anda yakin ingin Membuat Tab View Menu Blog di Blogspot, sebaiknya Simpan dahulu template blog anda untuk menjaga-jaga saja.

Beginilah ceritanya bagaimana Cara Membuat Tab View Menu Blog di Blogspot:
1. Seperti biasa Anda harus membuka Akun Blogger anda.
2. Pilih Rancangan / design Tata Letak.
3. Selanjutnya pilih Edit HTML.
4. Pesan AB : Jangan lupa backup template anda terlebih dahulu dengan mengklik Download Template Lengkap)
5. Centang Expand Template Widget
6. Carilah kode </head> (gunakahn CTRL + F untuk memudahkan pencarian), setelah ketemu lalu Copy-lah kode javascript dibawah ini dan paste-kanlah tepat sebelum kode </head>

Klik Spoiler Berikut:

<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. Setelah langkah diatas selesai, selanjutnya carilah kode seperti : ]]></b:skin> Lalu, Copy-lah kode script di bawah ini, dan pastekan tepat berada di atas kode ]]></b:skin>

Klik Spoiler Berikut:

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

8. Simpanlah Template Blog anda. Kemudian Simpan.
9. Beralih / pilih Rancangan atau Elemen Laman Kemudian Simpan Template.
10. Tambahkan Widget / Gadget
11. Pilih yang HTML / Javascript,
12. Copylah kode script di bawah ini dan pastekan ke dalam widget/gadget baru tadi.

Klik Spoiler Berikut:

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

13. Aturlah sedemikian Rupa
14. Setelah anda selesai mengedit widget di atas, Simpanlah.
15. Simpan Template anda dan lihat hasilnya.

Catatan :

• Silahkan anda ganti kode-kode yang di warnai biru denga ukuran sesuai keinginan anda.
• Silahkan anda ganti kode-kode yang di warnai merah dengan warna sesuai keinginan anda
• Untuk warna Orange, tulisan Menu1, Menu 2, Menu 3, gantilah sesuai keinginan anda. (Contoh : lihat gambar di atas, Blogger, Tips-Trik, Adsense itu Menu pada Tab yang AB buat).
• Untuk Menu 1.1, Menu 1.2, Menu 1.3 silahkan masukkan kode script yang anda inginkan, apabila script cuma satu saja, hapus saja Menu 1.2 dan 1.3. Ingat isinya sesuaikan dengan Menu 1.
• Untuk Menu 2.1 sampai 2.3 dan Menu 3.1 sampai 3.3 langkahnya hampir sama dengan Menu 1.1. Ingat isinya sesuaikan dengan Menunya ok.
• Gambar di atas hanya contoh saja, jangan jadikan patokan. Silahkan Anda masukkan Gambar atau Iklan atau kode-kode widget yang menurut anda bagus dan cantik.