DESA CILEMBU

Cara Pasang Menu Tab View

Menu Tab View ~ banyak sekali diluar sana versi dari menu tab view ini, prinsipnya sih sama ajah, agar tampilan blog terlihat lebih profesional...gituh kalih.....ya gitu deh(kalau dijelasin bakal boring, mendingan liat contohnya di"statistik"....udah terlihat
Pasang Menu Tab View, caranya:
  • Masuk ke Dashboard ,
  • Pilih Layout => klik Edit HTML
  • Download Full Template
  • cari kode ini ]]></b:skin> 
  • Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 20px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 20px; /* 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: #4c4c4c; /* 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 */

  • Perhatikan text-text yang berwarna Hitam, silahkan disesuaikan ya.
  • Selanjutnya pasang kode berikut ini sebelum kode </head>
  • Save Templates
  • Selesai …  untuk langkah pertama,
Langkah ke (2) dua 
  • masuk kemenu "Page Elements"
  • Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,
  • Kemudian copy paste kode dibawah ini :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Menu 1</a>
<a>
Menu 2</a>
<a>
Menu 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">
<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>
Catatan :
  • Angka warna hitam adalah tinggi dan lebar tab view, 
  • Hijau Adalah text Menu utama
  • Kode yang berwarna Coklat adalah isi dari tab view
  • MAU CARI KODE WARNA, SILAHKAN DISINI

Enter your email address to get update from DESA CILEMBU.
Print PDF
Next
« Prev Post
Previous
Next Post »

33 komentar

wah mantap nie gan, ane juga dulu nyari. tapi ud ada bawaan ternyata, makasih dah ya tapinya. ok gan.

Balas

keren nih sob, ngomong2 blog besar nih.....

Balas

Menu tab vieuw punya Akang mah bisa 4 bagian Kang,kenapa di Cinta Deras ga bisa yach,tetap saja tiga tab.
Ane coba tips yang ini dulu,nanti klo berhasil ane ngasih tau lagi kesini.
Makasih tipsnya,wilujeng ngeblog.

Balas

nah kalo begini.sich di bookmark dulu..siapa tahu ada kepentingan kelak :)

Balas

. . wachhhhh,, ini ne dlu yg aq cari. di amankan dulu ach. he..86x . .

Balas

sama-sama, terimakasih juga silaturahminya moga jadi pahala...

Balas

wah iya nih kang, jadi menghemat ruang

nanti ah nyobanya, haturnuhun

Balas

udah saya praktekkin, tapi belum klik juga. maklum saya lemot. tapi boleh juga buat eksperimen nanti sore deh.

Balas

besar?!...apanya yang besar hayo...:o)
makasih udah mampir.

Balas

hehe...kolo mau jadi 4 kotak, tambahin azh.."Menu 4"kang, "ukuran lebar menu" juga dirubah kang.
mangga wilujeng ngoprek.

Balas

ngiring ngaramekeun ,,,

wilujeng sonten

Balas

mangga..silahkan, nyantey azh bang, yang penting hepi

Balas

dirante yah, jangan sampe kabur nanti ngga jadi aman lagi...86 kembali

Balas

juga menghemat uang juga kale...xixixii

nyantey azh kang

Balas

perlu kesabaran lebih kang, awas jangan sampe gaia 15 tahun yang lalunya muncul tuh...nanti PC nya ancur lagi...:o)

Balas

mangga kang, emang teu aya akang mah blog teh asa aya nu kurang, duka tah palih mana nyimpen susuk na..wahahaaaa

wilujeng sehat wae kang salam kanggo keluarga.

Balas

Terima kasih sahabat atas berbagi pengetahuannya mengenai tab menu view ini sahabat

Balas

nice info kawan, sangat bermanfaat.

Balas

sama-sama, semoga bermanfaat.
salam sehat selalu

Balas

nice seperti yang punya nya yah?...:o)

Balas

mateb bang. makasih atas sharenya. :D

Balas

asik atuh di copas dulu kang.nanti saya cobaan

hatur nuhun,kaburrrr

Balas

wow ellmu anyar yeuh, sayang otakna keur rudet ^_^

Balas

makasih sama-sama kang..sederhana azh kang

Balas

mangga, kangge akang mah bebas-lah.
eta tos dicobian hui haneutna?
...:0)

Balas

rudet can gajihan nya'?...wkwkwk
kalm ni..dido'ain besok rezeki tak terduga mampir ke nini...amin

Balas

followback sukses mas bro

Balas

Absen sob, soalnya aku belum paham html-an. Maaf aku boleh minta bannernya sob ?
ditunggu follow backnya
trimakasih.

Balas

silahkan duduk yang manis teman, semoga ini bisa meng-eratkan jalinan ini.
segera meluncur...:o)

Balas

kayaknya saat ini lagi suka baca komentar dan tanggapan komentar. segar, akrab dan menyegarkan karena ada yang bisa bikin senyum. ok.., tentang tab view memang dapat menghemat space di blog. saya salin dulu untuk di aduk-aduk, siapa tahu bisa tampil beda. Dan semoga ubi cilembunya makin maju. salam untuk tetangga dan petani ubi disana.

Balas

Aaaaaamiiiiin, terimakasih suportnya, silahkan ikuta bergembira dan ceria selalu

Balas

Hari ini Sundul Magetan berkunjung ke Desa Cilembu melalui mesin pencarian google dengan keyword Wujudkan Pilkada Magetan yang Damai dan Bersih.
Met beraktifitar Kang

Balas

Copyright © 2008 - DESA CILEMBU | Privacy Policy | Disclaimer | About | Created by Kompi ajaib - Powered by Blogger