membuat tab widget sederhana di blogger

membuat tab widget sederhana di blogger

Assalamualaikum.
Tab widget berfungsi untuk lebih menghemat halaman sidebar di blog.Apabila kita sudah terdaftar dan berhasil menjadi publiser di google adsense maka tab widget ini akan terasa lagi manfaatnya terlebih jika kita akan lebih banyak lagi menampilkan konten-konten yang cukup banyak di area sidebar blog.
Setiap elemen tab ini mempunyai fungsi yang mandiri,kita dapat menambahkan berbagai elemen widget kedalam satu tab widget yang akan kita buat di area sidebar.Namun sayangnya tab widget ini tidak berjalan sempurna jika kita menggunakan template simple blogger(template default blogger saat ini),karena kita akan kesulitan untuk meletakkan tab ini.walaupun bisa dipasang dengan sangat mudah dibagian tata letak atau layout namun nantinya kita akan dibingungkan untuk memasang id dari setiap gadget.Jadi disini saya sarankan template yang anda gunakan adalah template klasik yang masih memiliki kode seperti berikut.
  • #header
  • #outer-wrapper
  • #main-wrapper
  • #sidebar-wrapper
dan lain sebagainya.

Berikut cara membuat tab widget sederhana di blogger.
1.Login seperti biasa ke blogger.com.
2.Berikutnya silahkan anda klik template > edit html seperti biasa.
3.Di halaman pengeditan HTML,silahkan anda cari kode
]]></b:skin>

(untuk memudahkan pencarian silahkan gunakan tombol CTRL+F jika anda menggunakan laptop aau komputer).
4.Berikutnya,letakkan kode CSS berikut ini diatas kode ]]></b:skin> tadi.
/* Tab widget
----------------------------------------------- */
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#404040;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#64A071}
#sidebar-main .widget1{background-color:#ffffff;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}

5.Jika sudah,berikutnya anda cari kode
<div id='sidebar-wrapper'>

lalu letakkan kode dan script berikut ini tepat dibawahnya.
<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'> 
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'> 
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'> 
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

6.Jika sudah,silahkan anda klik save atau simpan.
7.Berikutnya silahkan anda masuk ke tata letak. dengan cara klik tata letak.Dihalaman tata letak,anda akan menemukan elemen layout baru yang bentuknya seperti gambar dibawah ini.

membuat tab widget sederhana di blogger

keterangan :
Coba anda perhatikan bagian gambar yang saya beri nomor berwarna merah diatas.
  • nomor 1 adalah tab pertama yang posisinya akan berada disebelah kiri dan anda bisa menambahkan berbagai gadget kedalamnya dengan cara klik add gadget seperti biasa.
  • nomor 2 adalah tab pertama yang posisinya akan berada disebelah tengah dan anda bisa menambahkan berbagai gadget kedalamnya dengan cara klik add gadget seperti biasa.
  • nomor 3 adalah tab pertama yang posisinya akan berada disebelah kanan dan anda bisa menambahkan berbagai gadget kedalamnya dengan cara klik add gadget seperti biasa.
Tambahan:
Untuk judul tab seperti popular post,label.archieve dapat anda ganti di edit HTML template,caranya sebagai berikut:
  • misalnya anda akan mengganti judul tab archieve dengan kata statistik,maka silahkan anda klik template > edit HTML,lalu cari kode 
  • <div id='sidebar-wrapper'>
     
  • Nanti anda akan menemukan kata popular post,label,archieve dengan warna teks hitam.Silahkan anda ganti kata-kata tersebut dengan kata statistik atau sesuai keinginan anda.Jika anda sudah terbiasa atau sudah lebih mahir lagi maka anda akan dapat memodifikasinya dengan sesuatu yang lebih menarik lagi.

Demikianlah cara membuat tab widget sederhana di blogger,semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

1 komentar:

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan