Memasang Widget Tab View Pada Blog

Posted by Herman on Monday, April 13, 2009 36 comments

Beberapa waktu yang lalu ada yang menanyakan kepada saya bagaimana cara untuk membuat menu tab view seperti pada blog ini. Tetapi karena penjelasannya lumayan rumit jadinya sampai sekarang baru sempat saya posting.

Nah bagi anda yang belum tahu apa itu tab view. Tab view adalah sebuah widget yang mempunyai fungi tab dimana setiap tab bisa mewakili satu widget atau konten sehingga bisa menghemat ruangan pada blog anda. Contoh tampilannya seperti gambar dibawah ini.

Ok tanpa panjang lebar bagi anda yang tertarik untuk memasang widget tab view ini di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

<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: #000; /* 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: #ffffff">Tab 1</span></a>
<a><span style="color: #ffffff">Tab 2</span></a>
<a><span style="color: #ffffff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>

</div></div></form>

<script style="text/javascript" src="http://hermanblog.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
Keterangan:
Tulisan berwarna merah merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
Tulisan berwarna orange merupakan warna judul Tab
Tulisan berwarna hijau merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 180 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

4. Kalau sudah, klik Save. Selesai

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya.

Selamat mencoba. Semoga berhasil..


Recent Posts:

36 comments

AWS _NgOFaTiDoRe said... 15 April, 2009
Mas, maaf ni, blogq lagi ada masalah. knapa gak bisa nulis postingan baru, soalnya di Halaman DASBOR gak ada menu NEW ENTRI,PENGATURAN,TATALETAK,dll.
Mohan bantuan untuk memberikan solusi, makasih sebelumnya...
hazyarea said... 05 May, 2009
Woghhhh !!! luar biasa bang !! lebih simple dari versi Hoctro . aa coba dulu yah .... :|
Herman said... 05 May, 2009
@hazyarrea: yup silahkan. semoga berhasil
Squadkuna said... 23 May, 2009
nice posting gan. .
langsuk praktek. .

salam sahabat dari.
Squadkuna
herman said... 23 May, 2009
@squadkuna: salam juga dari saya. slamat mencoba. smoga berhasil..
Ardianz said... 27 May, 2009
bos., thx buat tutorialnya
fitri.ningtyas said... 08 June, 2009
gimana caranya biar tab kontent nya itu ga muncul di bawahnya??? kan jadi ga cantik bang
thanks banget yaaaaaa
herman said... 10 June, 2009
@fitri: muncul dibawah? krg ngerti neh :)) klu kontennya itu muncul didalam kotak konten. Contohnya bs anda liat di kolom sidebar blog ini. silahkan klik tabnya agar lbh jelas
pelajaran-blog.blogspot.com said... 19 June, 2009
Lam kenal mas herman..
saya dari Pelajaran Blog,sangat salut sama mas..
saya copy artikel nya ya,izin dulu he..
dah saya cantumin nama mas herman koq di postingan..
makasih ya..
artikel copas nya bisa dilihat disini
see you!!
dhana said... 01 July, 2009
posting yang bagus mas... thanks...
.:Mas Ayu @ Minah Kiwi:. said... 28 July, 2009
sorry ya.. i am malaysian ..so i don't know to speak your language..i speak english instead.

i have done tab view in my blog.. but how do i put the content into my tab view such as

+recent post
+recent comments
+categories
ajari aku hidup said... 06 August, 2009
mas aku kog gk bisa kayak yang laen yach coba di cek kesalahan saya mas

http://awasgila-103.blogspot.com/
SEO TIPS DAN LOAN INFORMATION said... 10 August, 2009
Thanks banget atas Ilmunya..

tapi kadang rada bingung soalnya pas refresh, eh linknya pada lari ke pinggir semua.. tapi udah bisa diatasi sendiri koq..:D:D:D:D:D:D:D
VanMoNky said... 19 September, 2009
LOH LOH LOH!!

Nyed udah coba, tapi kok tab-nya ga bisa diklik?
emank sih waktu di hover, warna tab-nya berubah
tapi ga bisa diklik
konten tab-nya pun tidak berubah

di blog mas herman juga begitu
tab-nya ga bisa diklik dan kontennya juga tidak bisa berubah

ada yang salah yah..?
Tak penting buatmu said... 06 December, 2009
Kenapa Ya?

Saya udah pasang, dan tampil secara komplit. tapi tab-nya gak bisa dibuka. mohon pencerahan
terims ya!
IT.Blog.com said... 14 January, 2010
terimakasih sharnya kang sangat membantu para pemula seperti saya
Rudi said... 19 April, 2010
Hai.met kenal
terima kasih diperbolehkan membaca blog ini
sangat-sangat bermanfaat buat saya.
saya mau coba

tx
dany crew said... 22 May, 2010
help me....
q pnya blog....
tp blog x cm 1 halaman...
jd smua numpuk di 1 halaman....
q blog q pnya halaman lain...
gmna cara nya....
help me...
bls crew_dany@yahoo.co.id
mhon d bntu
http://www.dany-crew.co.cc/
Casiopeia said... 05 July, 2010
tpi aneh nulis codenya dibagian mna?
abis add gadget kan harus milih gadetnya? trus nulis codenya di kotak yg mana?
Herman said... 06 July, 2010
@casiopeia:
copy kodenya ke widget html/javascript. maaf lupa disebutkan :D btw sudah saya ralat. thanks
Ruang TKJ said... 09 August, 2010
Salam kenal Mas .....
Saya ucapkan banyak terima kasih atas tipsnya semoga semakin sukses slalu ...
Leiko Chibi said... 11 December, 2010
Umm, koq munculnya dibawah ga diatas kaya tab di hermanblog.com ini, ya mas? :(
Kurniawan Rizky said... 09 January, 2011
maap ni mas,,cara ngecilin lebar nya gimana ya?
Âdâñ HÿЯôçǩҲ™ said... 22 January, 2011
kk kalo mau nambah widget di dalam kotak tab, tuh taruhnya di mna ya ???:D
beautycares said... 07 February, 2011
ga bisa nge link - in isi tab ke halaman yang dimaksud...jadi tab nya ada, kalo di klik malah keluar page error...hiks....belum mudeng. tolong bantu
Ernandrian said... 21 February, 2011
thak bos
gysoft said... 14 April, 2011
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif
mampir n follow di rumah sederhane ane gan???
Pinot TOet Toet said... 21 April, 2011
mas herman,tab 1 bisa saya buat tp kuq untuk tab 2 nya gk bisa ya?? tolong pencerahannya mas..
day said... 22 April, 2011
informasi bagus..
terimakasih
kunjungi kembali yach..:D
M Rizki said... 12 May, 2011
mAS HERMAN, GMANA KALO MW NGISI MENU TAB VIEW NYA DENGAN GADGET ASLI BLOGGER, TOLONG DI JAWAB YACH,..
raf king said... 08 June, 2011
aku udah pasang tabnya tapi di atas jumlah tabnya cuma 3 bisa nambah lagi g???caranya kayak gimana??
~x( aku udah nyoba ngerubah malah pusing, mohon bantuannya!!!
kunjungi newbie blog q ya di oret-oretankecil.blogspot.com :D
sin_can21 said... 17 June, 2011
sukses selalu bro....

from http://apasusahnya.blogspot.com/
skaluverrss said... 01 August, 2011
tidak bisa memasang..
mohon bantuannya http://musicluuverrs.blogspot.com
esagelo Go-Blog said... 30 August, 2011
Kalo masang dua widget tab view yang sama gimana om ? Soalnya punya saya kok jadi eror ya kalo di pasang 2 widget tab view ~x(
Ari said... 19 October, 2011
mas, di blog saya kok gak bisa,,
di klik menu tab nya,, contentnya gak keluar,, :((
Ants Kaka said... 24 March, 2012
@AWS _NgOFaTiDoReIYA BENER TUH,,,MAKSUDNYA YG BEGITU

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment