Cara membuat multi tab pada blog

ikhsanudin on

Thursday, March 21, 2013

Cara membuat multi tab pada blog. Meskipun pada beberapa waktu yang lalu kita telah membahas tentang Cara bikin multi tab view pada blogspot , dan kali ini juga sama, hanya saja cara dan modelnya yang sedikit berbeda, untuk Cara membuat multi tab pada blog kali ini adalah dengan hasil seperti ini :



Mari kita mulai Cara membuat multi tab pada blog
1. Login ke blogspot / blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode ]]></b:skin>
Pastekan kode berikut, diatasnya :

/*---- Wordpress Style MBT Menu Tabs----*/
.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Kemudian tambahkan kode ini dibawah ]]></b:skin>


Download Kode Cara membuat multi tab pada blog



5. Lanjutkan dengan mencari kode <div id='sidebar-wrapper'> jika tidak ketemu coba cari <div class='column-right-inner'>
pastekan kode berikut dibawahnya.

<div class='MBT-tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
$(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
$(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
$(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
$(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
$(this).addClass(&quot;MBT-tabs-current&quot;);
$(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>

<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>

Simpan hasil Cara membuat multi tab pada blog, dengan klik SIMPAN TEMPLATE

Labels: Blogger, Tips dan Trik, Tutorial

Thanks for reading Cara membuat multi tab pada blog. Please share...!