Membuat Tab View di Postingan di Blogspot

Mungkin anda sudah mengenal apa yang dinamakan tab view, suatu widget yang bisa menampung banyak konten dalam satu box atau kotak kolom atau suatu area. Yang dimana konten tersebut akan terlihat bila kita mengklik tab masing-masing. Seringkali kita menemui tutorial cara membuat tab view, namun hanya terbatas pada sidebar. Dan bila kita memaksakan untuk mengimplementasikannya kedalam kotak Postingan (pada blogspot) maka, akan terjadi kegagalan fungsi kode.

Nah, lalu bagaimana Cara Membuat Tab View di Postingan di Blogspot ? Berikut kode alternatif atau lanjutan dari kode Membuat Tab View di Sidebar. Agar bisa digunakan digunakan di postingan, sebaiknya anda menggunakan kode ini. 

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan

1. Pertama tentunya harus login dulu ke Blogger dengan akun anda.
   
2. Tuju Tata Letak.
   
3. Klik Edit HTML.
   
4. Jangan lupa backup template ansa terlebih dahulu dengan mengklik Download Template Lengkap.
   
5. Kemudian letakkan kode javascript berikut sebelum kode </head>
   

 <link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>

<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>


<style type='text/css'>
.yui-content { padding:1em; /* pad content container */
}
.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}
.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}
/* top oriented */
.yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>

Buat satu Halaman Posting lagi dan Copy-Paste Code dibawah ini di postingan dalam mode EDIT HTML.

<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Tab Pertama</em></a></li>
<li><a href="#tab2"><em>Tab Kedua</em></a></li>
<li><a href="#tab3"><em>Tab Ketiga</em></a></li>
<li><a href="#tab4"><em>Tab Keempat</em></a></li>
<li><a href="#tab5"><em>Tab Ke-n</em></a></li>
</ul><br/>
<div class="yui-content">

<div id="tab1"><p>View Tab Pertama</p></div>
<div id="tab2"><p>View Tab Kedua</p></div>
<div id="tab3"><p>View Tab Ketiga</p></div>
<div id="tab4"><p>View Tab Keempat</p></div>
<div id="tab5"><p>View Tab Ke-n</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');

YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>


Ukuran.. dengan sendirinya akan menyesuaikan lebar dan tingginya Video dan Halaman.
Untuk Mengatur Propertynya silahkan edit Kode CSS nya. 

Berikut Preview Tab yang dihasilkan.

Sumber : http://lembar-coretan.blogspot.com/2010/06/membuat-tab-view-di-postingan-di.html

Share