Senin, 08 Februari 2010

Membuat kotak ajaib

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 ]]>
3. Kemudian masukkan kode berikut ini sebelum kode ]]> atau kedalam tag CSS.

div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-family: "verdana", Serif;
font-weight: 900;
color: #1E62B6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #F2F2F2;
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
overflow: hidden;
background-color: #F2F2F2;
}
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://bloggerhosting.appspot.com/serve/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 :
<div class="clear"></div>
<div class="widget HTML" id="HTML4">
<div class="widget-content">
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 340px;" class="Tabs">
<a class="Active" href="javascript:tabview_switch('TabView', 1);">NEW'S</a>
<a class="" href="javascript:tabview_switch('TabView', 2);">Informasi</a>
<a class="" href="javascript:tabview_switch('TabView', 3);">MyFavorit</a>
</div>
<div style="width: 340px; height: 275px;" class="Pages">

<div style="overflow: auto; height: 300px; display: block;" class="Page">
<div class="Pad">

<!---- NEW'S---->
<ol>
<li><a href="masukkan url tujuan>Berita ekonomi</a></li>
<li><a href="masukkan url tujuan>Berita Politik</a></li>

</ol></div></div>

<div style="overflow: auto; height: 310px; display: block;" class="Page">
<div class="Pad">
<!---- INFORMASI ---->
<ol>

<li><a href="http://indo-traders.blogspot.com/" target="_blank">INDO-TRADER</a></li>
<li><a href="http://totomsukopratomo.wordpress.com/" target="_blank">totomsukopratomo</a></li>
<li><a href="http://www.forexbisnis.com/" target="_blank">FOREXBISNIS </a>(aliainvest/12345678)</li>

</ol>
</div></div>

<div style="overflow: auto; height: 310px; display: block;" class="Page">
<div class="Pad">
<!---- My Faforit---->
<ol>
<li>cek Tagihan <a href="http://202.162.217.251/info_billing/index.php" target="_blank">Listrik</a></li>
<li>cek Tagihan <a href="http://e-service.telkom.co.id/" target="_blank">Telpon</a></li>
<li><a href="http://www.myinvest451.co.cc" target="_blank">my blog</a></li>

</ol>
</div></div>

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

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

Keterangan :
- Angka2 atau text yang berwarna (300px) 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.

0 komentar: