Membuat Menu TabView Tanpa Edit Template

1. Login ke akun blogger kamu
2. klik menu Element Laman
3. klik Tambah Gadget
4. pilih HTML/JavaScript
5. masukkan kode berikut didalamnya

<style type="text/css">  /* begin css tabview */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 98px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #2C2C2C; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold; /* besar hurup menu */
background-color: #252525; /* warna latar menu */
color: #F0F8FF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #DD0A0A; /* warna background menu aktif */
color: #252525;
}
div.TabView div.Tabs a:hover {
background-color: #DD0A0A; /* warna background menu hover */
color: #F0F8FF;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #252525; /* warna border kotak utama */
overflow: hidden;
background:#252525; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
</style>
<script src="http://naughtyric.googlecode.com/files/tabview.js" type="text/javascript"></script>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">

ISI Tab View 1

</div>
</div>
<div class="Page">
<div class="Pad">

ISI Tab View 2

</div>
</div>
<div class="Page">
<div class="Pad">

ISI Tab View 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><span style="font-size: xx-small;"><span style="color: #fff;">by </span><a href="http://naughtyric.blogspot.com/2011/06/cara-membuat-menu-tabview.html" style="color: #A52020;">Naughtyric Blog</a></span>

Nah sobat tinggal merubah kode yang diwarnai saja, saya rasa tidak perlu dijelaskan lagi karena sudah ada semua di posting sebelumnya.

Sedikit tambahan memang untuk pengeditan atau mengisi menu tabview seperti ini butuh ketelitian, tapi ndak apa itung" belajar lah, itu juga buat kita sendiri :D

Kalo mo lebih praktis lagi tunggu.. tongkrongin saja blog ini,hehe...
Selamat Membuat Menu TabView Tanpa Edit Template
Semoga Bermanfaat ;)