Cara Membuat Menu Multi Tab View Di Blog

Cara Membuat Menu Multi Tab View Di Blog - Selamat malam para blogger.. Sudah beberapa hari kemarin saya tidak update tentang tutorial blogger karena masih banyak kegiatan yang harus dikerjakan. Dan malam ini saya akan membuat tutorial blogger lagi dengan bahasan tentang Cara Membuat Widget Multi Tab View Di Blog.

Banyak sekali bahasan tentang tutorial ini di google. Banyak juga para blogger memanfaat tutorial ini untuk blog mereka. Dan saya akan jelaskan maksud dari tutorial ini. Multi tab view, dari nama nya sudah sangat jelas. Multi=lebih tab=menu view=melihat. Jadi maksud tutorial ini adalah Cara membuat widget menu lebih dari satu di blog.

Banyak sekali template atau pun blog yang menggunakan tutorial ini untuk meringkas atau menghemat tempat blog mereka. Dikatakan menghemat tempat karena bebarapa widget bisa menjadi satu widget berdampingan. Jika diklik menu tab view nya akan muncul widget pertama. Jika di klik menu tab view sebelahnya, akan muncul widget kedua.

Biasanya para blogger menggunakan tutorial cara membuat menu tab view di blog untuk mengisi widget seperti related post, popular post, label, arsip blog, ataupun recent comment. (Baca juga: Cara Membuat Related Post / Artikel Terkait Di Blog - Cara Membuat Widget Popular Post Dengan Gambar Round Corner - Cara Membuat Label Miring Saat Disentuh Cursor Blog - Cara Membuat Recent Comment Dengan Avatar Di Blog)

Dan sobat sudah paham kan maksud dari tutorial ini? Ini sudah sangat jelas, jika sobat masih kurang jelas, sobat bisa lihat gambar dibawah ini mengenai apa itu menu multi tab view di blog:

1. Login Blogger
2. Tata letak/layout
3. Add gadget/tambahkan gadget
4. HTML/JavaScript
5. Copy kode dibawah ini kemudian paste kan pada kolom HTML/JavaScript:

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

 Masukkan kode HTML widget yang akan dipasang pada tab ke-1


 </div>
</div>

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

 Masukkan kode HTML widget yang akan dipasang pada tab ke-2


 </div>
</div>

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

Masukkan kode HTML widget yang akan dipasang pada tab ke-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>

6. Simpan
*Keterangan: Masukkan kode HTML widget yang akan dipasang pada tab 1, 2, dan 3. Contoh nya jika sobat ingin memasukkan widget recent comment. (Baca juga: Cara Membuat Recent Comment Dengan Avatar Di Blog)

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Menu Multi Tab View Di Blog
Deskripsi	Cara membuat menu tab view di blog memudahkan untuk pengunjung menjakau widget penting Anda sekaligus menghemat tempat blog Anda.
Author	Google
Author Rating	87%/ 100% Suara Dari 2244 votes