Membuat Getget (Widget) Tab View Di Blogspot

Bermula dari keinginan untuk membuat widget yang isinya terdiri dari 3 hal, yaitu Latih UN 2012 SMA IPA, IPS dan Bahasa, saya mencari cara untuk membuatnya. Bila 3 hal tadi dipisah tentu akan memakan tempat, akibatnya loading akan menjadi tambah lama. Untuk itu diperlukan getget tab wiew, yaitu widget yang berisi tab-tab yang tinggal diklik untuk menampilkan isinya. Perhatikan gambar di bawah ini!

Untuk membuat widget tab view ini ada 2 tehnik, yaitu dengan mengubah template dan tanpa mengubah template (cukup tambah getget). Tehnik pertama lebih ribet, sehingga saya pilih cara kedua. Cara ini saya dapat dari http://prasutan.blogspot.com. Terima kasih buat blog prasutan.blogspot.com.

Berikut ini langkah-langkah membuat getget tab view di blogspot:

  1. Login ke blogger
  2. Kli blog kita yang kita edit
  3. Klik Tata Letak
  4. Klik Tambah Getget dan pilih HTML/Javascript.
  5. Ketiklah kode script menu tab view di bawah ini dengan penyesuaian tentunya
  6. Hilangkan tanda petik (“) di awal dan di akhir script

“<style type=”text/css”>
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: “Verdana”, Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 5px 5px}
</style>
<script type=’text/javascript’>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// —– Tabs —–
var Tabs = TabView.firstChild;
while (Tabs.className != “Tabs” ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == “A”)
{
i++;
Tab.href = “javascript:tabview_switch(‘”+TabViewId+”‘, “+i+”);”;
Tab.className = (i == id) ? “Active” : “”;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// —– Pages —–
var Pages = TabView.firstChild;
while (Pages.className != ‘Pages’) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == ‘Page’)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+”px”;
Page.style.overflow = “auto”;
Page.style.display = (i == id) ? ‘block’ : ‘none’;
}
}
while (Page = Page.nextSibling);
}
// —– Functions ————————————————————-
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action=”tabview.html” method=”get”>
<div id=”TabView” class=”TabView”>
<div style=”width: 300px;” class=”Tabs”>
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style=”width:300px; height:250px; ” class=”Pages”>
<div class=”Page”>
<div class=”Pad”> Isi menu tab view 1
</div>
</div>
<div class=”Page”>
<div class=”Pad”> Isi menu tab view 2
</div>
</div>
<div class=”Page”>
<div class=”Pad”> Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type=”text/javascript”>
tabview_initialize(‘TabView’);
</script>”

Penyesuaian:

Tulisan warna merah, yaitu Judul 1, Judul 2, dan Judul 3 diganti dengan nama judul sesuai yang kita mau. Sedangkan tulisan warna biru Isi menu tab view 1Isi menu tab view 2, dan Isi menu tab view 3 kita isi dengan kode script yang kita inginkan. Jangan lupa hilangkan tanda petik (“) di awal dan di akhir script

Iklan

About Moch. Fatkoer Rohman

Saya seorang guru matematika di SMAN 1 Tanjung Lombok Utara. Pendidikan terakhir S1 Pendidikan matematika IKIP Surabaya (sekarang UNESA). Perjalanan profesi, pernah menjadi guru inti dan anggota tim desain pembelajaran matematika di Lombok Barat.

Posted on 4 Desember 2011, in Blogging, Trik N Tips. Bookmark the permalink. 2 Komentar.

Tinggalkan Komentar

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