Bagaimana cara membuatnya? berikut ini cara membuatnya:
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Klik tanda panah hitam disebelaha kode yang mirip <b:skin>...</b:skin> (untuk membuka seluruh css).
5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatasnya.
/* Kode CSS Menu Navigasi Start */
#tuliskancom_litemenu {
width:auto;
background:#166bea;
border-bottom: 5px solid #993300;
border-top: 1px solid #e14d09;
clear: both;
overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
}
#tuliskancom_litemenu ul {
float: left;
width: 100%;
}
#tuliskancom_litemenu li {
float: left;
list-style-type: none;
}
#tuliskancom_litemenu li a {
background:#166bea;
color: #fff;
display: block;
font-size: 14px;
padding: 5px 17px 5px 15px;
position: relative;
text-decoration: none;
}
#tuliskancom_litemenu li a:hover {
background:#002660;
color: #fff;
}
#tuliskancom_litemenu li li a {
background: none;
background-color: #0d56c4;
border: 1px solid #0d408d;
border-top-width: 0;
color: #fff;
font-size: 14px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 130px;
}
#tuliskancom_litemenu li li a:hover {
background: none;
background-color: #166bea;
}
#tuliskancom_litemenu li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 160px;
z-index: 9999;
}
#tuliskancom_litemenu li:hover ul {
left: auto;
}
/* Kode CSS Menu Navigasi End */
6. Klik "Save/Simpan" Template, dan selesai.
7. Sekarang menuju ke halaman Tata Letak / Layout.
8. Klik Add / Tambahkan gadget.
9. Pilih HTML/JavaScript.
10. Letakkan kode berikut ini kedalamnya.
<div id="tuliskancom_litemenu">
<li><a href="#">Home</a></li>
<li><a href="http://uniquenessknowledge.blogspot.com">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1.1</a></li>
<li><a href="#">Sub Menu 1.2</a></li>
<li><a href="#">Sub Menu 1.3</a></li>
</ul>
</li>
<li><a href="http://uniquenessknowledge.blogspot.com">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</div>
Keterangan:
- Ganti kode yang berwarna merah dengan URL dari masing-masing judul menu
- Ganti kode yang berwarna biru dengan Judul dari masing-masing URL
11. Klik "Save/Simpan" gadget, dan selesai.
Demikian informasi terbaru tentang cara Membuat Menu Navbar. semoga bermanfaat
0 komentar:
Posting Komentar