search here and find more articles

Cara Membuat Multi Tab Widget pada Sidebar Blog


Blog design yang baik biasanya simple dan nyaman dilihatnya, widget yang terlalu panjang tidak baik untuk pengunjung karena akan terganggu dengan tampilan widget yang serba serbi apalagi hanya sebuah pajangan. Widget yang terlalu banyak pasti akan mempengaruhi kapasitas dari sidebar di blog kita. Untuk antisipasi menumpuknya widget, artikel kali ini akan sharing tentang bagaimana Cara Membuat Multi Tab widget pada Sidebar Blog yang tujuanya adalah agar tampilan widget terlihat tidak terlalu memanjang dan terlihat simple.

Multi Tab biasanya berisi widget artikel popular, label, archive, dan kategori lainnya. Kali ini kita akan bahas multi tab dengan jumlah kolom hanya tiga, jika kalian membuka kolom yang pertama, maka kolom yang kedua dan ketiga akan tersembunyi dibalik kolom yang pertama. Langsung saja kita perhatikan langkah langkah berikut ini :

Step 1. Login ke blog kalian

Step 2. Masuk ke pengaturan Tamplate dan pilih Edit HTML

Step 3. Cari kode ]]></b:skin> atau </style>

Step 4. Copy dan Pastekan kode script berikut diatas kode ]]></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}


Step 5. Copy dan Pastekan kode script berikut atas kode </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>


Step 6. Cari kode <div id='sidebar-wrapper'>

Step 7. Copy dan pastekan kode script berikut dibawah kode <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>


Step 8. Simpan Tamplate

Silahkan melakukan penambahan widget pada pengaturan Tata Letak blog kalian, silahkan mencoba dan semoga berhasil.


0 komentar

click to leave a comment!

Formulir Kontak

Nama

Email *

Pesan *