Memasang Widget Multi Tab di Blogger
Widget di sidebar dari blog dengan wordpress bisa didesain dengan sangat baik sehingga bisa memberikan tampilan yangbisa menghemat tempat juga. Misalnya widget dengan sidebar yang memiliki beberapa tab (multitab), contohnya seperti pada gambar di samping, yang terlihat ada beberapa Tab (subcribe, latest tricks search). Anda bisa melihat hasilnya dari multi tab widget tersebut dari Live Demo di bawah ini.
Live Demo
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,
Sekarang anda bisa menambahkan widge, lalu lihat hasilnya..
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