Berbagi itu indah, yuk kita bersedekah

LightBlog
LightBlog

Saturday, 29 September 2012

Cara Membuat Menu di Bawah Header Blog

Cara membuat menu di bawah header blog - Kali ini wahyu kembali dengan trik blogger yang mungkin sudah tidak asing bagi para blogger senior. Tapi untuk para newbie tentunya trik blogger kali ini pasti akan bermanfaat. Yaitu cara membuat menu di bawah header Bagi kalian yang inginnya silakan simak tutorialnya.

Menu pada bawah header yang akan saya bagikan kali ini tidak begitu sulit karena tidak sampai brutal editing pada bagian Html template. Penasaran? Berikut caranya.

1. Seperti biasa masuk ke bagian tata letak dan pilih Tambahkan Gadget. Pilihlah gadget yang berada di bawah header. Kalau tidak ada pada template, kalian bisa membuatnya disini.
2. Pilih Html/Javascript.
3. copy dan pastekan kode berikut ini.

 <a href="# " class="navigation">CONTACT</a>
<a href="# " class="navigation">BUKU TAMU</a>
<a href="# " class="navigation">FACEBOOK</a>
<a href="# " class="navigation">TWITER</a>
<a href="# " class="navigation">DOWNLOAD</a>
<a href="# " class="navigation">LAIN-LAIN</a>
<a href="# " class="navigation">CHATTING</a>


4. Ganti tanda # dengan Url tujuan kalian. Dan warna hijau dengan judul menunya.
5. Simpan.
Eitss. Tunggu dulu. Belum selesei ini. Agar tampilan menunya lebih menarik kalian bisa memberi sedikit pengaturan warna dan ukuran pada menu yang dibuat. Berikut caranya:
Masuk ke bagian template. Seperti biasa centang expand widget dan cari kode </b:skin>. Kalau sudah ketemu copy dan pastekan kode di bawah ini tepat di atas kode </b:skin> tadi.
 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;
}


Atur warna biru dengan kode warna yang kalian inginkan, dan warna merah untuk mengatur ukurannya. Simpan template dan lihatlah hasilnya. 

Demikianlah trik blogger kali ini yang membahas cara membuat menu di bawah header pada blog
Adbox