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://kenama.blogspot.com">+Namamu</a></li>
<li><a href="http://kenama.blogspot.com">Beranda</a></li>
<li><a href="http://kenama.blogspot.com">Images</a></li>
<li><a href="http://kenama.blogspot.com">Archive</a></li>
<li><a href="http://kenama.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.
2. Pada penulisan nama url tujuan JANGAN menambahkan "www" sebelum nama domain.
Semoga bermanfaat :)
Semoga bermanfaat :)
Post a Comment
Budayakan Berkomentar Kawan !!!!!!!
Tapi Ada Peraturannya :
- Jangan Nyepam
- Jangan Berkata Kasar
- Jangan Komentar Promosi
Trimakasih Atas perhatiannya ^_^