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:

Blog

• Jquery Multi Level Menu Horizontal
• Membuat Tepi Gambar Bershadow Dengan CSS 3
• Cara Memasang Optimasi Template Menjadi SEO Friendly
• Cara Memasang Meta Tag SEO Friendly
• Membuat Gambar Slider Carousel Otomatis Berdasarkan Label
• Cara Gampang Memasang/Membuat Tab Menu Tanpa Edit HTML
• Membuat/Memasang Recent Comment Dengan Jquery pada Blog
• RPP Membukukan penyesuaian kas di bank
• Cara membuat/memasang Menu Tersembunyi Unik dengan CSS
• Widget Sharing Is Caring - Cara Memasang Widget Caring Is Sexy
• Cara membuat Buku tamu melayang Dengan Light Effect jQuery
• Cara Membuat Gambar Berdampingan pada posting
• Cara Membuat Menu Horizontal Drop Down Dengan Animasi
• Cara Memasang Menu Horizontal Kwicks JQuery Slide
• Cara mudah memasang Iklan diatas postingan
• Cara Mendapatkan Google Adsense lewat Docstoc
• Cara Membuat Sitemap Blog
• Membuat Iklan Berdampingan
• Cara Pasang Meta Tag SEO pada Blog
• Cara Mudah Membuat Kotak Komentar Facebook di Blogger
• Cara Mendaftarkan Blog di Webmaster Google
• Cara Membuat Artikel Terkait Dengan Fungsi Scroll
• Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog
• Mengatur Jumlah Posting Pada Halaman Label (widget)