Cara Mudah Memasang Menu Horizontal Di Blog
Tampilan Blogspot kayaknya kurang cantik tanpa di sisipi tampilan Menu Navigasi yang diletakkan di atas ataupun di sidebar bahkan di bawah. Tujuan dan fungsi dari menu navigasi adalah tiada lain untuk mempermudah pengunjung mencari atau memilih artikel mana yang di inginkan dengan hanya satu sntuhan klik saja.Berikut ini adalah script menu yang di buat menggunakan HTML atau CSS murni tanpa sentuhan Javscript maupun Jquery.
Screenshot nya :
Oke kita langsung saja ke Tutor-nya...
1. Login ke akun blogger sobat
2. Pilih Rancangan/ Tata letak
3. Pilih Add Gadget
4. Pilih Java Script / HTML
5. Copy Paste kode di bawah ini yang letaknya berdasarkan selera sobat
<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>
Keterangan :
- Linkn : Judul Menu yang tampak
- # : Link Artikel
- Jika tambah menu hanya tinggal copy <li><a href="#"><span>Link 6</span></a></li> di bawah nya.
6. Save/ Simpan dan lihat hasilnya.
Cukup mudah kali, silahkan di coba. Semoga bermanfaat dan bisa membantu.
***h72***
0 komentar:
Post a Comment
No spam...