Cara Membuat/Memasang Menu Tab View di Blog

Menu Tab View di Blog - Cara Membuat Menu Tab View di Blog - Menu Multi kolom.  Adakalanya kita pun dipusingkan dengan penempatan widget yang terlalu banyak, ingin membuat kesan tampilan apik dan indah, anmun malah berantakan. Untuk menyiasati hal ini diperlukan satu tempat widget namun bisa menyimpan banyak widget.

Penggunaan Menu Tab View di Blog ini sangatlah tepat dan bermanfaat terutama bagi kita yang ingin menghemat ruang untuk menampilkan banyak widget dalam blog kita. Desain yang menarik juga membuat tampilan blog kita terlihat apik dan menawan ini memungkinkan blog kita seolah profesional. Langkahnya pembuatannya sangatlah mudah, namun tetap saya anjurkan bila dalam oprek template ini sebaiknya kita jangan lupa untuk mendonloadnya terlebih dahulu, agar terhindar dari kesalahan fatal.

Langka yang harus sobat ikuti .
1. Masuk ke akun blogger kita masing-masing.
2. Klik Rancangan.
3. Klik edit HTML.
4. Klik Expand Template Widget.
5. Lalu cari kode berikut. ]]></b:skin> Letakan kode berikut di atasnya.

/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #0414FC; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: #FC0C0C; /*warna background menu aktif*/
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: #0CFC0C; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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;
font-size: 12px; /*besar hurup kotak utama*/
}

6. Cari kode berikut.]]></b:skin>
Letakan javascript berikut di bawahnya.

 <script src="http://evawangi.googlecode.com/files/tabview.js" type="text/javascript"/>

Sampai sini Save Template sobat, lalu :

7. Langkah Selanjutnya :
Klik menu rancangan.
Klik add gadget.
Pilih HTML/JavaScript.
Masukan kode berikut.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->
<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->
</div></div></form>
<script type="text/javascript"> tabview_initialize ('TabView'); </script>

8. Klik Save Gadget dan selesai, mudah khan ? Semoga bisa bermanfaat !

Sumber : http://evawangi.blogspot.com/2012/06/menu-tab-view-di-blog.html

Artikel Terkait: