Cara Membuat Navigasi atau Menu Bar Seperti Google

Cara Membuat Navigasi atau Menu Bar Seperti Google - Saya nemu tutorial bagus nie dari netfori.blogspot.com. namanya menu bar google. Tutorial kali ini akan membuat menu navigasi seperti punya google. Itu lho yang kalau kita masuk di google.com pasti kita lihat menu yang isinya Search , image dll. Dari pada bingung saya kasih screenshotnya saja. :)


Langsung saja Tutorial Cara Membuat Navigasi atau Menu bar Seperti Google:
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>
/* Start Menu Bar Google */
#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;
}

/* End Menu Bar Google */
5. Sekarang cari kode <body>
6. Bila sudah pasang kode ini di bawah <body> tersebut:
<div id="abtbox">
<ul>
<li><a href="
http://sibloggerklaten.blogspot.com">+Namamu</a></li>
<li><a href="http://sibloggerklaten.blogspot.com">Beranda</a></li>
<li><a href="http://sibloggerklaten.blogspot.com">Images</a></li>
<li><a href="http://sibloggerklaten.blogspot.com">Archive</a></li>
<li><a href="http://sibloggerklaten.blogspot.com">Link Exchange</a></li>
</ul>
</div>

Keterangan:
  1. Untuk kode yang berwarna merah, ganti sesuai url tujuan.
  2. Yang berwarna orange ganti dengan nama menu yang kamu inginkan.
  3. Pada penulisan nama url tujuan JANGAN memakai menambahkan "www" sebelum nama domain.

Sekian dulu Tutorial Cara Membuat Navigasi atau Menu Bar Seperti Google. Semoga Tutorial ini bermanfaat untuk sobat sekalian. Sobat juga bisa membaca Tutorial Cara Mengganti Kursor Blogger. Sekian dan Terima kasih.

9 Responses to "Cara Membuat Navigasi atau Menu Bar Seperti Google"

  1. mantab gan infonya, tq juga udah bantu benerin blog ane ^^

    ReplyDelete
    Replies
    1. iya sob,, sama-sama
      sesama blogger memang harus saling bantu. hehe..

      Delete
  2. wah link hidupnya belum ditambahin tuh. (saran yang bernada agak memaksa). Saran saya agar di kotak-in kodenya. salam

    ReplyDelete
  3. mantap deh artikelnya sob
    http://apotekacemaxs.com/

    ReplyDelete

Berkomentarlah dengan Bijaksana, spamming tidak akan pernah di publish