Sabtu, 25 Juni 2011

Membuat sub-menu link blogspot

Membuat sub-menu link blogspot sebagai menu navigasi blogspot contohnya seperti yang terlihat bawah ini

      BERANDA       !      LINK 1       !       LINK 2     !      LINK 3

Langsung aja ke Tkp, Gak usah panjang lebar kita langsung ke permasalahan utama.
  1. Login ke dashboard blogspot
  2. Pilih Rancangan »» Edit HTML
  3. Tempatkan kode CSS berikut diatas kode ]]></b:skin>
#sub-menu {background:#0000AA; font-size:13px;  font-family:verdana,sans-serif;  color:#ffffff;  overflow:hidden;  padding:8px;  border:1px solid #BB0000;}  #sub-menu a:link {color:#fff;} #sub-menu a:visited {color:#fff;} #sub-menu a:hover {color:#BB0000;  text-decoration:none;}  #sub-menu ul {margin:0px; padding:0px;  text-align:center;} #sub-menu li {display:inline;  list-style-type:none;  margin:0px; padding:0px;} #sub-menu ul li a, #sub-menu ul li a:hover {font-size:13px; color:#fff; margin:0px; padding:px;  text-decoration:none;  text-transform:uppercase;} #sub-menu ul li a:hover {color:#BB0000;  text-decoration:none;}

Kemudian tempatkan kode HTML berikut diatas kode <div id='content-wrapper'> atau biasanya bertuliskan <div id='wrapper-content'>

<div id='sub-menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'/>BERANDA</li>
<li class='page_item page-item-2'>
<a href='LINK YANG DITUJU'>LINK 1</a></li>
<li class='page_item page-item-2'>
<a href='LINK YANG DITUJU'>LINK 2</a></li>
<li class='page_item page-item-2'>
<a href='LINK YANG DITUJU'>LINK 3</a></li>
</ul>
</div>

Terakhir simpan tempalate dan lihat hasilnya.

Dari kode diatas akan terlihat seperti tampilan pada blog ini, silahkan sesuaikan kode warna sesuai kehendak kamu pada kode CSS-nya dan Ganti tulisan yang berwarna Biru sesuai kehendak kamu dan ganti alamat blog dengan alamat kamu. Biasanya link yang di pasang pada sub-menu berisi link kategori atau link label. Tapi semuanya terserah kamu mau di beri link apa.

Jika ada yang kurang paham bisa di tanyakan pada kotak komentar