Klo bingung, contoh penggunaan tab view bisa sodara liat disini.
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;
}
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>
<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!
Boleh juga infonya, bisa di coba bro,Good Luck y.
ReplyDeletedi tunggu komentar baliknya di http://inspirasi-anakbangsa.blogspot.com/
trik yg udah lama, tapi tak bosannya untuk di bahas d blogger. Perkuat optimasinya sob tampaknya banyak yg nyari keyword ini...
ReplyDeletenice info kawan :)
ReplyDeleteinfonya sangat berguna. saya mau coba.
ReplyDeleteditunggu komennya di http://allfreetips4u.blogspot.com/2009/07/safari-4-juara-sejati-uji-komparasi.html
makasih buat tips-nya...sudah saya coba diblog saya...mantap...
ReplyDeleteaku udah pasang thanks banget
ReplyDeletewah bagus mas terimakasih
ReplyDeleteinfonya sangat berguna...oh ya mas bannernya aku dah pasang thu....coba cek
ReplyDeleteseep
ReplyDeletehttp://childsenju.blogspot.com/
ReplyDeletethanks ya.,
mas mo tanya trs kl mo isiin tab viewnya sama jdl posting kita pk kode yg mana?trm ksh maaf newbi nih....
ReplyDeletemantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p
ReplyDeletemantapppp tipsnya...
ReplyDeletebos di mana tempat klik view blog nya gua mgga tau
ReplyDeleteBerguna sekali, mkasih ;)
ReplyDelete