Cara Membuat Menu dibawah Header Blog

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 kawan buat. Manfaatnya adalah mempermudah user / pengunjung blog bernavigasi di blog kita, sehingga memperbesar pageview.

Nah, menu-menu diatas tergantung kebutuhan kawan, jika kawan merasa penting tidak salah kalau mencoba menggunakan cara dibawah ini, namun yang perlu diperhatikan agar berhasil adalah layout blog yang kawan punya harus sama dengan apa yg saya punya.

Langkah-langkah dibawah sudah saya uji coba 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 ' Expand Template Widget'

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 kawan, untuk kode merah adalah warna background
• Kode warna biru adalah warna tulisan
• Silahkan diganti dengan warna yang sobat inginkan. KLIK Disini untuk mengetahui kode warna HTML.

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

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>                      
</div>

kawan ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.

8. SAVE lalu lihat hasilnya..

 

Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat Menu dibawah Header Blog
Ditulis Oleh Catatan Steven
Jika anda mau mengutip, harap berikan link DOFOLLOW / Sumber yang menuju pada artikel saya Cara Membuat Menu dibawah Header Blog ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatian anda, jangan lupa berikan komentar dibawah artikel ini

Tweet

Posted in: Tips n Trik Blogger