Cara Membuat Menu Navigasi Keren - Menu navigasi adalah sebuah menu yang berisi link-link utama seperti homepage, halaman statis (about, contact us, privacy policy, disclaimer, sitemap), kategori blog (label), tools dan halaman penting lainnya yang biasanya berada tepat di bawah header blog. Dilihat dari definisi di atas, menu navigasi sangat perlu untuk kita install di sebuah blog atau website.
Apa
fungsi menu navigasi ?
Menu
navigasi berfungsi untuk mempermudah pengunjung atau pembaca blog dalam melakukan
pencarian suatu label atau kategori di dalam blog yang sedang di kunjungi.
Ada
beberapa bentuk menu navigasi yakni menu navigasi biasa dan menu navigasi
dropdown, dengan posisi horizontal maupun vertikal. Dan yang akan kita bahas
kali ini yakni menu navigasi dropdown dengan posisi horizontal. Dropdown ini
biasanya berisi sub-sub dari menu utama yang ada pada navigasi blog tersebut.
Dengan dropdown akan memudahkan pemilik blog yang blognya memiliki banyak
kategori, menyusunnya dengan rapi pada menu navigasi. Anda bisa melihat
contohnya pada menu navigasi blog ini.
Gambar
di atas adalah contoh tampilan dari menu navigasi yang akan kita buat. Seperti
yang anda lihat di situ terdapat 6 menu utama yaitu Home, About, Category,
Sitemap, Contact Us dan Tools. Kemudian pada menu category terdapat sub menu
dari menu utama dan di dalam sub menu terdapat lagi sub menu dari sub menu.
bagaimana sobat cukup keren bukan? yuk kita langsung saja ke langkah
pembuatannya.
Tapi
sebelum anda membuat menu navigasi blog anda harus membuat Laman atau Halaman
dahulu yang berfungsi sebagai tag dalam postingan nanti yang urlnya anda copy
kan ke menu navigasi nanti Cara membuatnya:
1.
Login
ke halaman blogger
2.
Pada
menu dasbor blogger pilih menu Laman/Halaman
3.
Pilih
buat halaman baru
4.
Isikan
nama halamannya sesua dengan kategori menu navigasi nantinya
5.
Klik
simpan
Cara Membuat Menu Navigasi Keren di Blog
1. Pertama-tama silahkan login ke akun blogger anda. Pada menu blogger atau dashboard, pilih Menu Temaatau Template. lalu klik Edit HTML.
2. Cari dan temukan kode ]]></skin> (gunakan Ctrl+F untuk mempermudah pencarian).
3. Letakkan kode CSS berikut ini di atas kode ]]></skin>.
Kode CSS
#NavbarMenu{background:#000000; width:960px;
height:32px; color:#5A6C8C; margin:auto; padding:0 5px; font:bold 8px Arial,
Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{background:#222;color:#fff; display:block; width:200px; height:33px; font-size:11px; float:left; margin:auto; padding:0; font:bold 11px Arial, Tahoma, Verdana; border-top: 1px solid #333; border-bottom: 1px solid #111; border-right: 1px solid #333; border-left: 1px solid #111;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{background:#222;color:#fff; display:block; text-transform:uppercase; text-decoration:none; margin:0; padding:9px 15px 9px; font:bold 12px Arial, Tahoma, Verdana; border-top: 1px solid #333; border-bottom: 1px solid #111; border-right: 1px solid #333; border-left: 1px solid #111;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#222; width:120px; color:#fff; text-transform:uppercase; float:none; margin:0; padding:9px 15px 9px; border-top:1px solid #333 border-bottom:1px solid #111; border-left:px solid #151f23; border-right:1px solid #151f23; font:bold 12px Arial, Tahoma, Verdana;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-35px 0 0 150px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:130px; padding:3px 7px; border:1px solid #333; font:normal 12px Arial, Tahoma, Verdana;}
#search .btn{background:#333; color:#fff; font-size:12px; margin:5px 0 0 5px; padding:3px; width:35px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{background:#222;color:#fff; display:block; width:200px; height:33px; font-size:11px; float:left; margin:auto; padding:0; font:bold 11px Arial, Tahoma, Verdana; border-top: 1px solid #333; border-bottom: 1px solid #111; border-right: 1px solid #333; border-left: 1px solid #111;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{background:#222;color:#fff; display:block; text-transform:uppercase; text-decoration:none; margin:0; padding:9px 15px 9px; font:bold 12px Arial, Tahoma, Verdana; border-top: 1px solid #333; border-bottom: 1px solid #111; border-right: 1px solid #333; border-left: 1px solid #111;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#222; width:120px; color:#fff; text-transform:uppercase; float:none; margin:0; padding:9px 15px 9px; border-top:1px solid #333 border-bottom:1px solid #111; border-left:px solid #151f23; border-right:1px solid #151f23; font:bold 12px Arial, Tahoma, Verdana;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-35px 0 0 150px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:130px; padding:3px 7px; border:1px solid #333; font:normal 12px Arial, Tahoma, Verdana;}
#search .btn{background:#333; color:#fff; font-size:12px; margin:5px 0 0 5px; padding:3px; width:35px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
Catatan :
(width:960px) sesuaikan dengan lebar header blog anda.
4. Cari dan temukan kode <body> (gunakan Ctrl+F untuk mempermudah pencarian).
5. Letakkan kode HTML berikut ini di bawah kode <body>.
Kode HTML
<div
id='outer'>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='http://syarifsoden66.blogspot.com/' title='Home'><font color='red'>Home</font></a></li>
<li><a href='#' title='About'>About  »</a>
<ul>
<li><a href='https://www.blogger.com/profile/' target='_blank' title='Profile'><font color='darkorange'>Profile</font></a></li>
<li><a href='#' target='_blank' title='Me'>Me</a></li>
<li><a href='#' target='_blank' title='Google Plus' target='_blank'><font color='darkred'>Google Plus</font></a></li>
<li><a href='#' target='_blank' title='Twitter'><font color='lightblue'>Twitter</font></a></li>
<li><a href='#' target='_blank' title='Facebook'><font color='blue'>Facebook</font></a></li>
</ul></li>
<li><a href='#' title='Menu'>Category  »</a>
<ul><li><a href='#' title='Menu'>Menu  »</a>
<ul><li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
</ul></li>
<li><a href='#' title='Menu'>Menu  »</a>
<ul><li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
</ul></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
</ul></li>
<li><a href='http://syarifsoden66.blogspot.com/p/site.html' title='Sitemap'><font color='blue'>Sitemap</font></a></li>
<li><a href='http://syarifsoden66.blogspot.com/p/contact-us.html' target='_blank' title='Contact Us'>Contact</a></li>
<li><a href='#' title='Tool'>Tool</a>
<ul>
<li><a href='#' target='_blank' title='Free SMS'>Free SMS</a></li>
<li><a href='#' target='_blank' title='HTML Color Code'>HTML Color Code</a></li>
<li><a href='#' target='_blank' title='Parse Code HTML'>Parse Code HTML</a></li>
</ul></li>
</ul>
</div></div></div>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='http://syarifsoden66.blogspot.com/' title='Home'><font color='red'>Home</font></a></li>
<li><a href='#' title='About'>About  »</a>
<ul>
<li><a href='https://www.blogger.com/profile/' target='_blank' title='Profile'><font color='darkorange'>Profile</font></a></li>
<li><a href='#' target='_blank' title='Me'>Me</a></li>
<li><a href='#' target='_blank' title='Google Plus' target='_blank'><font color='darkred'>Google Plus</font></a></li>
<li><a href='#' target='_blank' title='Twitter'><font color='lightblue'>Twitter</font></a></li>
<li><a href='#' target='_blank' title='Facebook'><font color='blue'>Facebook</font></a></li>
</ul></li>
<li><a href='#' title='Menu'>Category  »</a>
<ul><li><a href='#' title='Menu'>Menu  »</a>
<ul><li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
</ul></li>
<li><a href='#' title='Menu'>Menu  »</a>
<ul><li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
</ul></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu</a></li>
</ul></li>
<li><a href='http://syarifsoden66.blogspot.com/p/site.html' title='Sitemap'><font color='blue'>Sitemap</font></a></li>
<li><a href='http://syarifsoden66.blogspot.com/p/contact-us.html' target='_blank' title='Contact Us'>Contact</a></li>
<li><a href='#' title='Tool'>Tool</a>
<ul>
<li><a href='#' target='_blank' title='Free SMS'>Free SMS</a></li>
<li><a href='#' target='_blank' title='HTML Color Code'>HTML Color Code</a></li>
<li><a href='#' target='_blank' title='Parse Code HTML'>Parse Code HTML</a></li>
</ul></li>
</ul>
</div></div></div>
Catatan
:
Ganti tanda pagar # dan link-link yang ada di dalamnya (href='link-link') dengan link blog Laman Kalian.
Ganti tanda pagar # dan link-link yang ada di dalamnya (href='link-link') dengan link blog Laman Kalian.
Selain
meletakkan kode HTML di bawah kode <body> di dalam template dengan edit HTML,
anda juga bisa meletakkan kode HTML tersebut ke dalam Tata
letak dengan menambahkan gadget, lalu pilih HTML/JaveScript, kemudian
copas kode HTML di atas ke dalamnya, lalu klik Simpan. Hal ini bisa anda
lakukan jika di bawah header blog anda sudah terdapat 1 kolom gadget.
Demikian
tutorial sederhana mengenai cara membuat menu navigasi keren di blog. Semoga
bermanfaat. "Happy Blogging"
1 komentar:
Mantabb