Jika pada suatu blog memiliki daftar isi bacaan yang sangat panjang, lalu aksesoris widget dan lokasi untuk link teman yang saling berderet, tentu memerlukan ruang yang sangat panjang pula. Nah, mungkin dengan menambahkan tab view pada blog anda, akan sangat membantu untuk mengatasi masalah ruang tersebut, karena Tab view akan sangat berguna untuk menghemat ruang pada blog. Untuk membuat widget tab view seperti yang terlihat pada blog saya yang terletak di bagian widget sebelah bawah dan cara membuatnya pun tidaklah terlalu sulit. yuk, langsung saja kita praktekkan cara membuatnya.
1. Masuklah ke dashbor blogspot anda.
2. Klik menu "Rancangan"
Pada halaman "Rancangan", kamu akan berada pada halaman "Elemen Laman" untuk mengedit tata letak.
3. Buat widget baru dengan mengklik elemen "Tambah Widget" lalu pilih "Html/javascript", kemudian copy paste kode dibawah ini, kemudian simpan.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Daftar Isi</a>
<a>Banner</a>
<a>Link teman</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
<ul>
<div style="background-color: yellow; padding: 5px; text-align: center; color: #000fff;"><span style="font-weight: bold;">Tutorial Photoshop</span>
</div>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/belajar-adobe-photoshop-pengenalan.html" target="_blank">Belajar Photoshop (Pendahuluan)</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/mengenal-cara-membuat-seleksi-pada.html" target="_blank">Cara membuat seleksi</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/04/mengenal-layer-efek-filter-dan-style.html" target="_blank">Mengenal Layer, efek filter dan style</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/cara-membuat-tulisan-teks-pada-foto.html" target="_blank">Membuat tulisan pada Foto</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/cara-cara-membuat-gambar-hidup-dengan.html" target="_blank">Cara membuat gambar hidup (Animasi gif)</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/cara-mudah-mengecilkan-dan-merubah.html" target="_blank">Cara mengubah ukuran gambar animasi gif</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/cara-membuat-foto-bingkai-menambahkan.html" target="_blank">Menambahkan bingkai pada foto</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/cara-cara-mengganti-latar-belakang.html" target="_blank">Cara mengganti background foto</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/cara-cara-memiringkan-foto-trik-membuat.html" target="_blank">Cara memiringkan Foto pada background</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/03/cara-membuat-foto-3d-trik-memiringkan.html" target="_blank">Trik membuat foto didinding atau reklame</a></li>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com/2011/04/membuat-foto-anda-seperti-mengeluarkan.html" target="_blank">Membuat foto anda seakan-akan seperti mengeluarkan sinar aura</a></li>
</div>
</div>
<div class="Page">
<div class="Pad">
<ul>
<li>
<div style="text-align: center;">
<a href="http://esagallery.blogspot.com/" target="_blank"><img alt="follow me" src="http://i1100.photobucket.com/albums/g413/esaradesa/Esa-In-Gallery.gif" title="Silahkan Kunjungi, Kawan..!" width="160" /></a></div></li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<ul>
<li style="text-align: center;"><a href="http://esagallery.blogspot.com" target="_blank">Esa In Galleri</a></li>
<li style="text-align: center;"><a href="http://bikiniklangratis.blogspot.com" target="_blank">Galleri Iklan Gratis</a></li><!--link yang ini jgn dihapus, skalian nitip ya-->
<li style="text-align: center;"><a href="http://masukkan_alamat_disini_1" target="_blank">Nama situs 1</li>
<li style="text-align: center;"><a href="http://masukkan_alamat_disini_2" target="_blank">Nama situs 2</li>
<li style="text-align: center;"><a href="http://masukkan_alamat_disini_3" target="_blank">Nama situs 3</li>
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
4. Selanjutnya, masih dihalaman rancangan, klik "Edit html". Setelah masuk di halaman edit html, untuk berjaga-jaga dari resiko kegagalan, silahkan backup dulu template kamu dengan mengklik "Download template lengkap".
5. Kemudian tekan Ctrl F lalu cari kode html </head>, setelah ditemukan copy paste kode script dibawah ini tepat diatas kode </head>
<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>
6. Selanjutnya cari kode ]]></b:skin>, Lalu copy paste kode html dibawah ini
tepat diatas kode ]]></b:skin>.
div.TabView div.Tabs
{height: 30px;
overflow: hidden;}
div.TabView div.Tabs a
{background-color: #fff;
float: left;
display: block;
width: 98px; /* Lebar menu Judul tiap tab*/
text-align: center;
height: 30px; /* Tinggi menu Judul tiap tab*/
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000fff; /* 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: #f0fcc7; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000fff; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #f0fcc7; /* 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;
}
6. Setelah selesai, sebelum disimpan sebaiknya klik dulu "Pratinjau", jika tabview sudah terpasang, lanjutkan dengan mengklik "Simpan template"
7. Selanjutnya silahkan di cek untuk menguji fungsi dari tab view, karena jika diklik pada saat pratayang tadi, tab view tidak akan berfungsi dengan baik.
8. Jika tab view sudah berfungsi, silahkan lanjutkan dengan mengedit daftar isi dari tab view kamu dengan merujuk pada contoh isi tab view yang sudah kamu pasang tadi.
Catatan:
- agar tidak terjadi kesalahan dalam melakukan copy paste semua kode-kode diatas, sebaiknya copy setiap kode diatas tadi dan pastekan dulu pada note pad, nah, barulah dari note pad tersebut dicopy lagi dan pastekan ke template dan widget pada blog kamu.
- Tab view ini terdiri dari 3 tab. dengan ukuran lebar tabview 300px dan lebar menu judul tab 98px. Jika ukuran lebar widget kamu kurang dari 300px, maka jumlah tab yang ditampilkan otomatis akan berkurang dengan sendirinya dikarenakan lebar widget kamu kurang dari 300px.
Untuk mengatasinya, misalkan lebar widget kamu 250px, maka yang harus kamu ubah adalah, sbb:
1. kode lebar tab view pada kode yang pertama diatas, yang di pastekan pada widget. ubah angka 300 menjadi 250, atau lebih kecil misalnya menjadi 240.
2. kembali masuk ke "Rancangan" lalu ke "Edit html". kemudian ubah kode lebar pada kode html yang terakhir tadi pada bagian yang ditandai dengan /*lebar menu judul tiap tab*/, yang semula 98px menjadi 81px (untuk lebar tabview 250px) atau 78px (untuk lebar tab view 240px).
Selesai, selamat mencoba dan semoga bermanfaat....!
izin sedot gan............!!!!!
BalasHapuswww.asianadesun.com
Silahkan..!
BalasHapus