Cara membuat Menu MultiTab View Sidebar

Cara membuat Menu MultiTab View Sidebar

ARTIKEL TERKAIT:

Tutorial Blogger

• Membuat Artikel Terkait (Related Posts)
• Mengganti Background Blog dengan Gambar
• Membuat Keyword Smart Link di Artikel Blogger
• menampilkan foto google plus di kotak komentar
• Membuat Menu Navigasi Horizontal Melayang Dengan CSS
• Membuat Menu Navigasi Slide Out
• membuat kotak komentar facebook berdampingan dengan kotak komentar blogger
• Membuat Widget melayang atau sliding widget
• Cara buat tab menu atau multi tab
• Cara Membuat Blog hanya menampilkan judul postingan saja
• Cara membuat tabel kode warna sendiri di Blog
• Mengganti Nama Author Menjadi Signature
• Cara Pasang Read More Otomatis di Blog
• Mengganti icon blog bawaan Blogger
• Cara Membuat klik 1 Link menjadi 2 halaman
• membuat floating bar berlangganan artikel di Blog
• Membuat Fitur Slideshow di Home Blogger
• Cara buat gallery dengan efek hover zooming
• Compress CSS untuk mempercepat Loading Page blog anda
• Mengatur Jadwal Posting
• meletakkan Judul Post di Bagian Awal Judul
• Menambahkan gambar disamping judul post
• Membuat Buku tamu menggantung (Floating Bar)
• menyertakan link backlink dibawah artikel
• Cara Memasang Flash Di Blog

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,,,,,