Karena ada pertanyaan pada kolom komentar Gratis Download dari Rapidshare tentang bagaimana cara 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. 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. Ok untuk yang belum tau menu tab view seperti apa bisa liat contoh di bawah ini..!!!
Untuk membuat menu tab view seperti disamping 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.
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 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:
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://h1.ripway.com/jhaim/tabber.js' type='text/javascript'/>
Dengan trik yang sama, saya akan menjelaskannya dengan cara yang berbeda. 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. Ok untuk yang belum tau menu tab view seperti apa bisa liat contoh di bawah ini..!!!
Untuk membuat menu tab view seperti disamping 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.
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 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:
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://h1.ripway.com/jhaim/tabber.js' type='text/javascript'/>
