Sunday, 12.17.2017, 12:52 PM
N30-G4BR13L
Main | Publisher | Registration | Login
Site menu
Section categories
Trick Blog [9]
All About Computer and Network [3]
Hacking [22]
Do you know? [3]
Zona Religi [5]
Belajar Pemrograman [0]
My Diary [1]
My Playlist

My YM Pinbox

Powered by:
Statistics

Total online: 1
Guests: 1
Users: 0
Main » Articles » Trick Blog

Membuat Menu Tab View
Berikut saya akan menjelaskan bagaimana cara membuat menu tab view. Penggunaan menu tab view ini sangat efisien, karena dengan menggunakan satu layout kita bisa menampilkan beberapa informasi halaman pada tab-tab yang akan kita buat, jadi kita bisa menghemat tempat. Penggunaan tab view Widget pada blogger pernah di populerkan oleh Hoctro dengan menggunakan bantuan dari Yahoo! UI Library

Dengan trik yang sama, saya akan menjelaskannya dengan cara yang berbeda, karena segmentasi saya memang untuk para newbi seperti saya juga. Ok, trik ini saya dapatkan dari trik-tips.blogspot.com bagi yang langsung meluncur kesana saya persilahkan, namun saya disini juga akan menjelaskan dengan bahasa yang mudah dipahami oleh newbi. Sekedar info saja, saya pernah menggunakan tab view punya O-om, namun tab view tersebut terkadang tidak bekerja dengan baik, jadi saya agak kurang puas, mungkin karena loading java scriptnya terlalu berat atau gimana saya juga tidak mengerti, saya pikir trik dari trik-tips.blogspot.com yang lumayan bagus. Ok untuk yang belum tau menu tab view seperti apa bisa liat contoh di bawah ini!!!



Untuk membuat menu tab view seperti diatas caranya adalah:

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
Seperti biasa sebelum kita mengedit kode html pada blog kita biasakan selalu membackup template, untuk menjaga-jaga apabila ada kesalahan kita bisa mengembalikan template kita ke semula. caranya tinggal klik pada Download Template Lengkap.

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 #FFCC00; /* 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: #222; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFE16C; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #FFCC00; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFB7; /* 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. Kita bisa mengatur lebar, tinggi, dan warna pada elemen tab view ini. Untuk mengetahui kode2 warna silahkan lihat DISINI

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"

7. Lalu pilih ke menu,"Page Elements"

8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan kamu letakkan Menu 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 :
- Angka-angka atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview. Kamu bisa sesuaikan dengan lebar kolom tempat kamu menaruh menu tab view ini.

- Kode yang berwarna Hijau Adalah text yang akan mucul di Menu utama (Menu Atas/tab view). Ganti tulisan tab 1 , tab 2, dan tab 3 dengan judul tab yang kamu inginkan.

- Kode yang berwarna merah adalah isi dari tab view tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berwarna hijau stabilo. tambahkan menu tersebut dibawahnya.

Note:
@all: Untuk teman2 yg belum berhasil tab view menunya mungkin untuk alternative alamat javascriptnya bisa menggunakan kode berikut, jadi pada point 5, kodenya bisa diganti dengan kode berikut,

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

Happy blogging...!!!
Category: Trick Blog | Added by: neo-gabriel (08.02.2009)
Views: 416 | Rating: 0.0/0 |
Total comments: 0
Name *:
Email *:
Code *:
Search
Login form
My YM Status

Flag Counter
free counters
Silakan Berteriak!!
Link Back ya,
http://neo-gabriel.tk
My Friends

Copyright Neo-Gabriel © 2017