Cara Membuat Menu Tab View (Versi Dulu)

Menu Tab View adalah Menu yang terletak pada right-sidebar blog ini (bagian atas). Nah, seperti itulah contoh dari Menu Tab View, Jadi intinya selain untuk mempercantik tampilan blog juga untuk menghemat penggunaan tempat. Kali ini ,saya akan bahas mengenai Cara Membuat Menu Tab View Ini tetapi Versi lama, untuk versi barunya, Kamu bisa baca di sini.

Yuk, ikutin cara buat Menu Tab view versi dulu . . .

1. Masuk ke blogger, buka Layout => Edit HTML
2. Kemudian cari kode ini ]]></b:skin> (gunakan Ctrl + F)
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View.(Untuk melihat kode-kode warnanya, Kamu bisa baca di sini)
5.Lalu, masukkan  kode berikut ini sebelum kode </head>

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

6. save
7. Buka Page Elements
8. Terus PIlih Add a Gadget => HTML/Javascript
9. Masukkan kode ini

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note  :
- Text yang berwarna biru adalah ukuran tinggi dan lebar tab view.
- Text yang berwarna Ungu adalah Judul dari Tab-tab Menu Viewnya
- Kode yang berwarna merah adalah isi dari Tab View
- Jika Kamu ingin menambah jumlah Isi dari Menu Tab View tersebut, maka caranya tinggal menambahkan pada text warna ungu, masing-masing text yang warnanya merah