Multi tab widget blogger: Sembari menunggu berbuka puasa, daripada ngantuk lebih baik asal njedot dikit dah. Menambah multitab widget pada blogspot, menambahkan widget ini-itu yang entah dengan alasan untuk mempercantik blog atau melengkapi blog lama-lama jadi penuh dong.
Membuat multitab bisa jadi alternatif untuk mengoptimalkan sidebar agar tidak terlalu kelihatan sumpeg penuh.
Jika belum sukses, masukkan jQuery dibawah ini, sisipkan kode ini dibawah kode ]]></b:skin>
Save template dan lihat hasilnya.
Membuat multitab bisa jadi alternatif untuk mengoptimalkan sidebar agar tidak terlalu kelihatan sumpeg penuh.
- Meluncur ke Blogger > Design > Edit HTML
- Mau dibackup dulu templatenya jg boleh.
- Cari kode ]]></b:skin>
- Kopi kode dibawah ini dan taruh diatas kode ]]></b:skin> tersebut
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.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:#666666;background:#DDDDDD;padding:4px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#666666;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
.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:#666666;background:#DDDDDD;padding:4px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#666666;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
- Selanjutnya cari kode <div id='sidebar-wrapper'>
- Kopi kode dibawah ini kemudian paste dibawahnya
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-tab").hide();
$("ul.tabs-widget-tab li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-tab:first").show();
$("ul.tabs-widget-tab li a").click(function() {
$("ul.tabs-widget-tab li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-tab").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-tab'>
<li><a href='#tab1'>About</a></li>
<li><a href='#tab2'>Tags</a></li>
<li><a href='#tab3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-tab").hide();
$("ul.tabs-widget-tab li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-tab:first").show();
$("ul.tabs-widget-tab li a").click(function() {
$("ul.tabs-widget-tab li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-tab").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-tab'>
<li><a href='#tab1'>About</a></li>
<li><a href='#tab2'>Tags</a></li>
<li><a href='#tab3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>
- Ganti tulisan "About, Tags dan Archives" dengan yang anda inginkan.
- Jangan lupa save template kemudian lihat hasilnya
- Tengok ke "Page Element" akan muncul seperti ini
Jika belum sukses, masukkan jQuery dibawah ini, sisipkan kode ini dibawah kode ]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Save template dan lihat hasilnya.