Kali ini Santai Bareng akan membagikan Cara Membuat Widget Multi Tab View 3 Kolom. Dengan Widget ini, tampilan blog menjadi lebih simple dan rapi.
Pada umumnya tampilan widget pada sidebar akan memanjang kebawah. Semakin banyak artikel yang diposting akan semakin panjang pula widget sidebar yang ditampilkan, khususnya pada widget arsip dan label. Solusinya yaitu dengna memasang Widget Multi Tab View ini.
Dengan widget ini sobat bisa menghemat ruangan sidebar tanpa harus menjadikannya memanjang kebawah dan memakan ruangan di template blog sobat. Meskipun memuat tiga kolom tab view, tetapi widget ini sangat ringan untuk loading blog sobat. Widget Multi Wab View ini juga saya terapkan di blog Santai Bareng dan bekerja dengan baik.
Berikut Cara Membuat Widget Multi Tab View 3 Kolom :
1. Masuk ke akun blogger sobat.
2. Pilih menu Template > Klik Edit Html.
3. Silahkan letakan kode di bawah ini tepat di atas kode
]]></b:skin>/*----- Multi Tab 3 View Kolom----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 0px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#138be6;background:url(http://2.bp.blogspot.com/-W_XatGRw65k/TeDn-AbzkMI/AAAAAAAAHLo/TijlQkRUbas/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 27px;dis14ay:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://exchangedownloads.smarttech.com/public/content/b4/b451e5b6-a423-426e-b86b-4a8d5405d48e/previews/medium/0020.png) left -140px repeat-x;color:#000;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}4. Selanjutnya letakan kode di bawah ini tepat di bawah kode berikut
<div class='column-right-inner'> atau kode <div id='sidebar-wrapper'>jika tidak ketemu coba cari dengan kode
id='sidebar-wrapper' menggunakan Ctrl + F.<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Populer</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Label</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Arsip</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>5. Simpan Template sobat, dan silahkan coba menambahkan widget yang diperlukan kedalam tab view.
OK, sekian dulu. Selamat mencoba semoga berhasil dan bermanfaat.