Monday, December 8, 2008

Pasang Menu Tab View

No More Words
Setelah seminggu diberondong ujian blok XIV, kini ak sempat ngeblog lagi. Pas jalan-jalan pagi, nggak sengaja nemu Trik Tips Blogging. Tak sengaja kulihat sebuah menu yang sangat unik. Kurasa menu tab view ini sangat efektif dan efisien. Tanya kenapa? Dengan ukurannya yang mini dan imut ini, menu tab view bisa memuat isi yang banyak. Kupikir-pikir, menu tab view ini juga bisa digunakan untuk menyimpan link-link blog temen2ku. Kini, link blog temen-temen pun tlah mengisi menu tab view ini. Oya berhubung ak mindah linknya pake manual, mungkin ada link temen-temen yang lupa belum ak pindahin. Nah, buat temen-temen yang linknya belum ak pasang, ingetin aku buat masang link-nya yaa... ^_'v

Nah, gmn c cara memasang menu tab view ini? Berikut ini tutorial cara memasang menu tab view yang ak dapetin dari trik tips blogging:

1. Pilih menu Layout>>Edit HTML
2. Beri tanda centang pada Expand Widget Templates.
3. Kemudian masukkan kode berikut ini sebelum kode <]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;/* Lebar Menu Utama Atas */
text-align: center;
height: 24px;/* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #333333;/* Warna Border Atas Menu Utama */
border-left: 1px solid #333333;/* Warna Border Kiri Menu Utama */
border-right: 1px solid #333333;/* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #333333;/* Warna Border Bawah Menu Utama */
font-family: "verdana", Serif; /* Jenis Font Menu Utama Atas */
font-weight: 900; /* Ukuran Font Menu Utama Atas */
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #333333; /* Warna Background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #333333; /* Warna Border Kiri Kotak Utama */
border-right: 1px solid #333333; /* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #333333; /* Warna Border Bawah Menu Utama */
overflow: hidden;
background-color: #333333; /* Warna Backgroun 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 dicetak miring, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran, warna, dll.
5. Setelah mengatur warna dll, sekarang pasang kode berikut ini dibawah kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
6. Kemudian Save
7. Masuk ke bagian menu Layout>>Page elements
8. Pilih Add a Gadget >> HTML/Javascript
10. Masukkan script berikut ini:

<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:
- Kode yang berkedip-kedip Adalah text yang di Menu utama (Menu Atas).
- Kode yang ditulis miring adalah isi dari kotak tab view. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

10. Kemudian SAVE. Jadilah menu tab view yang imut.

11 comments:

  1. Tab 3-nya belum diganti ya...
    Boleh juga niee, saya coba ya

    ReplyDelete
  2. A friend of mine told me to come here can find what I want, I come, did not let me down, I like these things, very meaningful!

    ReplyDelete
  3. @ms.ndi0212

    sama-sama,bro..
    makasih udah berkunjung,bro..
    moga-moga bermanfaat.. :)

    ReplyDelete
  4. Bagus mas tutorialnya....anak kedokteran tho?q anak pertanian tapi UNS wae....Soale ra ndedet...btw lam kenal

    ReplyDelete
  5. Lam kenal mas, thank infonya...http://dsindangheula.blogspot.com http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif

    ReplyDelete
  6. tanks niinfonya,tp biyar tabny bs dklik g'mna sob?

    ReplyDelete
  7. thanks infonya sob.... salam kenal juga.... mampir duong di blog saya. thanks

    ReplyDelete