Home
.Apk
Apa itu tab view? coba sobat lihat widget yang saya beri judul "Silahkan dipilih", nah! itulah yang disebut dengan menu tab view. Mungkin sobat ingin membuat menu tab view ini untuk dipasang di blog sobat. Menu tab view ini bisa sobat isi dengan link, gambar atau video. Jika saya menggunakan menu tabview ini sebagai link daftar isi, memang agak sedikit repot karena kita harus mengupdate daftar isinya secara manual bukan otomatis, inilah yang menyebabkan daftar isinya suka telat terupdate padahal postingannya sudah muncul disebabkan saya agak malas mengupdatenya secara manual, hehehehe. Tertarik ingin membuatnya? Cekidot bro...Berikut Tutorialnya:
- Login ke blog sobat, lalu pilih menu "Rancangan" --> "Edit HTML".
- Untuk menghindari hal yang tak diinginkan, backup lah terlebih dahulu template sobat dengan menekan tombol "Download Template Full".
- Kemudian carilah kode ]]></b:skin>. Jika sudah ketemu, pastekan kode dibawah ini sebelum kode ]]></b:skin>.
- Kemudian, cari kode </head> dan pastekan kode dibawah ini sebelum kode </head>.
- Simpanlah template sobat.
- Selanjutnya, silahkan menuju ke menu "Elemen Halaman". Lalu klik "Tambah Gadget" --> "Tambah HTML/Javascript" dan pastekan kode dibawah ini pada kotak HTML/Javascript.
- Kode berwarna ungu adalah tinggi dan lebarnya tab view yang bisa sobat sesuaikan menurut selera.
- Kode berwarna orange dapat sobat ganti dengan judul tab yang sobat inginkan.
- Kode berwarna merah dapat sobat masukan link postingan, gambar dan video.
/* 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: #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 */
Ket: Anda bisa mengubah teks berwarna biru sesuai dengan keinginan sobat.
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>
<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>
Ket:
Selamat mencoba sendiri bro/sis...
Semoga berguna dan bermamfaat...
Gunakan layanan 4shared generator (klik di sini ) untuk mempermudah mendonwload file dari 4shared tanpa perlu login.
untuk bahasa php mau ngak mas ? coz saya pake joomla....
wah kalo itu saya kurang tahu bro, soal'a blom pernah coba di php
Makasih mas buat tipsnya, mau langsung dipraktekkan nih..
hehehe
ta coba yo,kalo da pa2,ta tanya meneh,jo kapok ya mas bro.matur suwun sampun dibantos...salm kenal ja ya
kok di blog ku ga ada scrool nya yah,gimana cara munculin scroolnya?