Tạo tab nội dung đẹp cho blogspot blogger

Để tạo tab nội dung hiển thị như trên bài viết này, bạn hãy thực hiện theo các bước cài đặt lần lượt: Script>>Css>>Html

SCRIPT CSS HTML

<script type='text/javascript'> //<![CDATA[ function tabtampil_oom(TPID, id) { var Tabtampil = document.getElementById(TPID); var TTs = Tabtampil.firstChild; while (TTs.className != "TTs" ) TTs = TTs.nextSibling; var TT = TTs.firstChild; var i = 0; do { if (TT.tagName == "A") { i++; TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");"; TT.className = (i == id) ? "Active" : ""; TT.blur(); } } while (TT = TT.nextSibling); var Halamans = Tabtampil.firstChild; while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling; var Halaman = Halamans.firstChild; var i = 0; do { if (Halaman.className == 'Halaman') { i++; if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px"; Halaman.style.overflow = "auto"; Halaman.style.display = (i == id) ? 'block' : 'none'; } } while (Halaman = Halaman.nextSibling); } function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id); } function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1); document.write('');} //]]> </script>

<style type="text/css"> div.TabTampil div.TTs {height:24px; overflow:hidden} div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active {background-color:#eee} div.TabTampil div.Halamans {clear:both; border:1px solid #bbb; overflow:hidden; background-color:#fff} div.TabTampil div.Halamans div.Halaman {height:100%; padding: 0px; overflow:hidden} div.TabTampil div.Halamans div.Halaman div.Alas {padding:3px 5px} div.TabTampil div.TTs a {border-left:1px solid #bbb; border-right:1px solid #bbb; border-top:1px solid #bbb; border-bottom:1px solid #bbb; float:left; display:block; width:98px; text-align:center; vertical-align: middle; height: 25px; padding-top:5px; text-decoration:none; font-family:sans-serif; font-size:11px; font-weight:900; color: #000} </style>

<form action="tabtampil.html" method="get"><div id="TabTampil" class="TabTampil"><div style="width:300px" class="TTs"><a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div><div style="width:298px; height:300px" class="Halamans"><div class="Halaman"><div class="Alas"><br /> <br /> Nội dung Tab 1</div></div><div class="Halaman"><div class="Alas"><br /> <br /> Nội dung Tab 2</div></div><div class="Halaman"><div class="Alas"><br /> <br /> Nội dung Tab 3</div></div></div></div></form><script type="text/javascript">tabtampil_inisial('TabTampil');</script>