Cara Membuat Menu Navigasi di Atas Header blog

05:14:00

        bagaimana cara membuat navigasi menu di atas header, pada kesempatan kali ini saya akan berbagi kepada anda tutorial atau cara membuat menu diatas header, cara memasang menu navigasi diatas header sebetulnya sangat mudah untuk membuatnya di blog, dan apa sebenarnya tujuan dari para blogger dalam mamasang navigasi menu di atas header blog ( top navbar menu) antara lain untuk memanfaatkan ruang diatas header yang kosong yang tidak terpakai, untuk anda yang ingin atau mau menambah menu navigasi dalam membuat navigasi menu diatas header blog, ikuti langkah-langkahnya dalam mencari cara memasang menu diatas header, dan yang akan saya bahas secara singkat dalam artikel kali ini bagaimana cara

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

Share this :

Previous
Next Post »
6 Komentar
avatar

mantap, makasih udah di pasang di blog saya lumayan pusing masangnya :)

Balas
avatar

sebetulnya gak terlalu sulit memasangnya, cuma jarang mencoba aja, jadi agak bingung masangnya, lama2 juga akan terbiasa, selamat mencoba gan.!!!

Balas
avatar

kode body di template saya kok gk ada mas. di pasang di bawah kode head apa bisa?

Balas
avatar

work gan..terima kasih tutorialnya..
mohon koreksi http://www.guru-kita.com

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔