Cara membuat menu di bawah Header blog

Written By Hanif Aghar on Jumat, 20 April 2012 | 5:42 AM

Membuat menu header blog itu sangat mudah, kita hanya perlu menambah beberapa kode. Contoh menu itu adalah Home / Antivirus / Download / Software / Themes / Tips & Trik , 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 Berikut ini Adalah Contoh dari Menu Header Blog.


Nah, menu-menu diatas tergantung kebutuhan sobat, jika sobat merasa penting tidak salah kalau mencoba menggunakan cara dibawah ini, Langkah-langkah dibawah sudah saya uji coba di Blog Dark Optimus saya, dan berhasil. Sebelum memulai langkah-langkah dibawah backup terlebih dahulu template blog sobat.

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 Tata Letak.

6. kemudian klik tambah gadget >> pilih HTML/JavaScript.
7. Copykan kode berikut kedalam kotak tersebut.

<a href="http://www.optimus-software.blogspot.com/" class="navigation">HOME</a>
<a href="http://optimus-software.blogspot.com/search/label/Antivirus" class="navigation">AntiVirus</a>
<a href="http://optimus-software.blogspot.com/search/label/Download%20Film" class="navigation">Download</a>
<a href="http://optimus-software.blogspot.com/search/label/Software" class="navigation">Software</a>
<a href="http://optimus-software.blogspot.com/search/label/Themes" class="navigation">Themes</a>
<a href="http://optimus-software.blogspot.com/search/label/Tips%20dan%20Trik" class="navigation">Tips &amp; Trik</a>

Keterangan : Ganti yang dicetak tebal merah dengan URL menu, dan warna biru adalah nama menu.
Jangan Lupa letakan Gadget tersebut tepat di bawah Header Sobat...



8. SAVE lalu lihat hasilnya..

Sekian dulu Tips dan Trik Cara membuat menu di bawah Header Blog nya.Terima kasih atas Kunjungan Anda Selamat Mencoba..!!! ^_^


Baca Juga yang ini Sob...:

0 komentar:

Posting Komentar

Silahkan Tulis Komentar, Kritik dan Saran Anda di Sini. Namun saya Mohon untuk tidak menggunakan komentar spam dan berkomentarlah yang sopan. Link aktif dari sumber lain yang ditulis pada kotak komentar akan saya Hapus. Terima kasih..

 
berita unik