Membuat Tab View / Widget Multi Halaman Pada Blog

3 comments

Dari melihat gambar diatas, sobat pasti sudah mengerti apa yang saya maksud dari "Tab View", multi halaman/multi tab tersebut.
Membuat Widget Tab View bertujuan untuk menghemat tempat, sekaligus menambah kerapian dari blog/web tersebut.
Dan untuk Artikel ini sandiri dari blog Mas Pujiantoro di blognya http://pelajaran-blog.blogspot.com/2009/06/membuat-widget-multi-halamantabview.html.
Terima kasih Mas. 

Sebenarnya dalam pemasangan widget itu sendiri sangatlah sederhana,untuk sobat yang belum tahu cara membuatnya, sobat bisa ikuti langkah berikut :

Cara Membuat TAB VIEW / Multi Halaman 
                                                                                                                    
Untuk langkah pertama Pergilah ke Dashboard, lalu pilih Tata Letak/Rancangan, kemudian pilih Add New Widget/Tambah Gadget/Element Baru, pilih HTML/Javascript.
Letakkan kode berikut :
                                                                                                                   
<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 style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">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 ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
                                                                                                                   
Untuk kode yang bercetak Tebal, ubahlah dan gantilah sesuai keinginan anda, sedangkan kode yang berwarna Hijau, hanya sebuah penjelasan dari masing-masing kode.

Sekarang sobat tinggal menyisipkan kode-kode HTML yang ingin sobat letakkan pada masing-masing tab.
Sobat bisa meletakkan kode seperti, kode Shout, New Post, Recent Comment, Blogroll dll.

Contonhnya bisa sobat lihat di bawah ini :
Selamat Mencoba. 

3 comments :

  1. wah mantap juga tuh tampilannya sob jadi menghemat tempat keren pisan cuy

    ReplyDelete
  2. Boleh nih tutorialnya makasih y infonya...

    ReplyDelete
  3. gan . . saya tertarik ama . . categoris yang ente buat . . kalo bisa saya minta scrip nya gtuh . . .??? boleh kagak . .???? kalo bsa krim ke email gua . . mohon yach . .!!! gunawanmuhaemin@gmail.com

    ReplyDelete

Berikut adalah beberapa aturan untuk memberikan komentar di blog ini :

1. Semua komentar kecuali spam dipersilahkan.
2. Anda dipersilahkan jika ingin membuat permintaan dan pertanyaan.
3. Jangan gunakan nama-nama seperti Admin, Penulis, Operator, atau yang lainnya untuk memberikan komentar karena akan membuat orang lain salah paham.
4. Tinggalkan Alamat Email/Url Blog Anda, jika Anda memberi komentar sebagai "Anonymous"

"Terima kasih banyak telah berkomentar"