Menu navigasi horizontal Blogger/Blogspot ini dibuat dengan HTML dan CSS murni
tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi
horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana
dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu
dengan HTML nya.
1. Copy dan edit kode di bawah ini:
<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: #38761d;
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: #900; 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>.
4. Kemudian masukkan Kode tersebut di atas
7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).
9. Save lagi.
Hasilnya seperti contoh berikut :
Sumber : buka-rahasia.blogspot.com
4 comments
trims atas ulasan menu horizontalnya
Bermanfaat sekali