memasang menu header , manfaat dari kita memasang menu di atas header dapat berpengaruh terhadap tampilan blog menjadi lebih terkesan menarik dan lebih profesional, dengan kita memasang menu navigasi pengunjung di blog akan lebih mudah mencari halaman yang memang dicari oleh pengunjung blog memang BANYAK sekali blog yang menampilkan atau membuat Top Menu Navigasi di atas Header Blog dengan menggunakan icon / ikon akun Media Sosial, sehingga akan telihat memiliki kesan yang menarik, mudah pula dalam memasang menu navigasi blog, soalnya 'kan desain template blogger menggunakan tiga jenis kode: CSS, HTML, dan JavaScript.
kita bisa mencontoh atau mencari kode-kode yang dibuat untuk membuat menu navigasi diatas header Banyak juga diantara para blogger yang bersedia berbagi kodenya kepada kita semua, dalam membuat menu diatas header dan manyak fariasi dalam memper cantik menu di atas header, dan saya akan berbagi kodenya kepada dibawah ini.
Langkahnya membuat top navigasi menu:
1. Template > Edit HTML
2. Cari/Temukan (CTRL+F) kode ]]></b:skin>
3. Simpan kode berikut ini DI ATAS kode tersebut
/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
#navbar-iframe {display: none !important;}
NB:
- Sesuaikan lebarnya (width:950px) dengan lebar header template Anda.
- Jika mau ganti background > background:#eeeded; (Lihat Kode Warna HTML)
- Ganti warna huruf menu > color:#222;
4. Cari/Temukan (CTRL+F) kode <body>
5. Simpan kode berikut ini DI BAWAH-nya.
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://upilbos.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://upilbos.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://upilbos.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://upilbos.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://upilbos.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://upilbos.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://upilbos.blogspot.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
NB: Ganti link http://upilbos.blogspot.com dan nama menu-nya dengan versi Anda.
6. Save Template!
Cara Membuat Navigasi Menu di Atas Header Blog sudah saya coba dan BERHASIL diterapkan di blog upilbos.blogspot.com
6 Komentar
mantap, makasih udah di pasang di blog saya lumayan pusing masangnya :)
Balassebetulnya gak terlalu sulit memasangnya, cuma jarang mencoba aja, jadi agak bingung masangnya, lama2 juga akan terbiasa, selamat mencoba gan.!!!
Balasthx gan
Balaskok gakk responsive gan ?
Balaskode body di template saya kok gk ada mas. di pasang di bawah kode head apa bisa?
Balaswork gan..terima kasih tutorialnya..
Balasmohon koreksi http://www.guru-kita.com
Penulisan markup di komentar