Cara Membuat Menu Tab View Di Sidebar Blog (Tanpa Edit HTML)

Contoh Tampilanya silahkan lihat di bawah ini

Mari kita langsung saja membuatnya, silahkan masuk ke halaman
Tata Letak >> Tambahkan Gadget >> HTML/JavaScript
Silahkan pilih Gadget pada bagian kanan atau Sidebar

Copikan kode di bawah ini 

<style type="text/css"> div.TabView div.Tabs a { float: left; display: block; width: 80px; /* Lebar Kotak Tab */ height: 15px; /* Tinggi Menu Utama Atas */ text-align: center; /* Posisi Teks Menu Tab */ border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */ font-weight:bold; color:#ffffff; /* Warna Font Menu Utama Atas */ margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */ background-color: #f60325; /* Merah Warna background Kotak Tab */ padding-top: 2px; /* Spasi Atas */ border: 1px solid #f8fbfb; /* Warna border kotak Tab */ border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */ font-family: "Mistral, Helvetica, sans-serif", Arial; /* Font Kotak Tab */ font-weight: 800; /* Ketebalan Teks kotak tab */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #06ea8c; /* Warna background utama kotak tab */ } div.TabView div.Pages { clear: both; border: 1px solid #cccccc; /* Warna border Kotak Konten */ overflow: hidden; background-color: #ffffff; /* Warna background Kotak konten */ } div.TabView div.Pages div.Page { height: 100%; padding: 5px; /* Jarak teks dalam kotak content */ overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } </style> <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> <form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 300px;" class="Tabs"> <a>PRODUK</a> <a>UNDUH</a> <a>PRULINK</a> </div> <div style="width:300px; height:250px; " class="Pages"> <div class="Page"> <div class="Pad"> Isi menu tab 1 /* Ganti dengan Link atau dengan script */ </div> </div> <div class="Page"> <div class="Pad"> Isi menu tab 2 /* Ganti dengan Link atau dengan script */ </div> </div> <div class="Page"> <div class="Pad"> Isi menu tab 3 /* Ganti dengan Link atau dengan script */ </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

Keterangan:

• Silahkan lihat keterangan antara /* */ gantilah sesuai keinginan anda contohnya Isi menu tab  1 /* Ganti dengan Link atau dengan script */ diganti dengan kode html link atau diisi text
• Tulisan Isi menu tab 1 Isi menu tab 2 Isi menu tab 3. Silahkan ganti dengan teks, link, banner atau widget anda.
• Isi tab bisa anda mengisi dengan link atau kode script seperti Recent Post, Top Post, Daftar isi, Komentar dll

Contoh Code Gadget bisa di lihat pada postingan saya Gadget populer post Widget Komentar dan Widget Recent Post

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.