<div class="container">   <div class='multitab-section'>     <ul class='multitab-widget multitab-widget-content-tabs-id'>       <li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>       <li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>       <li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>     </ul>     <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>       <span class='sidebar' id='sidebartab1' preferred='yes'>         <p>Isi konten widget tab 1           </br>           </br>           Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>       </span>     </div>     <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>       <span class='sidebar' id='sidebartab2' preferred='yes'>         <p>Isi konten widget tab 2           </br>           </br>           Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>       </span>     </div>     <div class='-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>       <span class='sidebar' id='sidebartab3' preferred='yes'>         <p>Isi konten widget tab 3           </br>           </br>           Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>       </span>     </div>   </div> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); *, *:after, *:before {   box-sizing: border-box;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   -webkit-font-smoothing: antialiased;   font-smoothing: antialiased;   text-rendering: optimizeLegibility }  body {   background: #eaeaea none repeat scroll top left;   color: #444;   font-family: 'Open Sans', sans-serif;   margin: 0;   padding: 0;   position: relative;   line-height: normal; }  .container {   max-width: 310px;   margin: 12% auto;   padding: 0;   box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1);   font-family: 'Open Sans', sans-serif; } /* Multi Tab Sidebar */  .multitab-section {   display: inline-block;   text-transform: uppercase;   width: 100%; }  .multitab-section p {   display: inline-block;   background: #fff;   text-transform: lowercase;   font-size: 14px;   padding: 20px;   margin: 0; }  .multitab-widget {   list-style: none;   margin: 0 0 10px;   padding: 0 }  .multitab-widget li {   list-style: none;   padding: 0;   margin: 0;   float: left }  .multitab-widget li a {   background: #22a1c4;   color: #fff;   display: block;   padding: 15px;   font-size: 13px;   text-decoration: none }  .multitab-tab {   width: 33.3%;   text-align: center }  .multitab-section h2, .multitab-section h3, .multitab-section h4, .multitab-section h5, .multitab-section h6 {   display: none; }  .multitab-widget li a.multitab-widget-current {   padding-bottom: 20px;   margin-top: -10px;   background: #fff;   color: #444;   text-decoration: none;   border-top: 5px solid #22a1c4;   font-size: 14px;   text-transform: capitalize }

//<![CDATA[ jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; } <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ; } <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ; //]]>