Cara Membuat Menu Navigasi Keren dari Template Bawaan Blogger

Untuk memudahkan dalam mencari artikel biasanya dalam sebuah web ada namanya Label Navigasi. Navigasi merupakan link menu yang berisi Label-label dari arikel yang terkait dengan topik yang dibahas. Label Navigasi ini berfungsi untuk memudahkan pengunjung dalam mencari jenis Artikel yang akan dibaca. Untuk anda yang baru terjun di dunia blogging mungkin akan sedikit kesulitan dalam membuat navigasi menu pada template bawaan dari blogger. Atau mungkin anda ingin mengubah Navigasi bawaan agar lebih terlihat keren. Dan dengan adanya Navigasi juga merupakan syarat untuk mendaftar di Google Adsense.

Cara Membuat Menu Navigasi Responsif
Untuk membuat menu navigasi yang keren, dibutuhkan sedikit "perubahan" pada script HTML dari template atau tema blogger. Untuk itu lebih baik backup/cadangkan terlebih dahulu Tema/Template anda apabila telah dimodifikasi sebelumnya untuk mencegah apabila script ini error.
Ikuti langkah-langkah berikut dengan cermat!
1. Masuk ke menu blogger anda dan klik template/tema.
"Sebagai contoh, saya menggunakan tema "Notable Light" yang ada di Blogger".
2. Pada bagian "tema saya" Klik tanda ▼ disamping tombol sesuaikan, kemudian pilih "Edit HTML".
3. Kemudian cari kode HTML berikut :

]]></b:skin>

dengan menekan CTRL + F. Lalu salin kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.
Jika code ]]></b:skin> tidak ada anda bisa meletakkannya di </style>.
Berikut adalah kode CSSnya :

/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}
.nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
.nav-menu2 > li > a.active{background:#212121;box-shadow:0 4px 0 #E73140 inset}
.nav-menu2 > li:hover > a{background:#212121;box-shadow:0 4px 0 #E73140 inset}
.nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
.nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block}
.nav-menu2 li li.hover ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#333333;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0}
#search-form td.search-box{padding-right:30px}
#search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
#search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
#search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
#search-form input#search-box[type="text"]:focus{background:#eee;outline:none}

Berikut ini posisi peletakkan kode nya:

4. Selanjutnya untuk menampilkan Label Menu Navigasi, cari lagi kode berikut :

</header>

dan salin kode dibawah ini, kemudian letakkan tepat dibawah </header>

<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
<!-- secondary navigation menu start -->
<ul class='nav nav-menu2'>
<li><a class='active' href='luringspot.com'><i class='fa fa-home'></i> Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='luringspot.com'>Markup</a></li>
<li><a href='luringspot.com'>Error Page</a></li>
<li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li>
</ul>
<!-- secondary navigation menu end -->
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

Berikut posisi meletakkannya:

Terakhir Save template/tema anda dan lihat hasilnya!

Cara mengedit Judul/Label menu Navigasi Blogger

Setelah tadi membuat menu Navigasinya, tentunya kita harus mengubah Label Menu pada Navigasi dan link atau alamat Label agar sesuai dengan website kita.

Untuk mengeditnya simak caranya berikut ini:

1. Masuk kembali ke Edit HTML Template kemudian cari kode "Menu 1" pada pencarian HTML di template anda, dengan menekan CTRL + F dan ketikkan "Menu 1" >Enter.

2. Hapus tulisan Menu 1, menu 2 atau silahkan perhatikan kode diatas tadi yang sudah saya beri warna putih dan ganti dengan Judul/Nama Label pada blog anda.

3. Hapus dan ganti tanda # atau pagar atau silahkan perhatikan kode diatas tadi yang sudah saya beri warna merah dengan Link/alamat Label anda.

4. Lakukan untuk Menu 2, 3, dan seterusnya, begitu pula untuk sub menu nya.

Untuk menambahkan Menu Navigasi, anda hanya perlu menyalin script berikut dan meletakkannya di bawah menu 3,4,5 dan seterusnya.

</ul>
</li>
<li><a href='#'>Menu 4</a></li>

Untuk Menambahkan sub-menu anda hanya perlu mecopy code berikut dan letakkan dibawah menu utama.

<ul>
<li><a href="#">Sub Menu 1</a></li>

Jika ingin menambah sub menu di bawah submenu anda hanya perlu menghilangkan <ul> di awal code diatas, dan hanya meletakkan code ini <li><a href="#">Sub Menu 2</a></li>. begitu pula untuk menu utama.

5. Terakhir tinggal save template anda dan lihat apakah menu navigasi telah sesuai dan tampil dengan benar.

Penutup

Untuk melakukan pengeditan pada menu navigasi, ada baiknya anda mencermati setiap code yang ada pada html, karena jika terjadi kesalahan peletakan code maka template akan error dan tidak dapat diterapkan ke website kita. Sekian tutorial kali ini semoga bermanfaat, Jika ada pertanyaan dan saran silahkan tinggalkan di kolom komentar. Selamat mencoba!