LIVE DEMO
Cara membuat tab view css dan jQuery seperti live demo di atas:
1. Login blog
2. Template > edit html
3. cari kode ]]></b:skin> dan letakkan kode css n jQuery berikut di bawah ]]></b:skin>
<style>
.b,.c{display:none;} .buttons{border-bottom:solid #d1c8b8 4px;display:block;width:80px;-moz-border-radius:1em 4em;border-radius:1em 4em 1em 4em;text-align:center;background:#FFC65C;text-decoration:none;color:#FFF;float:left;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;margin:1px;padding:8px;} .buttonHover{background:#F797E1;border-bottom:solid #97EAF7 4px;} a.buttons:hover{background:#86b8b4;border-bottom:solid #97EAF7 4px;} #multitab{background:#404040;text-align:justify;overflow:hidden;color:#fff;-moz-border-radius:1em 4em;border-radius:1em 4em 1em 4em;height:200px;width:272px;padding:20px;} #multwrap{text-align:left;overflow:hidden;width:350px;height:380px;}
</style>
<script type='text/javascript'>
function navigate_tabs(e,t){$(".b").css("display","none");$(".c").css("display","none");$(".a").css("display","none");$("#first-tab").removeClass("buttonHover");$("#second-tab").removeClass("buttonHover");$("#third-tab").removeClass("buttonHover");$("#"+t).addClass("buttonHover");$("."+e).show("slow")}$(document).ready(function(){$("#first-tab").addClass("buttonHover")})
</script>
<script charset='utf-8' src='http://yourjavascript.com/29404800221/mig33eaglejquery1-2-6.js' type='text/javascript'/>
4. add gadget > html/javascript dan copy kode html berikut
<div id="multwrap">
<a class="buttons" href="javascript:navigate_tabs('a','first-tab');" id="first-tab">Tab 1</a>
<a class="buttons" href="javascript:navigate_tabs('b','second-tab');" id="second-tab">Tab 2</a>
<a class="buttons" href="javascript:navigate_tabs('c','third-tab');" id="third-tab">Tab 3</a>
<div align="center" id="multitab">
<div class="a">
<em>B</em>www.mig33eagle.com Lorem ipsum dolor sit amet minim. Lacinia egestas at. Ultricies aenean sed venenatis convallis id erat ac in elit sed arcu vel ac tortor elit ut id. Faucibus iaculis cras. Eget pede vestibulum nibh in lorem ante ut rhoncus. Nisl tempus nec. Vitae cras aliquet. Phasellus cubilia dignissimos. Vivamus convallis nullam orci ultricies dictumst duis magna nulla ac maecenas duis. Thanks!
</div>
<div class="b">
<em>L</em>tab view jQuery by ash nareswari lorem Praesent suspendisse viverra. Pellentesque lacus arcu. Dui interdum convallis. Cras sed vestibulum. Lectus urna turpis ultricies et suspendisse netus etiam ac donec at interdum pellentesque cras curabitur eros interdum suspendisse. Malesuada nullam viverra.
</div>
<div class="c">
<em>S</em>Voluptas justo diam. Vivamus ultricies ea. Ac magna rutrum risus commodo sit. Volutpat eget vestibulum eros maiores enim. Tellus suscipit volutpat ac blandit id et malesuada pellentesque. Dolor lectus imperdiet et justo arcu. Risus consequat ut doloremque ante vel. </div>
</div>
</div>
5. simpan