Home » Tutorial Blog » Cara Membuat Navigasi atau Menu Bar Seperti Google

Cara Membuat Navigasi atau Menu Bar Seperti Google

Posted on Jan 12, 2013

Menu Bar Seperti Google

Cara Membuat Navigasi atau Menu Bar Seperti Google- Sesuai judulnya saya akan memberikan tutorial blog untuk membuat menu  layaknya menu pada google.com. Oke saya ingin cepat aja tidak usah banyak basa-basi, ini dia tutorialnya:

 1. Langkah awal tetap sama, masuk ke akun blog sobat.
2. Lalu ke bagian template => edit html => expand.
3. Masukkan kode berikut tepat di ATAS kode "]]></b:skin>"

/* code from by http://netfori.blogspot.com/ */
#abtbox {
    font-family: Arial,sans-serif;
    font-size: 13px;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 27px;
    height: 30px;
    background-color: #222222;
    margin-top:0px;
    width: 100%;
    }

#abtbox ul
   { display: block;
    text-decoration:none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
   -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
     }

#abtbox ul li
    {text-decoration:none;
     -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none; 
     line-height: 27px;
    display: inline-block;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
    vertical-align: top;
    margin-left:10px; 
       }
#abtbox ul li a
    {
    color:#BBBBBB;
    font-weight: bold;
    -moz-text-blink: none !important;
    -moz-text-decoration-color: -moz-use-text-color !important;
    -moz-text-decoration-line: none !important;
    -moz-text-decoration-style: solid !important;
     display: block; 
     text-decoration:none; 
     }
#abtbox ul li a:hover, #abtbox ul li a:active
      {   
      color: #FFFFFF;
      }
/* code from by http://netfori.blogspot.com/ */

5. Sekarang cari kode "<body>"
6. Bila sudah pasang kode ini di bawah "<body>" tersebut:


<div id="abtbox">
<ul>
<li><a href="http://netfori.blogspot.com">+Namamu</a></li>
 <li><a href="http://netfori.blogspot.com">Beranda</a></li>
<li><a href="http://netfori.blogspot.com">Images</a></li>
<li><a href="http://netfori.blogspot.com">Archive</a></li>
<li><a href="http://netfori.blogspot.com">Link Exchange</a></li>
</ul>
</div>

Perhatian:
1. Untuk kode yang berwarna MERAH, ganti sesuai url tujuan. Harus sesuai dengan keterangan pada kata yang berwarna KUNING.
2. Pada penulisan nama url tujuan JANGAN memakai menambahkan "www" sebelum nama domain.

Demikian tutorial singkat ini, mohon maaf bila banyak kekurangan. Di-edit dan diterjemahkan dari www.allbloggingtricks.com. Terimakasih.

Artikel Terkait :



Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.


Posted by Labels:

56 comments:

  1. Handhita WindrayaJanuary 12, 2013 at 9:06 PM

    mantabb. tapi bikin lambat, gak?

    ReplyDelete
  2. rahmatJanuary 12, 2013 at 9:17 PM

    @Handhita WindrayaO gak bakalan sob. Ini ringan banget kok dibandingin dengan menggunakan menu bar yang lainnya.

    ReplyDelete
  3. AdityaReinaldoJanuary 12, 2013 at 9:44 PM

    Muantab sob.. Thx infonya yab...

    ReplyDelete
  4. UnknownJanuary 13, 2013 at 8:34 AM

    bagus

    ReplyDelete
  5. HanifJanuary 13, 2013 at 8:41 AM

    @Hakam JeniusTapi kode cssnya relatif lebih panjang dari yg lainya sob

    ReplyDelete
  6. AdityaReinaldoJanuary 13, 2013 at 9:13 AM

    thx infonya....

    ReplyDelete
  7. Mas AdhieJanuary 13, 2013 at 11:23 AM

    Kalau menurut saya pribadi posisinya fixed aja gan, biar bisa terlihat mesti di scroll ke bawah :)

    ReplyDelete
  8. rahmatJanuary 13, 2013 at 12:35 PM

    @HanifIya memang sob, penampilan pada saat masuk pertama kali gak banyak makan bandwich.

    ReplyDelete
  9. rahmatJanuary 13, 2013 at 12:39 PM

    @AdityaReinaldoSama-sama sob

    ReplyDelete
  10. rahmatJanuary 13, 2013 at 12:39 PM

    @Handhita WindrayaMakasih

    ReplyDelete
  11. rahmatJanuary 13, 2013 at 12:39 PM

    @AdityaReinaldoSama-sama sob

    ReplyDelete
  12. AnonymousJanuary 13, 2013 at 7:32 PM

    Artikel yang bermanfaat :)

    blognya keren mas ...

    ReplyDelete
  13. rahmatJanuary 13, 2013 at 7:54 PM

    @rolandjak23Makasih sob, blog anda tidak kalah keren kok. Ynag penting kreatifitasnya

    ReplyDelete
  14. xi gameJanuary 13, 2013 at 9:05 PM

    makasih sharenya gan, tp lagi takut utak atik template :D

    ReplyDelete
  15. HermanbagusJanuary 14, 2013 at 10:55 AM

    wih manteb nih sob

    ReplyDelete
  16. Blog91919January 14, 2013 at 2:23 PM

    mantabs GAN tutorial nya...
    sangat bermanfaat info nya bagi blogger pemula seperti saya...
    terimakasih
    keep sharing ya...

    ReplyDelete
  17. Luhurfatah10 BlogzJanuary 14, 2013 at 4:21 PM

    seperti di blog ini yha..? waw keren....simpan dulu ..ah

    ReplyDelete
  18. rahmatJanuary 14, 2013 at 8:52 PM

    @xi gameYa kalo mau lebih bagus harus berani ambil resiko lah.

    ReplyDelete
  19. rahmatJanuary 14, 2013 at 8:54 PM

    @Herman BagusMakasih sob.

    ReplyDelete
  20. rahmatJanuary 14, 2013 at 8:54 PM

    @Blog91919Iya sob, sama-sama.

    ReplyDelete
  21. rahmatJanuary 14, 2013 at 9:00 PM

    @Luhurfatah10 BlogzMakasih sob, kesenangan pembaca artikel d nomor satukan deh.

    ReplyDelete
  22. rahmatJanuary 14, 2013 at 9:00 PM

    @andro sultanOke sama-sama

    ReplyDelete
  23. UnknownJanuary 15, 2013 at 9:58 AM

    bisa dicoba tuh , unik. .

    ReplyDelete
  24. Staff AdministratorJanuary 15, 2013 at 4:20 PM

    menarik dan keren buat di coba nih sob :)

    ReplyDelete
  25. rahmatJanuary 17, 2013 at 5:49 AM

    @budi os 19Silahkan sob

    ReplyDelete
  26. rahmatJanuary 17, 2013 at 5:52 AM

    @febriansyah haqMonggo (jawa) silahkan (indo) please (ing)

    ReplyDelete
  27. Muehammad Yuezha AndreanJanuary 17, 2013 at 6:12 AM

    Keren lho, patut dicoba nih

    ReplyDelete
  28. UnknownJanuary 17, 2013 at 7:00 AM

    Bagus sob :)

    ReplyDelete
  29. rahmatJanuary 17, 2013 at 12:23 PM

    @Muehammad Yuezha AndreanMakasih sob,

    ReplyDelete
  30. rahmatJanuary 17, 2013 at 12:23 PM

    @Banyu Biru alTerimakasih

    ReplyDelete
  31. Achmed Islamic HernawanJanuary 17, 2013 at 7:06 PM

    wah wah, manteb sob...
    itu hasilnya ntar full satu layar ato cman sesuai dengan layout blogger....?

    ReplyDelete
  32. rahmatJanuary 17, 2013 at 8:29 PM

    @Achmed Islamic HernawanFull satu layar sob. Gak ikut di header, tapi paling atas memanjang dai pojok kiri atas sampai pojok kanan atas.

    ReplyDelete
  33. Dena Arta PutraJanuary 17, 2013 at 8:55 PM

    Keren gan kapan kapan ane terapin izin bookmark dulu

    ReplyDelete
  34. Den Of AutomotiveJanuary 17, 2013 at 8:57 PM

    oh yak scriptnya panjang ya, apa gak bikin blog jadi berat

    ReplyDelete
  35. rahmatJanuary 18, 2013 at 7:17 PM

    @Dena Arta PutraOke sob silahkan

    ReplyDelete
  36. rahmatJanuary 18, 2013 at 7:18 PM

    @Den Of AutomotiveKalo menurutku enggak sob, saya dah pernah nyoba.

    ReplyDelete
  37. Dena Arta PutraJanuary 19, 2013 at 4:35 PM

    Kunjungan lagi gan

    ReplyDelete
  38. Tips Trik SEO Blogger PemulaJanuary 19, 2013 at 4:51 PM

    makasih atas infonya

    ReplyDelete
  39. UnknownJanuary 19, 2013 at 6:45 PM

    Follback sukses

    ReplyDelete
  40. rahmatJanuary 19, 2013 at 7:59 PM

    @Dena Arta PutraOke sob makasih

    ReplyDelete
  41. AnonymousJanuary 23, 2013 at 6:43 PM

    ijin nyoba mas bro

    ReplyDelete
  42. rahmatJanuary 24, 2013 at 7:12 AM

    @imkaberitaOke silahkan aja sob.

    ReplyDelete
  43. rahmatJanuary 24, 2013 at 7:13 AM

    @Tips Trik SEO Blogger PemulaSama-sama

    ReplyDelete
  44. sJanuary 24, 2013 at 2:16 PM

    bro, cara masukin posting an ke dalam menubar gmana? thx..

    ReplyDelete
  45. rahmatJanuary 24, 2013 at 4:12 PM

    @Rifqi Yudanta Febriansyahcopy url postingan pilihan anda misal http://netfori.com/tentang-saya => ganti tulisan "http://netfori.blogspot.com" dengan url postingan => Masukkan keterangan di bagian warna kuning misal: "Tentang Saya" => Selesai. Bila belum jelas dapat bertanya kembali.

    ReplyDelete
  46. AdityaReinaldoFebruary 10, 2013 at 7:26 AM

    Blognya udah saya like....
    like back ya... :)

    ReplyDelete
  47. rahmatFebruary 11, 2013 at 5:18 PM

    @AdityaReinaldooke siap sobat.

    ReplyDelete
  48. asyhadiaMarch 11, 2013 at 12:41 AM

    saya coba dulu ya gan...thx

    ReplyDelete
  49. Lensa PelancongMarch 19, 2013 at 7:30 AM

    makasih broo

    ReplyDelete
  50. Blogger BatakApril 1, 2013 at 7:53 PM

    Boleh minta demonya gak gan..?

    ReplyDelete
  51. Foto BugilApril 1, 2013 at 7:53 PM

    Mantap sob! ijin coba dulu

    ReplyDelete
  52. Fahrul HidayatApril 4, 2013 at 10:56 AM

    susah banget bikinya sob ,,,

    ReplyDelete
  53. AnonymousApril 26, 2013 at 4:19 AM

    wah mantaps tu sob,,, thnkz

    ReplyDelete
  54. UnknownMay 2, 2013 at 1:31 PM

    Mantab gan.
    Kunjung balik ya..
    http://tenlibrary.blogspot.com

    ReplyDelete
  55. mas adit putraMay 15, 2013 at 5:18 PM

    ada yg bsa buatin kgk ??? sekedar amal

    ReplyDelete
  56. Yoyo SuharyoMay 22, 2013 at 6:13 PM

    sip gan, info yang bermanfaat

    ReplyDelete