Home » , » Cara Membuat Tab View Multitab di Blog

Cara Membuat Tab View Multitab di Blog

Written By Justang Zealotous on Sabtu, 18 Agustus 2012 | 07.16

Cara Membuat Tab View Multitab di Blog
Setelah ganti template blog Belajar Internet, dan hasilnya seperti Anda lihat sendiri (sudah bagus ngga?) dan ada yang baru di blog admin, yaitu Tab View Multitab. Jujur, tab view multitab ini sudah pernah saya coba untuk template lama, tapi ternyata selalu gagal, karena tutorial yang saya pakai adalah super simple (bukan mr. simple). Tapi, untung saja setelah berjelajah ke google, akhirnya saya temukan caranya di blog http://catatanku-yd.blogspot.com, memang tidak simple tapi hasilnya Berhasil!!!. Lansung saja, artikel yang admin akan posting pada malam takbiran ini di bulan Ramadhan adalah membahas tentang Cara Membuat Tab View Multitab di Blog. Sudah tahu kan, apa itu tab view multitab? Jika Anda belum tahu, silahkan Anda perhatikan di bagian sidebar kanan blog ini atau lansung saja perhatikan gambar di bawah ini.

Cara Membuat Tab View Multitab di Blog
Tab View Multitab ini sangat berguna untuk memberikan ruang yang lebih untuk widget-widget yang ada di blog Anda. Tentunya, dengan hal ini tampilan blog Anda akan lebih rapi. Tanpa basa basi lagi, ayo kita TKP.

1. Silahkan masuk ke akun blogger Anda
2. Masuk pada bagian template dan klik Edit HTML
3. Setelah itu silahkan Anda cari kode ]]></b:skin>, untuk memudahkan pencarian, silahkan Anda tekan CTRL+F
4. Silahkan salin kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin> tadi.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold; /* besar hurup menu */
background-color: #6666FF; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
/* tabview css end */

5. Selanjutnya cari kode </head> dan silahkan salin kode di bawah ini tepat di atas kode </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type='text/javascript'/>

6. Simpan template, kemudian kembali ke Tata Letak, klik Tambah Gadget
7. Pilih HTML/Javascript
8. Selanjutnya salin kode di bawah ini dan letakkan disana, judul tidak perlu diisi.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 950px;">

<a>Judul 1</a>
<a>Judul ke 2</a>
<a>Judul ke 3</a>
<a>Judul ke 4</a>

</div>
<div class="Pages" style="width: 950px; height: 270px;">
<div class="Page">
<div class="Pad">

Isi tab view pertama


</div></div>


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

Isi tab view ke 2

</div></div>

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

Isi tab View ke 3

</div></div>


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

Isi Tab view ke 4

</div></div>

</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

9.  Simpan dan lihat hasilnya

Catatan Penting banget ::

1. Kode warna merah silahkan sesuaikan denga template Anda.
2. Kode warna ungu, ganti dengan judul tab
3. Kode warna biru, Anda ganti untuk menyesuaikan lebar dan tinggi tab view nya.
Share this article :
Comments
7 Comments

7 komentar:

Blogaul mengatakan... [Reply]

Wauw berhasil gan.. Thanks ya...

Wimpy Kurniawan mengatakan... [Reply]

gmna sih bro caranya , w udh ikutin tp g bisa ..
klo ga , saya minta copyan dri punya situ aja bro .. udh mentok otak saya mikirinnya .. thx before

Justang Zealotous mengatakan... [Reply]

@Wimpy Kurniawan apanya yang susah gan, gampang aja ko' caranya... yang terpenting itu harus hati-hati..hmhmh

pondoklukman mengatakan... [Reply]

artikelnya bagus gan, mudah dimengerti. terima kasih sudah berbagi.

ditunggu ya, kunjungan baliknya.

johanrazaq mengatakan... [Reply]

caranya memasukkan gadget ke dalam kotak utamanya bagaimana, bang???

ibnu mengatakan... [Reply]

Tipsnya sangat membantu. Ditunggu tips lainnya !
visit back http://novaibnu.blogspot.com/

Tutorial mengatakan... [Reply]

Terimakasih atas informasinya. Silahkan berkunjung ke blog saya Doa Ibu Blog

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!
Pasang Yahoo Emoticon Anda

Posting Komentar

Jika ada yang kurang paham mengenai artikel ini, silahkan kirim komentar dan harus relevan dengan isi artikel di atas.INGAT jangan memberikan komentar dengan bumbu SPAM,P*RNO,PROMO,LINK !!! Terima Kasih dan jangan lupa follow blog ini nanti saya akan follback promise

 
Back To Top : Klik untuk Kembali ke Halaman Atas ↑↑↑
Copyright © 2011. Belajar Internet - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Free Coupons