Cara Membuat Tab View Pada Blog

Menangapi dari beberapa permintaan yang di ajukan kepada saya oleh beberpa sobat blogger. Kali ini saya mencoba untuk berbagi tutorial blog lai kepada temen-temen semua. Da npaa tulisan kali ini kitaakan mencoba untuk membahas tentang cara membuat menu tabview. Bagi
yang belum tahu apa itu menu tab view contohnya dapat temen lihat pada gambar di samping

Sebenarnya ada banyak variasi tampilan dari menu tab view yang dapat kita buat. Tetapi, pada tulisan ini kita bahas duluh cara pembuatan menu tab view dengan tampilan seperti
Gambar diatas. Gimana kira-kira tertarik ngak untuk membuatnya ? yaudah kalau anda merasa tertarik unuk membuat menu tab view di atas silahkan anda ikuti tutorial di bawah ini.



Cara membuat tab view :

1. Login ke blogger lalu klik menu Layout lalu ambil pilihan Edit Html

2. sesampainya dikotak pengeditan Html cari kode ]]></b:skin>

3. setelah ketemu sisipkan kode di berikut ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 65px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 4px dotted #A3A3A3; /* 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: #2A1B0A; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color:#666666; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 4px dotted #A3A3A3; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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. setelah kode di atas dipasang, selanjutnya temukan kode </head> dan taruh kode dibawah ini sebelum kode </head>

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

Info Penting :

"Sebaiknya anda upload sendiri kode js ini keserver penyimpanan JavaScript yang anda ketahui agar nantinya tab view anda dapat berfungsi dengan baik.
Fungsi dari kode JavaScript di atas adalah agar tab view anda dapat berpindah tab dari tab satu ketab lainnya. Jadi, jika tab view anda nantiya tidak dapat berpindah tab maka sebaiknya anda upload ulang kode JS ini ke server penyimpanannya dengan account anda sendiri. Anda dapat mengupload file Js ini diantaranya ke www.fileave.com. Untuk cara pengaploadannya Insyaallah akan segera di publish"

5 setelah selesai klik tombol SAVE

6. kemudian pegi ke halaman “Taa Letak” atau "Page Elements" jika anda menggunakan bahsa inggris

7. lalu PIlih "Add a Gadget" >>> "HTML/Javascript"


8. akan muncl sebah kotak kosong, lalu Isikan kode dibawah ini kedlam kotak kosong ersebut ( sama halnya dengan cara memasukkan kode shoutmix/buku tamu )

<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 yang berwarna biru (350px) adalah angka yang menunjukan lebar tab view dapat diganti dengan angka lain sesuai dengan ukuran sidebar blog anda.


- Angka yang berwarna biru (250px ) adalah angka yang menunjukan tinggi tab view dapat diganti dengan angka lain sesuai dengan ukuran sidebar blog anda


- Kode yang berwarna abu-abu adalah tulisan yang akan ditampilkan di menu utama (Menu Atas).


- Kode yang berwarna ungu adalah isi dari tabview. Kamu bisa mengisinya dengan link postingan anda, gambar, kode javascript recent comment, kode java script recent post,dll

Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan Disini: