Pada postingan kali ini saya akan membahas tentang cara membuat multi tab pada blog, multi tab digunakan untuk membuat blog menjadi lebih ringkas dan hemat tempat, dan mudah dalam navigasinya, kerjanya mirip dengan tab pada web browser Anda, di dalam multi tab Anda dapat menyisipkan widget lain, gambar, dan animasi, nah untuk membuatnya ikuti langkah-langkah berikut :
1. Log in ke Blogger.
2. Pilih Rancangan, selanjutnya Elemen Laman, dan klik Tambah Gadget.
3. Pilih Html/Javascript.
4. Masukan script di bawah ini.
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 93px; /* Lebar Kotak Tab */
height: 24px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 5px; /* Posisi Kotak Tab */
background :url('http://i1127.photobucket.com/albums/l628/nthoeng1/menu3.png'); /* Warna background Kotak Tab dapat di ubah menggunakan code warna */
padding-top: 8px; /* Spasi Atas */
border: 0px solid #919191; /* Warna border kotak Tab */
border-bottom: 0px solid #919191; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial;
font-size: 11px;}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #transparent; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #transparent; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #transparent; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 4px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<style type="text/css"></style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span title="KETIK TITLE DI SINI" style="color:#bdbdbd;"><b>TAB 1</b></span></a>
<a><span title="KETIK TITLE DI SINI" style="color:#bdbdbd;"><b>TAB 2</b></span></a>
<a><span title="KETIK TITLE DI SINI" style="color:#bdbdbd;"><b>TAB 3</b></span></a>
</div>
<div style="width: 292px; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Letakan Widget Anda Di Sini
</div>
</div>
<div class="Page">
<div class="Pad">
Letakan Widget Anda Di Sini
</div>
</div>
<div class="Page">
<div class="Pad">
Letakan Widget Anda Di Sini
</div>
</div></div></div></form>
<script style="text/javascript" src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
5. Ganti teks warna hijau dengan Script widget yang akan dipasang.
6. Atur sesuai keinginan Anda, dengan mengedit lebar, tinggi, dan warna.
7. Simpan, dan lihat hasilnya.
Semoga Berhasil !!!
04.26
Galih
