Share
- Ganti # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.
3. Setelah pop up window muncul, pilih opsi HTML/Javascript
1. Copy dan edit kode di bawah ini:
Kode:
<style>
#navcontainer { background: #369; border-top: 1px solid #9CC;
margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial,
Helvetica, sans-serif; } #navlist { list-style: none outside none;
margin: 0; padding: 0; } @media all { #navlist { text-align: center } }
#navlist li { bottom: 11px; display: inline; line-height: 1.2em;
margin: 0; padding: 0; position: relative; } html>body #navlist li {
background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; }
#navlist a, #navlist a:link, #navlist a:visited { background: #900;
border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer;
display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px;
position: relative; right: 2px; text-decoration: none; } #navlist
a:hover { background: #C00; bottom: 1px; color: #FFF; position:
relative; right: 1px; } #navlist a:active { background: #999; bottom:
0px; color: #FFF; position: relative; right: 0px; } #navlist li#active {
background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0;
padding: 0; position: relative; } html>body #navlist li#active {
background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist
#active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369; border-bottom: none; border-left: 1px solid #9CC;
border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0;
color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position:
relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>
- Ganti # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.
- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.
- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris:
<li><a href="#"><span>Link</span></a></li> sebelum </ul>.
2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
3. Setelah pop up window muncul, pilih opsi HTML/Javascript
4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.
7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).
9. Save lagi.
10. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan
