Cara Membuat Widget Multi Tab View 3 Kolom di Blog

Kali ini Santai Bareng NET akan membagikan Cara Membuat Widget Multi Tab View 3 Kolom. Dengan memasang widget ini, tampilan blog menjadi lebih simple dan lebih rapi karena tidak memakan banyak tempat.

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.

Oh iya, sobat nanti juga bisa mencoba trik Cara Membatasi Jumlah Postingan di Halaman Pencarian Blog

Cara Membuat Widget Multi Tab View 3 Kolom di Blog

1. Masuk ke blogger.
2. Pilih menu Template - Klik Edit HTML.
3. Silahkan letakan kode CSS 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6eCX_joxJ0gM00M1ipz5C-sFgmteyV70MI-1o4vSxQ0UkcBCdIOyOL__ReHEfXycxuouUdZwvzmvw4iyuuUV3EiXhnQLot4hW0ViUSeQhIyagYNG8uEorrldYjLpPdFioWHt48hyphenhyphen4ZU0/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;}{codeBox}

4. Selanjutnya letakan kode di bawah ini tepat di bawah kode <div class='column-right-inner'> atau kode <div id='sidebar-wrapper'>

jika tidak ketemu, coba mencarinya 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;'/>{codeBox}

5. Simpan Template.

6. Kembali ke menu Tata Letak, coba tambahkan widget yang diperlukan seperti widget popular posts, arsip, label kedalam tab view dan lihat hasilnya.

Selain trik diatas, sobat bisa mempercantik tampilan widget popular dengan mencoba Cara Menambahkan Efek Bintang pada Popular Posts

Sekian tutorial blogger pemula mengenai Cara Membuat Widget Multi Tab View 3 Kolom di Blog. Semoga bermanfaat!