Memasang multi tap sidebar pada blog merupakan salah satu tujuan untuk menempatkan widget lain yang memerlukan banyak ruang. Dan juga bisa menampilkan widget yang ditempatkan di multi tap sidebar agar tampilan blog terlihat lebih menarik.
Tampilan blog yang bagus tidak akan ada artinya jika loading blog sangat lamban. Pada artikel ini, saya akan memberikan solusi cara cepat memasang multi tap sidebar pada blog. Daripada widget-widget di sidebar blog anda banyak berjajar ke bawah, mungkin cara ini bisa menjadi solusinya dan membuat sidebar blog anda menjadi lebih simpel.
Memang banyak yang menggunakan dan banyak juga yang tidak menggunakan multi tap sidebar pada blog, karena hal itu tergantung masing-masing pengguna blog. Tapi menurut saya, memasang multi tap pada blog merupakan solusi yang tepat untuk anda yang banyak memasang widget di sidebar blog.
Berikut adalah Cara Cepat Memasang Multi Tap Sidebar Pada Blog, yaitu :
1. Buka dasbor blog anda.
2. Pilih "Template"➡"Edit HTML".
3. Cari kode ]]></b:skin> atau </style> kemudian copy kode di bawah ini, dan paste di atas kode tersebut.
Kode :
.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:#005cba;
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 #005cba;
font-size:14px;
text-transform:capitalize
}
4. Cari kode </body> kemudian copy kode di bawah ini, dan paste di atas kode tersebut.
Kode :
//<![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>
5. Cari kode <div id='sidebar-wrapper'> kemudian copy kode di bawah ini, dan paste di bawah kode tersebut.
Kode :
<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>
6. Dan terakhir "Simpan Template".
Baca Juga : 12 Kelebihan UsersCloud Untuk Dapat Uang
Demikianlah Cara Cepat Memasang Multi Tap Sidebar Pada Blog, dan silahkan untuk mencobanya.