Selasa, 24 April 2012

Cara membuat menu dibawah header blog

2 komentar
Membuat menu header blog itu sangat mudah, kita hanya perlu menambah beberapa kode. Contoh menu itu adalah Home / Beranda / Depan / Halaman utama , Menu Contac, menu Profile, menu Disclaimer, dan menu-menu lain yang ingin sobat buat. Manfaatnya adalah mempermudah user / pengunjung blog bernavigasi di blog kita, sehingga memperbesar pageview.

Nah, menu-menu diatas tergantung kebutuhan sobat, jika sobat merasa penting tidak salah kalau mencoba menggunakan cara dibawah ini, namun yang perlu diperhatikan agar berhasil adalah layout blog sobat harus sama atau mirip dengan template yang saya gunakan.


contoh menu
Langkah - langkah membuat menu dibawah header blog adalah :

1. Masuk ke dashboard Blog sobat, lalu ke menu Rancangan >> Edit HTML,  centang '

2. Cari kode seperti dibawah atau cari yang mirip (CTRL+F , cara cepat untuk mencari kode).
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='x-Demo (Header)' type='Header'>
<b:includable id='main'>

ganti maxwidgets='1' menjadi 2 atau lebih dan showaddelement='yes'>

3. Jika sudah selanjutnya sobat cari kode ]]></b:skin>

4. Hapus kode tersebut dan ganti dengan kode dibawah ini.
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;
}

]]></b:skin>

Keterangan :
  • Perhatikan kode yang di cetak tebal, untuk kode merah adalah warna background
  • Kode warna biru adalah warna tulisan
  • Silahkan diganti dengan warna yang sobat inginkan. 

5. Save template lalu klik Elemen Laman atau klik rancangan.

6. kemudian klik tambah gadget >> pilih HTML/JavaScript

7. Copykan kode berikut kedalam kotak tersebut
<a href="http://dumai-hnc.blogspot.com/" class="navigation">HOME</a>

<a href="http://dumai-hnc.blogspot.com/search/label/Putri%20Tujuh%20Asal%20Mula%20Nama%20Kota%20Dumai" class="navigation">Asal Mula Nama Kota Dumai</a>

<a href="http://dumai-hnc.blogspot.com/search/label/blogger" class="navigation">BLOGGER</a>

<a href="http://dumai-hnc.blogspot.com/search/label/Photoshop_CS3" class="navigation">PHOTOSHOP</a>

Keterangan : Ganti yang dicetak tebal pink dengan URL menu, dan warna biru adalah nama menu.

8. SAVE lalu lihat hasilnya..

2 Responses so far

  1. Mantap, bisa dicoba ni...

  2. mampir gan ...
    kunjung balik http://aidhil-16.blogspot.com

Leave a Reply