English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
by : BTF

Minggu, 29 Juli 2012

Cara Membuat Menu di bawah Header / Judul Blog

Saya akan berbagi tentang cara membuat menu di bawah header / judul blog pada postingan saya kali ini..
Tanpa banyak basa basi kalau rekan - rekan berminat, silahkan anda ikuti cara saya membuat menu di bawah header / judul blog seperti di bawah ini :

Cari kode yang mirip dengan di bawah ini di Tata Letak > Edit HTML > Expand Widget Template

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah jangan disimpan dulu.

  • Masih di
    Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
  • Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.
a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda. Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.

  • Setelah langkah di atas, sekarang kita lanjut lagi ke : klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.
<a href="http://dianacelluler.blogspot.com " class="navigation">HOME</a>
<a href="http://dianacelluler.blogspot.com " class="navigation">CONTACT</a>
<a href="http://dianacelluler.blogspot.com
class="navigation">BUKU TAMU</a>
<a href="http://dianacelluler.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://dianacelluler.blogspot.com
class="navigation">TWITER</a>
<a href="http://dianacelluler.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://dianacelluler.blogspot.com
class="navigation">LAIN-LAIN</a>
<a href="http://dianacelluler.blogspot.com " class="navigation">CHATTING</a> 

Ganti kode yang berwarna merah dengan url anda sendiri, dan yang biru ganti dengan nama navigasi menu sesuai url anda . 

Semoga postingan saya tentang cara membuat menu di bawah header / judul blog ini bermanfaat bagi rekan - rekan yang membaca postingan saya...

Terima kasih atas kunjungan nya......