Memasang Widget Multi Tab di Blogger

Namun jangan takut jika anda pengguna setia blogger, tampilan seperti ini pun bisa dipakai pada template blogger. Dengan menambahkan beberapa kode CSS dan Jquery. Saya akan mencoba membuat tutorial proses instalasinya semudah mungkin sehingga bagi pemula pun masih bisa mengikutinya.
Tutorial menambahkan Widget Multi Tab ke Blogger
Ada 3 langkah yang harus dilakukan,- Menambahkan JQuery dan JavaScript ke template Blogger anda
- Menambahkan kode CSS
- Menambahkan kode HTML
langkah 1- Menambahkan JQuery dan JavaScript ke template Blogger Anda
- Menuju ke Blogger > Template > Edit HTML
- Jangan lupa Backup templateanda dahulu
- Cari kode ]]></b:skin> (gunakan bantuan Ctrl+F pada browser)
- Tepat di bawah kode tersebut, paste paste kode berikut ini –> TTO Menu Tabs JavaScript
- Simpan template Anda
- Selesai
Langkah 2- Menambahkan kode CSS
- Masih di HTML templatecari kode berikut ]]></b:skin> lagi
- Tepat di atas kode tersebut paste kode di bawah ini:
/*---- Wordpress Style MBT Menu Tabs----*/Anda bisa mengganti kode warna #A46F38 dengan kode kode warna HexaDecimal dari template anda sehingga tab bisa terlihat lebih sesuai dan sempurna menyatu dengan template anda.
.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;}
Langkah 3- Menambahkan kode HTML
- Masih di bagian HTML Template, cari kode berikut <div id='sidebar-wrapper'>
- Jangan centang expand widget template.
- tepat sebelum kode <div id='sidebar-wrapper'> paste kode di bawah ini,
<div class='MBT-tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".MBT-tabs-content-widget-MBT-id").hide();
$("ul.MBT-tabs-widget-MBT-id li:first a").addClass("MBT-tabs-current").show();
$(".MBT-tabs-content-widget-MBT-id:first").show();
$("ul.MBT-tabs-widget-MBT-id li a").click(function() {
$("ul.MBT-tabs-widget-MBT-id li a").removeClass("MBT-tabs-current a");
$(this).addClass("MBT-tabs-current");
$(".MBT-tabs-content-widget-MBT-id").hide();
var activeTab = $(this).attr("href");
$(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;'/>
Keterangan: anda bisa mengganti Subscribe, Latest Tricks dan Search dengan Judul Widget yang anda inginkan.
Simpan Template
Langkah 4 (tambahan). Sekarang menuju ke Page Elements/tata letak. Anda akan melihat tampilan seperti di bawah ini,

Kalau semua langkah sudah anda lakukan dengan benar dan tidak ada crash antar script, seharusnya multitab widget sudah bisa muncul di blog anda.
Selamat mencoba
sumber
Komentar ini telah dihapus oleh administrator blog.
BalasHapusthanks gan
BalasHapusThanks infonya gan, sangat membantu :)
BalasHapushttp://kedaiacemaxs.com/
terimakasih infonya sob
BalasHapuskeren banget artikelnya gan
BalasHapusmakasih banyak infonya sob
BalasHapusHappiness is having a large, loving, caring, close-knit family in another city.
BalasHapus- ICS Abn Telefoonnummer
Terimakasih Informasinya .....
BalasHapus