Cara Membuat Widget Multi Tab View 3 Kolom


Widget Multi Tab View 3 Kolom

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($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(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.

Baca juga : Menambahkan Efek Bintang pada Popular Posts

Gimana sobat ? Mudah kan.
OK, sekian dulu. Selamat mencoba semoga berhasil dan bermanfaat.
Terima kasih.

Dapatkan artikel Tutorial Blog & Optimasi Blog lainnya di Barungeblog.com
Baca Juga!

Loading...