Membuat Tab Menu Otomatis Sesuai Label Blog

Wah... sudah lama gak posting karena kesibukan di lembaga sosial yang berlabel Komunitas Aspirai Rakyat Situbondo dan program pemberdayaan masyarakat (PNPM-MPd), gimana kabar semuanya..???

Oiya, bagaimana temen blogger udah pada sukses membuat tab menu pada blog? kali ini hampir sama yaitu Membuat Tab Menu Otomatis Sesuai Label Blog. Kita tidak perlu susah payah menambahkan label pada kode tab menu tersebut. hasilnya bisa anda lihat pada gambar dibawah ini.

Jika ingin lebih jelasnya silakan lihat demonya disini. Dan ikuti langkahnya :

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Copy paste kode berikut sebelum kode diatas :

/* KOD Tabs Menu Otomatis*/
.kod-label-list h2 {
display: none;
}
.kod-label-list a {
color: #333333;
}
.kod-label-list {
background: #E1D4C1;
height: 35px;
border:1px solid #DBC8AD;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
margin: 0 auto;
padding:0px;
text-shadow: 0 1px 0 #E1D4C1;
text-transform: none;
width: 960px;
}
.kod-label-list li {
border-right: 1px solid #666;
color: #333333;
float: left;
font: bold 12px Arial;
margin: 0 2px 5px 0;
padding: 10px 10px;
text-transform: uppercase;
}
.kod-label-list ul {
float: left;
list-style: none outside none;
margin-bottom: 0;
margin-left: 10px;
padding: 0;
width: 920px;
}

Keterangan code CSS diatas

1. Jika ingin merubah warna background menu silakan ubah #E1D4C1
2. Dan untuk merubah warna link adalah #333333

Langkah selanjutnya adalah :

• Cari kode 

<div id='content-wrapper'>

• Jika tidak ada silakan cari kode 

<div class='tabs-outer'>

• Lalu pasang kode dibawah ini sebelum salah satu kode diatas :

<div class='mbt-label-list'> <b:section class='mbt-label-list' id='mbt-label-list' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>

• Simpan Template.
• Pilih Tab Rancangan;
• Pilih Label yang baru dibuat dan pastikan seperti gambar berikut :

• Lalu Simpan, selesai.

Selamat mencoba semoga berhasil Please clik google +1