4

Cara Membuat Multi Tab View

Apa itu Multi Tab/ Tab View?
Membuat Widget Multi Halaman/TabView.
Jika sobat melihat gambar di samping ini, sobat pasti sudah mengerti apa yang saya maksud multi halaman/ multi tab tersebut.
Fungsinya selain mempercantik tampilan (mempercantik? secara...heuheu), pengunjung tidak repot menaik turunkan scrollbar hanya untuk mencari status dari blog tersebut.
Sebenarnya artikel ini sudah di publikasikan oleh Mas Herman di artikelnya ’Menambahkan Widget Tab View Pada Blog’.

Aneka Informasi, tanpa mengurangi etika blogging, akan menjabarkannya lagi.
Sebenarnya sangat sederhana dalam membuat widget bertab-tab ini, untuk yang belum tahu cara membuatnya, bisa mengikuti langkah berikut:


Cara Membuat Multi Halaman

Pergi ke Dashboard, lalu pilih Layout/ Tata Letak, kemudian pilih Add New Widget/ Tambah Gadget/ Element Baru, pilih HTML/ Javascript.
Masukkan 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 berwarna merah, ubahlah dan gantilah sesuai keinginan sobat, sedangkan kode yang berwarna hijau, hanya sebuah penjelasan dari masing-masing kode dan bisa sobat ubah sesuai keinginan, untuk pilihan warna bisa lihat di sini.

Sekarang tinggal menyisipkan kode-kode html yang ingin sobat letakkan pada masing-masing tab.
Sobat bisa meletakkan seperti, kode Shout, Recent Comment, Blogroll dan lain-lain.
Semoga berhasil...



Sumber : http://pelajaran-blog.blogspot.com/2009/06/membuat-widget-multi-halamantabview.html
Share this post :

+ komentar + 4 komentar

6 Maret 2013 10.40

waghhh ada video tutorialnya ga gan,,,,masih bingung neh gan,,huhuhuhuh

7 Maret 2013 14.09

@agen sbobet
Kalu diikuti dengan cermat pasti berhasil gan, awalnya sy juga bingung tp setelah praktek jadi tau :)

27 Maret 2013 08.05

keren bro...detail penjelasannya, coba praktekan dulu sapa tahu jalan di web ane. thanks yoo

1 April 2013 21.54

Gan gimana cara mendapatkan Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3?
Thx Gan

Posting Komentar

Peraturan Berkomentar :

• Jangan menggunakan bahasa yang tidak sopan dan mengandung Politik,
Sara, Pornografi serta Menyinggung.
• Bentuk komentar tidak bernilai keagamaan.
• Tidak di ijinkan menampilkan link (URL).
• Dilarang promosi saat berkomentar.

Jika melanggar kriteria di atas, maka admin berhak menghapus komentar tersebut.

Terima kasih sudah berkunjung.
by Aneka Informasi

 
Design by: Darmanto.com. Modified by: Aneka Informasi
Copyright © 2012. Aneka Informasi . All Rights Reserved
Created by: Creating Website. Published by: Mas Template
Powered by Blogger
Top Bottom