Cara membuat Menu MultiTab View Sidebar di Blogspot

Cara membuat Menu MultiTab View Sidebar di Blogspot

     Sebenarnya sudah banyak Artikel / Postingan yang menjelaskan tentang hal ini, akan tetapi tidak ada salahnya jika saya bahas lagi mengenai Cara membuat Menu MultiTab View Sidebar di Blogspot ini. Mungkin saja Artikel / Postingan ini lebih mudah dimengerti oleh Sobat dibandingkan dengan Artikel / Postingan yang lain.

Menu MultiTab View adalah menu yang bisa memuat 2-3 menu bahkan lebih dalam satu kotak ini berfungsi untuk meminimalkan halaman yang kita pakai selain itu menu ini juga bisa mempercantik tampilan pada Blog kita.
Oke langsung saja kita terapkan Cara ini ke dalam Web/Blog Sobat, Tampilan Menu MultiTab View seperti gambar di bawah ini :

Cara membuatnya sangatlah mudah, Beginilah Cara membuat Menu MultiTab View Sidebar di Blogspot tersebut

Ikuti langkah-langkah berikut:

• Login ke akun Blogger Sobat
• Masuk ke rancangan / design
• Pilih Tata Letak
• Pilih Add New Widget / Tambah Gadget / Element
• klik HTML/Javascript.
• Kemudian copy paste kode dibawah ini:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* 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 >TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">
<div class="Page">
<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 1

</div>
</div>

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

Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 2

</div>
</div>

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

Disini Kode HTML Content Widget YANG INGIN SOBAT 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');
</script>

Jangan lupa klik Simpan, Silahkan edit warna, ukuran menurut selera Sobat
Untuk mempermudah dalam pengeditan warna silahkan klik Disini
Selamat Mencoba,,,,,

Cara membuat Menu MultiTab View Sidebar di Blogspot

Share this to:

Facebook Twitter Google+

Anda sedang membaca artikel : Cara membuat Menu MultiTab View Sidebar di Blogspot dengan url http://arifpoetrayunar.blogspot.com/2011/08/cara-membuat-menu-multitab-view-sidebar.html

Artikel Terkait: Cara membuat Menu MultiTab View Sidebar di Blogspot

• Cara Menghilangkan Tanggal pada Postingan di Halaman Depan      Seacara default Blogspot akan menampilkan tanggal di atas posting. Gunanya tentu agar pengunjung tahu tanggal berapa sebu ...
• Tabel Kode Warna HTMLBerikut Tabel Kode Warna HTML WARNACONTOHKODE Antique_white#FAEBD7 azure#F0FFFF Bisque#FFE4C4 blanched_almond#FFEBCD cornsilk#FFF8DC eggshel ...
• Cara Cepat Menjadi Nomor Satu di GoogleKamu perlu trafik gratis?…dan sudah lelah blogwalking ? "Baca artikel ini…" "HANYA BAGI YANG SANGAT BUTUH TRAFIK"      Saran ...
• Cara Menghapus / Menghilangkan Link tulisan Powered by Blogger di Blog     Pada saat kita baru membuat blog di Blogger / Blogspot pasti kita kan memakai Template blog standar bawaan Blogger, dimana p ...
• Cara Pasang Iklan di Bawah Judul Posting Cara Pasang Iklan di Bawah Judul Posting - Posting kali ini Arif Poetra Yunar Blog akan memberikan tutorial tentang Cara Pasang Iklan di Bawah Jud ...