Cara Membuat Multi Tab Widget – kali ini saya akan memberikan tutorial yang sangat bermanfaat bagi sobat pembaca semua, yaitu Multi Tab Widget. Teb Widget adalah sebuh tempat di mana biasanya kita meletakkan kode widget atau membuat wedget baru. Biasanya blog memiliki Tab widget yang vertila atau kebawah, hal itu saya rasa kurang efektif membuat tampilan blog kurang rapi dan menarik. Maka dari itu kali ini saya memiliki solusi agar widget sobat bukan Vertikal Namun Horizontal 3 baris. Keuntungannya blog sobat akan lebih rapi, menarik dan sobat tidak perlu khawatir akan membuat witged yang banyak.
Jika sobat masih belum memiliki gambaran tentang Multi Tab Widget ini silahkan sobat lihat pada blog ini maka akan di dapati Multi Tab Widget yang sangat menarik dan dinamis, tidka memerlukan banyak tempat dan dapat mencakup banyak widget. Baiklah langsung saja kita cari tahu cara membuatnya berikut ini.
1. Buka blog sobat > Pergi ke menu Template > Edit HTML > copy dan paste kan kode dibawah ini tepat diatas ]]></b:skin> atau </style>
]]></b:skin> atau </style>
/* Multi Tab Widget */
.multitab section{background:#fff;text-transform:uppercase;width:100%}
.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{border:0;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}
2. selanjutnya copy dan paste kan kode dibawah ini tepat diatas </body>
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
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; }); });
//]]>
</script>
3. kemudian copy pastekan kode dibawah ini tepat dibawah <div id='sidebar-wrapper'>
<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'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
Keterangan :
Ganti nama widget yang sudah saya beri tanda Ketika script sudah dimasukkan semua,
4. silahkan simpan template dan lihat hasilnya.
Demikianlah tutorial mengenai Cara Membuat Multi Tab Widget, yang harus sobat ketahui. Semoga dapat menjadi ilmu yang bermanfaat di dunia dan akhirat.
0 Komentar