Cara Membuat Tab View Di Blog

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.

Ucweb Autotext

Hai sobat mwb....

Berhubung perut udah kenyang, kopi udah abis 2 gelas, rokok hbs 1 bungkus dan mata udh 5 watt... Jadi lebih baik langsung aja ya ke topik postingan

Hari ini saya ingin berbagi aplikasi yg sangat mantap,, tanya donk kenapa? sesuai judul'y,aplikasi yang saya maksud adalah UCweb handler dan ophand with BB autotext.

Udah pd tau kan tentang BB autotext? Klo blm tau c kebangetan deeh... Mungkin buat user v2 bs memakai multi'clipboard dan v3 dengan best-menu-s60v3.sis untuk mengeluarkan autotext ala BB.

Tapi jk msh menggunakan cara diatas berarti sobat harus membuka atau menjalankan 2 aplikasi secara bersamaan, betul? Tapi bersyukurlah krn sekarang ada opmin dan ucweb yg telah di inject autotext oleh mastah junior-hXm sehingga kita gak lg repot membuka 2 aplikasi, jika ingin mengeluarkan autotext/symbol2 pada saat brselancar di dumay.

Gambar diatas adalah penampakan dr ucweb dan utk opmin'y gak sempet saya ambil skrinsut'y krn mata udh gak bs kompromi lg.

Yang belum punya atau pengen nambah koleksi silahkan dibawa kabur aja shob... n' jgn lp sebelum menjalankan ucweb/opmin ini, pastikan hp sobat udh memakai font .ttf

ucweb-handler-autotext.zip

opmin7-autotext-original.zip

opmin5.1autotext.zip

opmin4.4autotext.zip

Jika ada yg pgn nambah koleksi autotext, disini saya juga menyediakan beberapa koleksi autotext dr mastah iHint.

autotext-by-ihint.zip

Dikarenakan saya menggunakan sc telkomsel, opmin7 original diatas saya edit server'y agar bs gratis bwt pengguna telkampret dan saya tambahkan UA Blackberry biar afdol.

om7autotext-ua-BB-gret-telkomsel.zip

Utk cara menggunakan autotext gampang koq, lagian udh ada menu "help" di saat akan mengeluarkan autotext.. Jadi gak usah takut sebelum berperang

STATUS BLANK

Jaili temanmu di facebook dg status blank ini di jamin pasti mengakui kehebatanmu di facebook,hehehe...

Silahkan di copy..monggo!!

@[1:1: 　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1: 　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1: 　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1: 　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1: 　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]@[1:1:　　]