Membuat Tab View di Blogspot

Kemarin waktu browsing saya mendapatkan sebuah tool/trik/script baru dari blog sebelah yang bisa mempercantik tampilan dari blog kita, yaitu Tab View. Dengan menggunakan tab view kita bisa meringkas widget-widget kita sehingga dapat memberikan space/ruang kosong baru yang bisa kita gunakan untuk keperluan lain.

Nah ternyata mudah sekali pembuatannya, silahkan tambahkan widget baru (Javascript/HTML) lalu isikan kode dibawah ini:

<style type=”text/css”>div.TabTampil div.TTs{height: 24px; overflow: hidden; }div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active{ background-color: #77d0ee; }div.TabTampil div.Halamans{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}div.TabTampil div.Halamans div.Halaman{ height: 100%; padding: 0px; overflow: hidden; }div.TabTampil div.Halamans div.Halaman div.Alas{ padding: 3px 5px; }div.TabTampil div.TTs a{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;display: block; width: 104px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: “Arial”, Serif;font-size: 12px; font-weight: 900; color: #222}</style>

<form action=”tabtampil.html” method=”get”>
<div id=”TabTampil”>
<div style=”width: 318px;”>
<a>Tab 1 Name </a> <a>Tab 2 Name</a> <a>Tab 3 Name</a>
</div>
<div style=”width: 316px; height: 200px;”>
<div>
<div>
<a href=”http://quickbond.blogspot.com/search/label/SEO/”>SEO</a&gt;
<a href=”http://quickbond.blogspot.com/search/label/Tips Trik/”>Tips Trik</a>
<a href=”http://quickbond.blogspot.com/search/label/Ngeblog/”>NgeBlog</a&gt;
<a href=”http://quickbond.blogspot.com/search/label/Pemrograman/”>Pemrograman</a&gt;
</div>
</div>
<div>
<div>Silahkan isi disini…<br>Bisa javascript/HTML</div>
</div>
<div>
<div>Silahkan isi disini…<br>Bisa javascript/HTML</div>
</div>
</div>
</div>
</form>

<script style=”text/javascript” src=”http://meichelina.googlepages.com/newscriptab.js”></script&gt;
<script type=”text/javascript”>tabtampil_inisial(‘TabTampil’);</script>

Keterangan:
1. Kode yang berwarna merah adalah kode CSS untuk pengaturan tampilan
2. Kode yang berwarna hitam adalah kode HTML untuk menampilkan tab-tabnya
3. Kode yang berwarna hijau adalah kode javascript yang diambil dari sumber lain, bisa dilihat alamat urlnya
4. Silahkan diganti judul tabnya pada bagian “Tab 1 Name”, “Tab 2 Name”, dan “Tab 3 Name” diatas atau jika ingin ditambahkan juga bisa.
5. Untuk pengisiannya silahkan diisi dibagian antara:

<div>

dan

</div>

pada kode yang berwarna hitam secara urut sesuai nama/judul tabnya. Sebagai gambaran, saya mempunyai 3 tab name, oleh sebab itu saya juga membuat tag <div> sebanyak 3.
6. Sekian, semoga bermanfaat

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: