Membuat Tab View di Postingan di Blogspot

Category : Labels: , , , , ,


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.

<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><a href="#tab1"><em>RCTI</em></a></li>
<li class="selected"><a href="#tab2"><em>GLOBAL TV</em></a></li>
<li><a href="#tab3"><em>Trans TV</em></a></li>
</ul><br/>
<div class="yui-content">

<div id="tab1"><p>Copy Kode embed Video di Sini</p></div>
<div id="tab2"><p>Copy Kode embed Video di Sini</p></div>
<div id="tab3"><p>Copy Kode embed Video di Sini</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.




Bila anda sudah berhasil mengimplementasikan kode tersebut. Anda bisa menaruh TV Online atau apapun yang anda butuhkan. 

Bila anda ingin menonton TV Online Piala Dunia, Cepat dan tanpa Buffering, Ringan Halamannya,  Bisa chatting bareng sambil nonton online, Silahkan menuju ke blog teman penulis di Sharing Mas Doyok.


Thanks to BloggerBuster anda Yahoo YUI

25 Komentar:

oh aq dah coba :D tapi keren ini

Wa kayak Punya ku dong...tp keren ini sob..!!

Wahh bolehh triknya mass...!! Tx

makasih kang
ini dia :)
mnanti tak pas pasin

wah keren salam kenal sob,,

salam sukses

a -One jambi

Ternyata begitu ya cara membuat tab view pada postingan...
perlu di coba nich.. maklum sob masih newbie banget...

wah, kok rumit banget ya...

pusing kang ora ngerti,,,,,ora mudeng

aQ dah pernah nyoba sob, tadi aQ kira view yang seperti penghitung untuk postingan dilihat berapa kali gituw ..........

Hehehehe.........

bikin tab view d postingan, kayanya menarik nih buat d cobain, makasih kang

salam kenal gan, ane numpang blog walking..thanks good article

boleh juga nie.. makasih

Gak ngerti sebenarnya yang gini2an, tapi mau coba tes gimna jadinya ya?? hehe..

thanks atas infonya yang bermanfaat sekali dan bisa dicerna, salam kenal
http://caramembuatyangakumau.blogspot.com

ikutin sesuai totorial 100% jadi tapi saat nambahin tabel didalamnya jadi brantakan,,, kira2 ada solusi gak knapa jadi kyak ghitu...?

http://edynlaskar09.blogspot.com

gan kode alternatifnya taro dimana ?

Thanks gan,dah aku coba dan berhasil.emang ini yang selama ini aku cari,selain bikin ringkas tampilan blog kita,juga bikin blog lebih seo.

terimakasih infonya sob..., ijin coba dulu

This comment has been removed by the author.
This comment has been removed by the author.

tapi muncul iklan di atas dan di bawah blog Bro.
gimana cara menghilangkannya..??

Post a Comment