Sabtu, 31 Oktober 2015

Multi Tab 3 Kolom di Blog

Baca Juga :



Lama ga update blog, jadi kangen sahabat InfoAlya kali ini admin akan share sedikit tutorial tentang cara membuat multi tab 3 kolom di blog, semoga ada manfaatnya ya, Amiiinnnn.

  • Langkah awal masuk dulu di dashboard, template editor
  • Kemudian temukan  ]]></b:skin>  dan copy tempel CSS dibawah ini diatasnya

/*----- multi tab SH ----*/


.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(http://2.bp.blogspot.com/-W_XatGRw65k/TeDn-AbzkMI/AAAAAAAAHLo/TijlQkRUbas/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(http://2.bp.blogspot.com/-W_XatGRw65k/TeDn-AbzkMI/AAAAAAAAHLo/TijlQkRUbas/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}

.tabs-widget-content{}

.tabviewsection{margin-top:10px;margin-bottom:10px;}

  • Berikutnya cari  <div class='column-right-inner'>  atau  <div id='sidebar-wrapper'>  kalau sudah ketemu copy tempel kode berikut ini dibawahnya
<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'>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>

<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;'/> 
  • Simpan template jika selesai.
Previous Post
Next Post

post written by:

  • 0 Comment
  • Comment

Leave your comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda