Cara Membuat Widget Multi Tab 3 Kolom

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Widget Multi Tab 3 Kolom ". Cara ini cocok bagi anda untuk menghemat tinggi blog anda. Anda dapat menggunakan cara ini untuk membuat blog anda lebih responsive dan lebih keren.
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Widget Multi Tab 3 Kolom

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencarian, Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

/*----- Cak Yit ----*/
.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/AVvXsEjXSrh2BNByapi4M12QFe5UBbcYfrYM4VRkMd19OVhDiMxfL_I8BMWF-rQL4FoP_vSKak_amIImlu24YN_yF3_gjsdRJPO7ENF7fbiaxzQuYqrHwPKUg1fH7D3zSdk5k2QB44tubn8Sf00/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/AVvXsEjXSrh2BNByapi4M12QFe5UBbcYfrYM4VRkMd19OVhDiMxfL_I8BMWF-rQL4FoP_vSKak_amIImlu24YN_yF3_gjsdRJPO7ENF7fbiaxzQuYqrHwPKUg1fH7D3zSdk5k2QB44tubn8Sf00/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Anda Dapat Mengubah Lebar Tab Sesuai Keinginan Anda
4. Cari Kode <div class='column-right-inner'> Atau <div id='sidebar-wrapper'>
5. Masukkan Kode Di Bawah Ini Di Bawah Kode <div class='column-right-inner'> Atau <div id='sidebar-wrapper'>

<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'>Suara Anda</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Recent Post</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Arsip Blog</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;'/> 

Anda Bisa Mengubah Nama Yang Di Cetak Tebal Sesuai Keinginan Anda Sendiri
6. Klik Simpan

Tag : Widget