BLOG URANG SUNDA: Tambahkan Wordpress Style Menu Tabs Widget Untuk Blogger

Tab View Widget Bergaya Wordpress? atau widget 3 kolom bergaya wordpress? itu mungkin yang akan saya bahas pada postingan kali ini, tapi sobat perlu lihat jga postingan saya sebelumnnya yaitu Special tab view untuk widget di blogger lama dan blogger baru. Kode ini saya dapatkan dari master blogger luar negeri ketika saya sedang jalan-jalan kesana, waduh pulau jawa juga belum semua saya kunjungi udah ngaku ke luar negeri lagi haa becanda kawan. Memang benar kode saya dapat dari Master Blogger luar negeri ketika sejang surfing di dunia maya, tanpa banyak panjang lebar lagi kita mulai bahas bagaimana menambahkan wordpress style menu tabs widget untuk blogger.

Cara tambahkan widget tabs multi untuk blog?

Saya telah membagi tutorial membuat tab view untuk widget dalam tiga bagian.

Menambahkan Jquery dan JavaScript untuk template blog sobat
Menambahkan CSS
Menambahkan HTML

Sebelum ke 3 bagian tersebut sebaiknya sobat like dulu blog saya hee

Oke setelah anda like kita mulai di tahap satu yaitu:
1. Menambahkan Jquery dan JavaSceript untuk template blog sobat

pergi ke blog sobat.
dari dasbor klik Rancangan => Edit HTML
backup temlate sobat terlebih dahulu
cari kode ]]></b:skin>
tepat di bawahnya simpan kode berikut => BUS buka menu tab JavaScript
simpan template anda
selesai untuk tahap satu.

2. Menambahkan CSS

masih di bagian Edit HTML cari kode ]]></b:skin> lagi
tepat di atas itu paste kode di bawah ini

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

Sobat cukup ganti #A46F38 dengan kode warna heksadesimal sehingga dapat menyatu dengan sempurna pada template blog sobat.

3.Menambahkan HTML

sekarang waktunya untuk pencarian kode <div id='sidebar-wrapper'>
pastikan kotak kecil di samping tulisan expand template widget anda centang atau ceklis.
tepat di bawah kode <div id='sidebar-wrapper'> paste kode di bawah ini.

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

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

Silahkan sobat ganti subscribs, latest tricks, search dengan nama judul widget yang akan sobat tambahkan nantinya.
Eits belum selesai sob masih ada berikutnya sekarang waktunya pindah ke tata letak atau page elements. Dan sobat akan melihat seperti gambar di bawah ini.

Tambahkan gadget yang sobat inginkan dan ingat sesuai judul widget yang sobat simpan pada kode sebelumnya. Dan lihat hasilnya..tarang...

Catatan : mungkin dari setiap template itu berbeda maka jangan ragu untuk sobat tanyakan kepada saya apa bila sobat mendapatkan sebuah kesulitan untuk membuat tab view untuk widget bergaya wordpress ini.

Selamat mencoba....

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.