23 July 2008

(249) Comments

Cara Membuat Menu Tab View

Kendhin

Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :




Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>



6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div>
</div>


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

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



Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.




Artikel yang Berhubungan :



Jumlah Komentar = 249
KODOK said :
01 August, 2014
TOP MARKOTOP
cari Obat Penyakit Sipilis Pada Wanita Hamil
04 August, 2014
Gan artikelnya bagus ane seneng bacanya bermanfaat gan... maaf gan semoga berkenan untuk mengunjungi situs kami yang membahas tentang penyakit kelamin gan...obat alami penyakit sipilis pada pria ~ artikel obat sipilis pada pria ~ cara obat sipilis pada pria
04 August, 2014
Gan... Artikelnya bagus gan saya senang membacanya... salam kenal gan dan jangan lupa kunjungin situs kami yang membahas tentang penyakit kelamin...obat sipilis terbaik ~ obat sipilis tetracycline ~ obat sipilis tradisional
15 August, 2014
Gan Artikelnya bagus mantaf gan ane demen... salam kenal ya gan... dan jangan lupa juga kunjungi situs kami yang membahas tentang penyakit kelamin semoga berkenan gan... ~ cara obat sipilis pada pria ~ obat untuk penyakit sipilis pada pria ~ tips obat penyakit sipilis pada pria
19 August, 2014
Gam Artikelnya bagus dan keren abis... Salam kenal gan dan jangan lupa kunjungin juga situs kami yang membahas tentang penyakit kelamin... semoga berkenan gan tararengkiew... ~ obat sipilis manjur ~ obat sipilis paling manjur ~ Obat Sipilis yg ampuh ~ obat sipilis yang paling mujarab ~ obat sipilis yamh ,anjur
19 August, 2014
Gam Artikelnya bagus dan keren abis... Salam kenal gan dan jangan lupa kunjungin juga situs kami yang membahas tentang penyakit kelamin... semoga berkenan gan tararengkiew... ~ obat sipilis paling manjur ~ obat sipilis paling ampuh ~ obat sipilis paling mujarab ~ obat sipilis yang manjur ~ obat sipilis yang mujarab
teguh sans said :
25 August, 2014
Salam kenal gan...Artikelnya sangat bermamfaat..jangan lupa kunjungi situs kami juga yang membahas tentang herpes..tingkiyu gan... ~ Obat Herbal Herpes ~ Obat Herpes Herbal Kulit ~ Obat Herpes Herbal Ampuh
teguh sans said :
25 August, 2014
Artikelnya rapi dan Menarik gan...jangan lupa kunjungi juga situs kami yang membahas tentang Herpes ~ obat herpes 2014 ampuh ~ Obat herpes 2014 ampuh untuk wanita ~ Obat Herpes 2014 ampuh hilangkan herpes dalam 3 -5 hari ~ Obat Herpes 2014 ampuh dari bahan alami ~ Obat herpes 2014 ampuh cepat obati herpes
17 September, 2014
Kegunaanya tab view itu untuk apa sih? seberapa pentingkah?
Aji Maulana said :
20 September, 2014
Mksh tips'y Gan ditunggu kuliknya di http://azydsign.blogspot.com
Agus Rahman said :
18 November, 2014
Bermanfaat sekali nih beritanya,
makasih banyak ya pa admin telah memberikan poto cara berita yang sangat bagus ini.
obat wasir said :
02 December, 2014
cara instan
ERCEDI said :
06 January, 2015
Ijin numpang lapak link gan

DETEXSI
ERCEDI said :
06 January, 2015
Ijin numpang lapak link gan

DETEXSI
12 January, 2015
mkasih....tutornya sangat brguna dan bs d fahami
Info said :
31 January, 2015
tks infonya
02 March, 2015
De Nature | Solusi Pengobatan Herbal Ampuh Untuk mengobati Sipilis, Kutil kelamin, kencing nanah, Gonore, Kanker serviks, keputihan, Herpes dan penyakit kelamin lainnya
07 April, 2015
To create a such kind of article is really amazing,I daily read your blogs and give my announcement for that here this article is too great and so entertaining.
Wisnu Tea said :
03 June, 2015
wah bagus sekali
Wisnu Tea said :
03 June, 2015
wah bagus sekali
22 July, 2015
You may post on the skilled credentials for the journal owner. you may specific it's outstanding. Your journal expertise will springboard your click through. Horse Racing Betting
Unknown said :
26 December, 2016
nitip pasang backlink ya sob....
Agen Poker Terpercaya
Unknown said :
26 December, 2016
artikel yang bagus sob....
Agen Poker Terpercaya

Unknown said :
26 December, 2016
Agent togel Singapore terpercaya
«Oldest ‹Older   201 – 249 of 249   Newer› Newest»

Post a Comment