Cara Membuat Multi Tabs Di Blogger

Cara Membuat Multi Tabs Di Blogger

Multi Tabs digunakan sebagai penghemat tempat untuk menaruh widget. Fungsi Multi Tabs Hampir sama dengan footer, Jika Footer Terletak dibawah dan Multi Tabs Terletak di sidebar dan sama-sama Tempat Menyimpan Widget yang tidak terlalu dibutuhkan.

Keuntungan dari multi tabs ini adalah tidak terlalu pusing untuk memasangnya, lebih stylish, Judul mudah diganti. Berminat untuk memasangnya?, Berikut Cara untuk memasangnya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template, Terlebih Dahulu Anda Backup Template Anda, Lalu, Klik Tombol Edit HTML.
• Cara Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
• Masukan Script Berikut ini dibawah kode ]]></b:skin> --> YBB Multi Tabs
• Setelah itu Masukan Kode berikut ini Diatas Kode ]]></b:skin> :

/*----- YBB Multi Tabs Widget ----*/
.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/AVvXsEj5RLI3mWMJDLmp_8aKAI8wtjEevJLWinrPt4z43TQ0fJs5uQMIdylwOqnbUlOQ653kgoxHi1PEgtxqEVCw8bC9Zci4FbpInzEG2XNd4lOzgBRouLdqTMPx-x6hcUo3OMqDu460uwAm6e7I/s1600/tabs-widget.png) left top repeat-x;padding:12px 14px;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/AVvXsEj5RLI3mWMJDLmp_8aKAI8wtjEevJLWinrPt4z43TQ0fJs5uQMIdylwOqnbUlOQ653kgoxHi1PEgtxqEVCw8bC9Zci4FbpInzEG2XNd4lOzgBRouLdqTMPx-x6hcUo3OMqDu460uwAm6e7I/s1600/tabs-widget.png) left -140px repeat-x;color:#797979;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

•  Cari Kode Berikut ini:

<div class='column-right-inner'>

Jika Tidak Ketemu Cari kode berikut ini:

<div id='sidebar-wrapper'>
Setiap Template mempunyai Kode yang berbeda-beda.

• Masukan Kode Berikut ini dibawah salah satu Dari dua kode diatas :

<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'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</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;'/> 

• Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG