Cara Membuat Menu Navigasi Keren di Blog

|
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.

Baca juga : Membuat Menu Navigasi Plus Kotak Pencarian Responsive

Menu Navigasi - Blogger
Menu Navigasi

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.

Cara Membuat Menu Navigasi Keren di Blog
1. Pertama-tama silahkan login ke akun blogger anda. Pada menu blogger atau dashboard, pilih Menu Tema atau 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;}
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://harmansh.blogspot.com/' title='Home'><font color='red'>Home</font></a></li>

<li><a href='#' title='About'>About&#160;&#160;&#187;</a>

<ul>

<li><a href='https://www.blogger.com/profile/06929658245748850875' 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&#160;&#160;&#187;</a>

<ul><li><a href='#' title='Menu'>Menu&#160;&#160;&#187;</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&#160;&#160;&#187;</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://harmansh.blogspot.com/p/site.html' title='Sitemap'><font color='blue'>Sitemap</font></a></li>

<li><a href='http://harmansh.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 anda. Sesuaikan dengan versi anda saja lah.

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. Jika belum anda bisa membacanya pada artikel Menambah 1 Kolom Gadget dibawah Header. Meletakkan kode HTML di atas menggunakan Gadget, akan memudahkan anda saat ingin mengubah isi dari menu navigasi blog anda tanpa harus capek Edit HTML template blog anda.

Baca juga : Cara Membuat Menu Navigasi dengan Kotak Pencarian (Search Box)

Demikian tutorial sederhana mengenai cara membuat menu navigasi keren di blog. Semoga bermanfaat. "Happy Blogging"

Related Posts :

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG

5 komentar:

JALAN SIPUT said...

sangat bermamfaat
thank sob

Harmansyah said...

@JALAN SIPUT, sama-sama sobat

shopie andika said...

Menu navigasi ini terpasang sesuai harapan di blog saya, thanks sob

Madrasah aliyah tolonuo said...

thanks sobat

Harmansyah said...

@Madrasah aliyah tolonuo, sama-sama sob

Post a Comment

...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......