Cara Mudah Membuat Widget Multi Tab 3 Kolom Di Blog

Cara Mudah Membuat Widget Multi Tab tiga Kolom Di Sidebar. Sobat Blogger, sudah beberapa minggu yang lalu saya tidak memposting diblog lagi di karenakan sibuk di dunia nyata, sekarang saya ingin mebagikan artikel tentang cara membuat widget multi tab, seperti yang sudah kita ketahui widget multi berarti double, widget ini berarti dalam satu jajar sidebar bisa memuat 3 kolom widget sekaligus, dengan widget ini anda bisa menghemat ruangan sidebar anda tanpa harus panjang kebawah memakan ruangan di template anda.

Tampilan gambar di atas adalah contoh widget yang akan di buat, widget ini meskipun memuat tiga kolom, tapi widget ini juga sangat ringan untuk loading blog anda, saya sudah praktekan ini dan bekerja dengan baik, selain itu anda juga bisa merubah warna lebar dan nama widget ini, sangat mudah untuk di edit, sekarang bagi anda yang ingin membuatnya , silahkan ikuti tutorialnya.

Cara Membuat Widget Multi Tab Tiga Kolom Di Sidebar.
1. Buka akun blogger anda.
2. Pilih menu Template > Klik Edit Html.
3. Silahkan anda letakan kode di bawah ini tepat di atas kode ]]></b:skin> 

/*----- WMT Satores Via ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 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:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pH8md7Icxs6i0MCaROgkntGtrluNNxh0oYXy3lZcWAnwGTiHn7ad5JSmQePudJliQlqVFqTmQ1fS2KWOWEFAMnQ3g-_U0_cAdmGlhTgSnYjuu-lmyQP4W7xxcDze9w13XX3QWtpJkDA/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 27px;display: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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pH8md7Icxs6i0MCaROgkntGtrluNNxh0oYXy3lZcWAnwGTiHn7ad5JSmQePudJliQlqVFqTmQ1fS2KWOWEFAMnQ3g-_U0_cAdmGlhTgSnYjuu-lmyQP4W7xxcDze9w13XX3QWtpJkDA/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Selanjutnya silahkan anda letakan kode di bawah ini tepat di bawah kode  <div class='column-right-inner'> Kalo tidak ketemu bisa di bawah kode <div id='sidebar-wrapper'> ,kalo masih tidak ketemu juga anda bisa tanya di kolom komentar.

<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. Klik simpan Template anda, dan silahkan coba menambahkan widget anda.

Sobat blogger jika anda mengalami kendala dalam tutorial ini silahkan anda tanya di kolom komentar, karena menurut saya setiap kode template berbeda-beda.

Akhir kata : silahkan ucapkan Alhamdulillah.

Ditulis Oleh : Teguh ~ Satores

Sobat sedang membaca artikel tentang Cara Mudah Membuat Widget Multi Tab 3 Kolom Di Blog . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terima Kasih... <a href="http://satores.blogspot.com/2015/03/cara-mudah-membuat-widget-multi-tab-3.html" target="_blank">Cara Mudah Membuat Widget Multi Tab 3 Kolom Di Blog</a>

:: Get this widget ! ::

Tweet