Cara Membuat Menu Navigasi dan Media Sosial di atas Header Blog


Andrian's Blog - Sekarang ini banyak sekali blog-blog yang menampilkan Top Menu Navigasi di atas Header Blog dan ikon akun Media Sosial. Langsung saja simak  tutorial Cara Membuat Menu Navigasi di atas Header Blog dan Media Sosial. Berikut tutorialnya:
  • Buka Blogger
  • Klik Template > Edit HTML
  • Cari Kode </b:skin> (Untuk memudahkan tekan Ctrl + F )
  • Copy paste kode dibawah ini diatas kode </b:skin>
<style type='text/css'> /* TOPMENU */ .topmenu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 0 10px 0;height:35px;border-bottom:1px solid #f0f0f0;overflow:hidden} .nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0} .nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0} .nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px} .nav-menu li a:hover{background:#f5f5f5} ul.nav-social{height:35px;margin:0 0 10px 0;padding:0 0;float:right} ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0} ul.nav-social li a{display:inline-block;line-height:35px;height:35px;padding:0 8px;margin:0 0 0 0;color:#666666} ul.nav-social li a i{line-height:35px} ul.nav-social li a:hover{color:#fff} ul.nav-social li a.fcb:hover{background:#3B5A9B} ul.nav-social li a.gpl:hover{background:#DD4B39} ul.nav-social li a.twt:hover{background:#1BB2E9} ul.nav-social li a.ytb:hover{background:#ED3F41} </style >
  • Setelah itu copy paste kode dibawah ini letakan diatas kode <div class='header-wrapper'> atau <div id='header-wrapper'> 
<div id='nav-wrap'> <nav class='topmenu'> <ul class='nav-menu'> <li><a href='#'>About</a></li> <li><a href='#'>Contact Us</a></li> <li><a href='#'>Privacy Policy</a></li> <li><a href='#'>Disclaimer</a></li> </ul> <ul class='nav-social'> <li><a class='fcb' href='#' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a></li> <li><a class='gpl' href='#' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a></li> <li><a class='twt' href='#' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a></li> <li><a class='ytb' href='#' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a></li> </ul> </nav> <div class='clear'></div> </div>
  • Terakhir cari kode </head> Lalu letakkan kode dibawah ini tepat diatas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
  • Setelah itu klik Simpan Template
Notes:
  1. Tanda # (Merah) ganti dengan link Anda.
  2. Pastikan kode yang Anda masukan benar secara otomatis menu navigasinya akan menyesuaikan dengan lebar blog Anda.
  3. Jika Anda ingin menambahkan icon sosial media bisa mengunjungi situs ini Asrtonautweb.co
Sekian tutorial Cara Membuat Menu Navigasi di atas Header Blog dan Media Sosial dari saya, Jika ada yang kurang jelas silakan berikan komentar.

50 Responses to "Cara Membuat Menu Navigasi dan Media Sosial di atas Header Blog "

  1. berhasil saya praktekin di blog saya gan, makasih ya

    ReplyDelete
  2. Nice article, izin bookmark gan..

    ReplyDelete
  3. wah mantap nih gan, saya coba praktekan dulu

    ReplyDelete
    Replies
    1. Silakan gan, jangan lupa share ke teman-teman juga :D

      Delete
  4. waw, boleh di coba ini gan, menarik sepertinya

    ReplyDelete
  5. nice post gan,,, ane mau praktek dulu di blog ane

    ReplyDelete
  6. Thanks gan sudah berhasil saya praktekan

    ReplyDelete
  7. Zoooooooooooooooooosssssssssssssssssssssssss

    ReplyDelete
  8. kebetulan diblog saya belum dipasang gan navigasinya

    ReplyDelete
    Replies
    1. Buruan pasang gan supaya ngak ketinggalan jaman blognya :v

      Delete
  9. izin nyoba gan. terimakasih informasinya

    ReplyDelete
  10. mantab gan izin bookmark nih buat blog ane satu lagi

    ReplyDelete
  11. Kebetulan saya lagi nyari-nyari, pas banget ketemu disini makasih ya gan udah dishare

    ReplyDelete
  12. nice, kebetulan besok tmen2 mau pada praktikum buat blog. ijin save gan.

    ReplyDelete
  13. Nice post gan ^^ lanjutkan terus smga sukses

    ReplyDelete
    Replies
    1. Iya makasih ya gan udah mampir :D

      Delete
    2. mantep mas, oia kok ada tanda --> diatas nya ?
      gmana ngilanginnya? lihat di http://www.mediablog4you.web.id/

      Delete
  14. mantap gan, sekalian tutorialnya biar top menunya bisa stictky :D

    ReplyDelete
  15. nice post gan,, makasih artikelnya bagus,, sangat bermanfaat

    ReplyDelete
  16. nice post gan, jdi nambah ilmunya , lanjutkan

    ReplyDelete
  17. sudah sangat lama saya cari-cari, terimakasih gan,
    tulisan anda sangat membantu :)

    ReplyDelete
  18. izin prakterk gan jangan lupa done ya

    ReplyDelete
  19. hai, sy buat menu navigasi di atas, berhasil tapi kok ada jarak ya antara sisi layar atas dengan menu nya,, jarak nya pun cukup lebar,,, aq si pengen nya tombol menu nya sejajar dengan sisi layar atas atau tidak ada jarak...
    gimana ya mengatur nya masih newbe :)

    ReplyDelete

PERATURAN KOMENTAR
✔ RELEVAN
✔ SOPAN
✖ LIVE LINK / LINK
✖ SPAM
✖ Out Of Topic
SILAKAN BERIKAN KOMENTAR ANDA