1. Masuk Tab Rancangan ==> Edit HTML ==> centang Expand Template Widget
2. Backup template sobat dengan klik Download Template Lengkap (Optional)
3. Tambahkan kode di bawah ini sebelum kode ]]></b:skin>
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}4. Tambahkan kode di bawah ini setelah kode <div id='sidebar-wrapper'>
.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;}
<div class='tabviewsection'>5. Tambahkan kode berikut sebelum kode </head>
<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 src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Jika sobat sudah memasang script Jquery di atas pada template sobat, maka abaikan langkah ini.
6. Ganti tulisan yang berwarna biru dengan nama tab sobat, kemudian simpan template sobat.
Sekian tutorial kali ini, salam blogger dan wassalam.
naruh script widgetnya dimana?.
BalasHapus@Fikruna Zone™kan di sidebar ada elemen baru 3 sob, tinggal pilih tambah gadget aja...
BalasHapuskalau mau naruh yg script pilih yang HTML/Javascript
Bagaimna cara menambahkan tabs lgi,, supaya jadi 4 tabs??
BalasHapus@Ardianta Sisgocaranya gini nih sob
BalasHapustambahin kode di bawah ini pada kode yang ditaruh di bawah kode <div id='sidebar-wrapper'>
trus tambahin kode ini <li><a href='#tab4'>Nama Tab</a></li>
di bawah kode
<li><a href='#tab3'>Archives</a></li>
kemudian tambahin lagi sob kode ini
<div class='tabs-widget-content tabs-widget-content-tab' id='tab4'>
<b:section class='sidebar' id='sidebartab4' preferred='yes'>
</b:section>
</div> di bawah kode
<div class='tabs-widget-content tabs-widget-content-tab' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
@laudri rizal eka septian
BalasHapusWahh terimakasii sob.. berhasill.. makasii tutorialnya
@Ardianta Sisgoiya sob sama-sama, senang bisa membantu
BalasHapuslangkah ke 4 ora iso..
BalasHapus@Muhammad Raflyora iso piye sob,,,
BalasHapusapa kode sidebar wrappernya kagak ada, kalo iya cari aja kode yang mirip kayak ntu, coz setiap template meng beda tergantung yang buat template..
ngetes emot :^D^: (*0*)
BalasHapusane bisa gan tp gak iso modif e. haha
BalasHapusdicoaba,,langsung ke TKP
BalasHapusSangat bermanfaat ....
BalasHapusTerimakasih infonya
gan,, kode id='sidebar-wrapper'> tidak ada di gadget gue..???
BalasHapus@ady davedevilCari aja kode yang ada hubungannya sama sidebar misal sidebar-wrapper
BalasHapuskalau mau di letak kan bukan di side bar gimana sob? misal dibawah header.. thanks sob
BalasHapusletakin kode di atas di bawah kode header-wrapper, atau kode yang hampir mirip.
HapusMantaf gan ... Kebetulan emang ini yang lagi saya cari2..!
BalasHapusOke sob, semoga bermanfaat.
Hapussukses nih...
BalasHapustapi rada gak masuk sama blog... itu yang bentuk sama warna tab-nya bisa diubah nggak ya?
Edit-edit aja value yang ada di kode ini sob..
BalasHapus.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}
benar-benar membantu, terma kasih gan
BalasHapuskalau di footerr gimana caranya
BalasHapus