Membuat Tab View pada Blog

Widget tab view sudah banyak digunakan pada blog. Tab view ini sangat berguna, terutama dalam hal menghemat tempat. Karena, pada widget tab view, 1 kotak bisa terdiri dari beberapa tab.

Klo bingung, contoh penggunaan tab view bisa sodara liat disini.

cara membuat widget tab view

Trick kali ini adalah cara membuat tab view pada blog. Cara membuat tab view sangat mudah kok. Kita coba yuuk..

Pertama, download dulu template Sodara.

Pada menu 'Layout' - 'Edit HTML', copy kode berikut di atas kode ]]></b:skin>

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;
margin-right:2px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
background-color:#fff;
}

div.TabView div.Tabs a:hover {
background-color:#ebebeb;
}


div.TabView div.Tabs a.Active {
color: #fff;
background-color: #000;
}

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


div.TabView div.Pages ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

div.TabView div.Pages li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:2px;
padding-$startSide:18px;
line-height:1.5em;
background:url(http://i40.tinypic.com/x26lj9.png) no-repeat ;
}

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

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


Selanjutnya, sebelum kode </head>, copy-paste kode berikut :

<script src='http://mezzaluna08.bravehost.com/tab_view.js' type='text/javascript'/>


Simpan template.

Kemudian, pada halaman 'Layout' - 'Page Element', silahkan pilih 'tambah gadget' seperti biasanya Sodara bikin widget baru, kemudian pilih saja yang 'Javascript/HTML'.

Silahkan masukkan kode dibawah untuk tab view sodara :

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a>Tab1</a>

<a>Tab2</a>

</div>

<div style="width: 300px;
height: 207px;" class="Pages">

<div class="Page">

<div class="Pad">

IsiTab1.1<br/>
IsiTab1.2<br/>

</div>

</div>

<div class="Page">

<div class="Pad">

IsiTab2.1<br/>
IsiTab2.2<br/>

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>


Sodara tinggal mengganti atau menambahkan 'Tab1' - 'Tab2' dengan judul yang akan tampil pada masing2 tab.

Sedangkan untuk isi tiap2 tab, sodara bisa mengganti atau menambahkan teks berwarna merah.

Klo sudah, tinggal save, lalu preview.

Selamat mencoba trik membuat tab view di blog Sodara!

16 comments:

  1. Boleh juga infonya, bisa di coba bro,Good Luck y.
    di tunggu komentar baliknya di http://inspirasi-anakbangsa.blogspot.com/

    ReplyDelete
  2. trik yg udah lama, tapi tak bosannya untuk di bahas d blogger. Perkuat optimasinya sob tampaknya banyak yg nyari keyword ini...

    ReplyDelete
  3. infonya sangat berguna. saya mau coba.
    ditunggu komennya di http://allfreetips4u.blogspot.com/2009/07/safari-4-juara-sejati-uji-komparasi.html

    ReplyDelete
  4. makasih buat tips-nya...sudah saya coba diblog saya...mantap...

    ReplyDelete
  5. aku udah pasang thanks banget

    ReplyDelete
  6. infonya sangat berguna...oh ya mas bannernya aku dah pasang thu....coba cek

    ReplyDelete
  7. http://childsenju.blogspot.com/
    thanks ya.,

    ReplyDelete
  8. mas mo tanya trs kl mo isiin tab viewnya sama jdl posting kita pk kode yg mana?trm ksh maaf newbi nih....

    ReplyDelete
  9. mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

    ReplyDelete
  10. bos di mana tempat klik view blog nya gua mgga tau

    ReplyDelete
  11. thanks...infonya berguna bgt

    my blog :http://artikel-game.blogspot.com/

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz