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:
- Untuk kode yang berwarna merah, ganti sesuai url tujuan.
- Yang berwarna orange ganti dengan nama menu yang kamu inginkan.
- 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.
Sponsored by:
0 comments:
Post a Comment