cara membuat TAB VIEW



tab view biasanya di gunakan untuk mempermudah pembaca melihat judul-judul postingan blog, kurang lebih seperti daftar isi pada sebuah buku, itulah salah satu fungsi dari tab view ini........

sekarang kita mulai trik membuat tab view ini...


  • login ke account blogger kamu.
  • plih tab tata letak ---> Edit HTML
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Copy kode berikut dan pastekan di atas kode ]]></b:skin>
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kata tinggal memasukkan kata yang ingin dicari.



div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;

width: 90px;
text-align: center;

height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;

text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



untuk memilih warna, silahkan lihat di sini


  • copy kembali kode berikut di atas kode </head>
<script type='text/javascript'>
function tabview_auxundefinedTabViewId, id)
{
var TabView = document.getElementByIdundefinedTabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if undefinedTab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");";
Tab.className = undefinedi == id) ? "Active" : "";
Tab.blurundefined);
}
}
while undefinedTab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while undefinedPages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if undefinedPage.className == 'Page')
{
i++;
if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = undefinedi == id) ? 'block' : 'none';
}
}
while undefinedPage = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId, 1); }
</script>


  • Simpan template kamu.

  • Kemudian pilih tab Elemen Halaman --> Tambah Gadget.

  • Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.

  • Copy dan paste kode di bawah ini.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">
<a>
Tab 1</a>
<a>
Tab 2</a>
<a>
Tab 3</a>
</div>

<div class="Pages" style="width:
350px; height: 250px;">

<div class="Page">
<div class="Pad">

Tab1.1<br/>
Tab1.2<br/>
Tab1.3<br/>

</div>
</div>


<div class="Page">
<div class="Pad">

Tab2.1<br/>
Tab2.2<br/>
Tab2.3<br/>

</div>
</div>


<div class="Page">
<div class="Pad">

Tab3.1<br/>
Tab3.2<br/>
Tab3.3<br/>

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initializeundefined'TabView');
</script>



  • simpan


  • Sekarang lihat tab view dalam blog kamu
Tips : Lakukan percobaan setiap kode trik blogger dalam blog uji coba kamu (pilih buat blog baru di dasbor blogger.com).

Catatan :
  1. Kode yang berwarna biru merupakan teks yang letaknya dalam Tab.
  2. Kode yang berwarna merah adalah tampilan teks yang akan muncul dalam halaman tab view.
  3. Kode yang berwarna kuning merupakan tampilan lebar dan tinggi halaman tab view.

Selamat membuat tab view...

artikel dari optimasi blog

10 comments:

deawa on 23 June 2010 at 16:34 said...

wah baruw ya, saya juga sama dulu buat tabviw kayak gini, tapi karang ada tab viw baru, ada di blog q, tabviwnya bisa gerak sendiri...

secangkir teh dan sekerat roti on 23 June 2010 at 17:11 said...

dulu pernah pake, tapi udah saya hapus lagi :)

admin on 23 June 2010 at 20:30 said...

dulu dah pernah pake.,aku hapus juga tapi bgusan pke template ini drpada yg dulu

Pak Tani on 23 June 2010 at 21:55 said...

di coba sob...bagus artikelnya

Anonymous said...

im trulybetter
saya sudah follow coba cek "edwin oktavianto" nah itu saya

Trulybetter admin ( Edwin ) on 23 June 2010 at 22:31 said...

sekarang saatnya proyek blog

maul on 23 June 2010 at 22:34 said...

@all: makasih udah komen......
@trulybatter: oke sob... siiiiiip :c:

iklan online on 23 June 2010 at 22:42 said...

Langsung Di Coba !!

Mas Sandi on 23 June 2010 at 22:43 said...

Gmn tuh.. aku coba coba hasilnya jelek banget

Adib from kompinter on 24 June 2010 at 04:52 said...

oke sob aq juga buat di bawah postingan hehehe

Post a Comment

Terimakasih Telah Mau Membaca..
Silahkan Tinggalkan Komentar..

 
Maulana Ni'ma Alhizbi Copyright © 2009 Blogger Template Designed by Bie Blogger Template