Membuat Multi Tab Tanpa Mengedit HTML

inGintahu| Pada Tutorial Blogging kali ini mungkin temen temen sudah pernah membaca di internet, namun saya sekedar berbgai kepada yang mungkin belum tahu, selain itu ada salah satu temen saya yang juga merequest widget ini untuk di postingkan kembali di blog saya, dan pada postingan kali ini saya akan memberikan tutorial MEMBUAT MULTI TAB (Tanpa Mengedit HTML), bagi temen temen yang belum tahu silahkan dibaca, dan semoga bermanfaat untuk di ambil, Menu Multi Tab yang saya buat ini nanti hasilnya akan mirip dengan milik saya, anda tinggal mengedit seperlunya saja, langsung saja TKP!

Ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat
2. Masuk ke Rancangan / Design
3. Pilih Tata Letak
4. Pilih Add New Widget / Tambah Gadget / Element
klik HTML/Javascript.
5. Kemudian copy paste kode dibawah ini:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 107px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* 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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

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

GANTI DENGAN Kode HTML Content Widget YANG INGIN DI TAMPILKAN PADA TAB 1

</div>
</div>

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

GANTI DENGAN Kode HTML Content Widget YANG INGIN DI TAMPILKAN PADA TAB 2

</div>
</div>

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

GANTI DENGAN Kode HTML Content Widget YANG INGIN DI TAMPILKAN PADA TAB 3

</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://projectloss.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');

Itu tadi Tutorial  Membuat Multi Tab Tanpa Mengedit HTML, semoga bermanfaat :D