Minggu, 04 Desember 2011

Membuat Tab Menu Otomatis Sesuai Label Blog

Langsung aja ...
  • 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 class='tabs-outer'>
  • Lalu pasang kode dibawah ini sebelum 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 
  • Lalu Simpan, selesai.