membuat tab view

tujuan dari pembuatan tab view adalah untuk menghemat halaman blog.
isi dari tab view sendiri bisa berupa teks atau judul-judul artikel koleksi kita, banner teman, buku tamu ataupun gedget lainnya. lumayan bermanfaat bukan?
sebagai contoh tab view bisa anda lihat dihalam blog ini, dan yang akan saya bahas disini adalah cara membuat tab view tersebut.

cara membuatnya lumayan mudah dan pasti anda bisa:
yups kita mulai.
langkah-langkahnya.
Setelah anda masuk ke blogger atau draft blogger dengan akun anda, masuklah ke menu Rancangan lalu pilih Edit Html

Kalo sudah, silahkan anda memberi centang pada kotak Expand Template widget.

dan klik tulisan download template lengkap  jika anda tidak ingin kehilangan setingan sebelumnya.

Kemudian....

Carilah kode ]]></b:skin>

Untuk memudahkan pencarian tekan saja tombol <h2 style='display:none'ctrl; dengan huruf "F" secara bersamaan pada keyboard komputer anda ( tekan Ctrl+F ) atau tekan F3 Sampai muncul kolom pencarian. Lalu masukkan kode yang dicari kedalam kotak tersebut.

letakkan kode dibawah ini sebelum kode tersebut.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 94px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #2D8AF6; /* warna border menu */
border-bottom-width: 0;
font-family: &quot;Arial&quot;, Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #E3E4F9; /* warna latar menu */
color: #000000; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #B5A574; /* warna background menu aktif */
color: #823210;
}

div.TabView div.Tabs a:hover {
background-color: #B5A574; /* warna background menu hover */
color: #000000;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #2D8AF6; /* warna border kotak utama */
overflow: hidden;
 background:url("http://i817.photobucket.com/albums/zz91/hansem_x/Blog/BG-view.png"); /* 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;
font-size: 12px; /* besar hurup kotak utama */
} 

keterangan:
tulisan/kode berwarna biru adalah alamat gambar untuk background, silahkan anda ganti dengan alamat gambar yang anda inginkan.

cari kode </head>
kemudian letakkan kode dibawah ini sebelum/diatas kode tersebut.


<script src='http://mezzaluna08.bravehost.com/tab_view.js' type='text/javascript'/>

Kalo sudah klik simpan dibawah kolom edit html.

langkah awal selesai.

langkah berikutnya.
pergi ke menu tata letak/rancangan.

Pilh tambah gedet/add a gedget

pilih Javascript

masukan kode script dibahah ini pada kolom yang muncul.

silahkan maukkan script dibawah ini: lalu klik simpan/save.

<form action="tabview.html" method="get">


<div id="TabView" class="TabView">


<div style="width: 300px;" class="Tabs">


<a>judul/menu 1</a>


<a>judul/menu 2</a>


<a>judul/menu 3</a>


</div>


<div style="width: 300px;
height: 207px;" class="Pages">


<div class="Page">


<div class="Pad">


<span style="font-weight:bold;"><span style="font-style:italic;">Teks judul 1 </span></span>
<br />
1. <a href="masukkan alamat artikel anda disini">judul artikel disini</a>
<br />
2. <a href="masukkan alamat artikel anda disini">judul artikel disini</a>
<br />
3. <a href="masukkan alamat artikel anda disini">judul artikel disini</a>
<br />
4. <a href="masukkan alamat artikel anda disini">judul artikel disini</a>
<br />
5. <a href="masukkan alamat artikel anda disini">judul artikel disini</a>
<br />



</div>


</div>


<div class="Page">


<div class="Pad">


<span style="font-weight:bold;"><span style="font-style:italic;">Teks judul 2</span></span>
<br />

Silahkan masukkan teks atau script disini...

<br />


</div>


</div>


<div class="Page">


<div class="Pad">


<span style="font-weight:bold;"><span style="font-style:italic;">Teks judul 3</span></span>

Silahkan masukkan teks atau script disini...

</div>


</div>


</div>
</div>


</form>


<script type="text/javascript">


tabview_initialize('TabView');


</script>


keterangan/penting:
- teks warna biru pd kode diatas adalah kode ukuran silahkan anda ubah menyesuikan template anda.
- warna ungu/ judul, silahkan ganti dengan judul yang ingin ditampilkan
- teks warna hijau isi saja dengan nama judul ( sesuai yang anda ubah)
- jika ingin menambahkan artikel lainnya tinggal anda copypaste kode dibawah ini kemudian ganti nomornya. 1. <a href="masukkan alamat artikel anda disini">judul artikel disini</a>
<br />
atau hapus saja kode seperti itu jika anda tidak ingin menampilkan judul artikel

kalo sudah semua klik save/simpan dan lihat hasilnya.

sumber artikel dan gambar tab view: komud.blogspot.com

Silahkan Komentarnya...
selamat ngeblog....

http://fahimmunjul.blogspot.com