Cara Menambahkan Sidebar Multi Tab Responsive

Membuat Sidebar Multi Tab Responsive - Sidebar Multi Tab Adalah sidebar yang menyatu pada sidebar 1 dengan sidebar lainnya. 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 pada widget Multi Tab ini sangat responsive pada bloggger maupun website,
Lihat gambarnya , sangat menarik ya , tentu saja.
Gimana cara Membuatnya min ?
Lihat tutorial dibawah ini saja , sebagai berikut :

Cara Menambahkan Sidebar Multi Tab

1. Buka blogger
2. Dashboard > Template > Edit HTML
3. Cari kode ]]></b:skin (Gunakan ctrl+f untuk membantu pencarian).

4. Masukan CSS berikut di atas kode ]]></b:skin

/*----http://www.seonih.ga/----*/
.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/AVvXsEj5sBD0o-jK6wWpi_BKQUqo7IaXLabydNF9sHC9E0vpGj8-6BhMAahzVjDLKWWmXP9qlHdV5RpkynnBSSEBBGsvRIEBdeDizQYXnXkPyaB4mhlZ7Pvd3QNQLGgiGwwA1qjDKma286bVvA/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/AVvXsEj5sBD0o-jK6wWpi_BKQUqo7IaXLabydNF9sHC9E0vpGj8-6BhMAahzVjDLKWWmXP9qlHdV5RpkynnBSSEBBGsvRIEBdeDizQYXnXkPyaB4mhlZ7Pvd3QNQLGgiGwwA1qjDKma286bVvA/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.seonih{margin-top:10px;margin-bottom:10px;}

5. Cari kode <div id='sidebar-wrapper'> atau <div class='sidebar-wrapper'>
6. Lalu masukan kode berikut dibawah kode <div id='sidebar-wrapper'> atau <div class='sidebar-wrapper'>

<div class='seonih'>
<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>

7. Save Template

Dan lihat hasilnya pada blog kalian,
Demikian artikel Cara Menambahkan Sidebar Multi Tab Resposive,
Sekian Terimakasih (http://www.seonih.ga/)*

Related Post

Share this

Share on Facebook