Membuat Menu Tab View Tanpa Merubah Template Blog

Menu Tab View adalah wignet yang pas sekali dan praktis di gunakan sebagai menu navigasi yang bisa meringkas dan menyimpan link , data , maupun widget yang lain , sehingga blog kita kelihatan lebih praktis dan profesional. Sering kita jumpai dalam pembuatan menu tab view memerlukan editing template yang cukup rumit dan berbelit-belit, sehingga kitapun merasa kesulitan dan pusing di buatnya.. Kali ini penulis akan berbagi info dengan sobat bloggger semuanya cara Membuat Menu Tab View Tanpa Merubah Template Blog yang lebih praktis dan mudah sobat. Baiklah mari kita ikuti cara-cara pembuatannya ya sobat.

Caranya sebagai berikut sobat :

1.   Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments

2.   Pilih Layout (Rancangan/ Tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda dan pilih HTML/JavaScript

3.   Kemudian masukkan scrip dibawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 25px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 77px; /* Main Menu Top Width */
text-align:center ; height: 25px; /* Top High Main Menu
*/
padding-top:5px; vertical-align:middle; border:1px solid #303030; /* Top Menu border color */
border-bottom-width:0; text-decoration: bold; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:none; font: normal 12px arial; letter-spacing:-0.07em; background:#CF2023; color:#000000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background: #E17612; color: #000000; font-weight:bold; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:1px solid #303030; /* Main Box border color */ overflow:hidden; background-color:#ffffff; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 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>Nama Menu 1</a>


<a>Nama Menu 2</a>


<a>Nama Menu 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Catatan :

*   Untuk text yang berwarna orange adalah sebagai penjelasan dan keterangaan untuk mengedit kata sebelum text itu.
*   Untuk text yang berwarna hijau ganti dengan nama menu yang sobat inginkan.
*   Untuk text yang berwarna pink atur dan sesuaikan dengan lebar dan tinggi template sobat.
*   Untuk text yang berwarna kuning isi dengan apa saja yang sobat mau.

4.   Simpan dan lihat hasilnya sobat.
5.   Contoh hasinya adalah sebagai berikut seperti punya saya sobat :

Semoga berhasil dan bermanmaat sobat ya