Modifikasi Navbar Menjadi Menu Horizontal Cantik



Merubah Navbar Menjadi Menu Horizontal Cantik
Klik gambar untuk memperbesar
Modifikasi Navbar Menjadi Menu Horizontal Cantik | Pada pembahasan kali ini bang dadan akan coba membahas cara memodifikasi navbar menjadi menu horizontal cantik. Navbar ini ni biasanya terdapat pada template standar bawaan blogger, kalau saya lihat pada template hasil modifikasi orang kebanayakan navbarnya sudah tidak di aktifkan. dan tutorial ini sudah saya coba pada template standar blogger pt keren sekali. Nah baiklah kalau sobat menggunakan template standar blogger, dan ignin menerapkan tutorial ini silahkan ikuti petunjuknya dibawah ini.



 Modifikasi Navbar Menjadi Menu Horizontal Cantik

  • Pertama silahkan login terlebih dahulu pada akunya masing-masing
  • Selanjutnya menuju Rancangan
  • Lalu pilih Template
  • Klik Edit HTML *jangan lupa centang expand template widgate.
Saran* Alangkah baiknya sobat backup template terlebih dahulu untuk berjaga - jaga dan meminimalisir tierjadinya kesalahan.
  • Selanjutnya cari kode ]]></b:skin>. *gunakan ctrl+f untuk mempermudah
  • Copy kode berikut tepat diatas ]]></b:skin>

  • Berikutnya silahkan sobat cari kode <body> atau </body> dan tempatkan kode di bawah ini di sebelum tag </body> atau sesudah tag <body> terserah sobat, yang penting kode dibawah ini ada diantara kode di atas itu.
Berikut kodenya:

<div class='bilah-menu-atas' id='bilahmenuatas'> 
<div class='kolom-utama'> 
<div class='kolom-menu'> 
<ul>
 <li><a href='http://bangdadan.blogspot.com/'><img alt='L3' height='15px' src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png' width='20px'/></a></li> 
<li><a href='URL'>Menu Kiri 1</a></li> 
<li><a href='URL'>Menu Kiri 2</a></li> 
</ul> 
</div> 
<div class='kolom-menu'> 
<ul style='float: right'> 
<li><a href='URL'>Menu Kanan 1</a></li> 
<li><a href='URL'>Menu Kanan 2</a></li> 
</ul> </div> </div> </div>

  • Selanjutnya simpan template anda.
Keterangan *Ganti tulisan yang berwarna merah dengan menu sesuai keinginan anda, dan apabila anda ingin menambah atau mengurangi menu itu sobat hanya cukup menambahkan atau menghapus kode <li><a href='URL'>Menu</a></li>.


Nah mungkin sekian dulu pembahasan kita kali ini tentang Modifikasi Navbar Menjadi Menu Horizoantal Cantik. semoga artikel ini bermanfaat bagi sobat semuanya. Akhir kata bang dadan ucapkan selamat mencoba dan semoga succes. Semangat..!!!
Labels: blogger tutorial, template hack

Thanks for reading Modifikasi Navbar Menjadi Menu Horizontal Cantik. Please share...!

15 Comments on Modifikasi Navbar Menjadi Menu Horizontal Cantik

  1. gan saya punya blog www.kapangratis.com saya ingin buat menu horisontal diatas header tidak bergerak saat blog di geser kebwah seperti demonya ini gimana gan??? maaf newbi

    ReplyDelete
  2. Oh iya ikuti aja tutorial diatas, itu untuk menu horizontal seperti yg dikatakan sobat tadi. ヅ
    Kalau ada yg ditanyakan lg silahkan jgn sungkan2.
    Semoga bermanfaat ya sob ?

    ReplyDelete
  3. terima kasih_ saya udah ada gan menu horisontal diatas headernya dari template bawaan pocong! ada kodenya gak gan agar tu menu tetap melanyang saat diatas saat blog di geser ke bawah?

    ReplyDelete
  4. Coba cari kode position pada menu horizontal itu, kemudian rubah menjadi fixed.
    contoh:
    width: 100%;
    min-width: 960px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 27px;
    font-size: 13px;
    z-index: 99;

    Coba aya ya gan?

    ReplyDelete
  5. di sini gambarnya bs di klik untuk di perbesar tapi tombol demonya tidak jalan K'

    ReplyDelete
    Replies
    1. Wah,, oke deh sekarang jg di perbaiki.. tunggu ya??

      Delete
    2. hehehe udah bs sekarang tombol demo nya (y)

      Delete
    3. Hehe,, ternyata gak bisa kalau pake buton yayuk, koq aneh ya?? kamu buka di browser apa gitu disana ??

      Delete
  6. salam rahayu bang dadan sukses selalu ya

    ReplyDelete
    Replies
    1. Salam kenal jg kawan, semoga kita semua selalu diberi kesuksesan oleh Tuhan YME. Amiin \m/

      Delete
    2. bermanfaat.. :) salam kenal dari #NGALAM

      Delete
    3. selamat kalau sudah bisa,, salam kenal juga gan..!!!

      Delete
  7. wah ini dia artikel yang saya cari, terimaksih gan sudah mau berbagi....

    ReplyDelete
  8. wah ini dia artikel yang saya cari, terimaksih gan sudah mau berbagi....

    ReplyDelete

Back To Top