Cara Membuat dan Mengedit Menu Navigasi Bawaan Template Pada Blogger

Tutorialkiowaluyo.com merupakan salah satu blog yang membahas mengenai tutorial sederhana baik itu dalam dunia blog maupun dunia microsoft. Nah, sebelumnya saya juga pernah menulis tutorial tentang Cara Mengganti Template Blog Keren & Seo Friendly. Bila Anda belum membacanya, Anda bisa baca postingan saya disini!

Sebenarnya, tutorial kali ini masih sangat berhubungan dengan artikel yang sebelumnya, jadi untuk Anda yang masih kebingungan setelah mengganti template tapi kok kok nama dan link navigasinya gk sesuai sih dengan yang Anda mau ? Anda bisa baca tutorial memperbaikinya disini!

Atau jika di template Anda belum ada menu navigasinya ? disini juga saya akan memberikan solusi atau jalan keluar untuk mengatasi hal tersebut. Karena harus Anda ketahui bahwa salah satu manfaat dari adanya menu navigasi ini yang saya tahu adalah kemudahan untuk mendaftar Adsense. Penjelasnnya mengenai hal tersebut akan saya uraikan di artikel yang selanjutnya.

Nah, disini bagi Anda para blogger pemula seperti saya mungkin ada yang kebingungan seperti apa sih menu navigasi itu ? berikut ini saya berikan gambarnya supaya Anda lebih jelas mengetahuinya. 

Gambar diatas menjelaskan tentang menu navigasi. Sekarang Anda sudah tahu bukan ? Sekarang yang Anda bingung pasti cara membuatnya, betul tidak ? ☺ hhee .... Tapi tenang disini saya punya caranya!

Cara Membuat Menu Navigasi Yang Keren

Ikuti langkah - langkah berikut ini dengan cermat!

1. Pertama Anda log - in dahulu ke blog yang ingin Anda buat Navigasinya.

2. Kedua Anda klik kata "Tema" Lalu klik juga "Edit HTML"

3. Anda cari kode HTML ini "]]></b:skin>" atau ini "</style>" Kemudian pasang kode CSS dibawah ini tepat diatas kode ini "]]></b:skin>" atau ini "</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:#222222;box-shadow:0 4px 0 #E73138 inset}

.nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 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}
"

Kalau Anda masih bingung Anda bisa lihat Gambar dibawah ini!

Isikan CSSnya

Ohh iyah hampir lupa, untuk mencari kode HTML di atas, klik dahulu di kode - kode template Anda lalu Anda tekan CTRL+F.

4. Langkah berikutnya, Anda cari & pasang juga kode HTML berikut ini !

"
<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='masyadi.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>
<li><a href='#'>Sub Menu 3</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='masyadi.com'>Markup</a></li>
<li><a href='masyadi.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>
"

Tepat di bawah kode HTML berikut ini! "</header>"

5. Langkah terakhir adalah Anda Save Template Anda tersebut dan lihat hasilnya!

Cara Mengedit Menu Navigasi Bawaan Template Pada Blog

Setelah Cara diatas Anda lakukan tentunya Anda harus mengedit juga menu navigasinya supaya sesuai dengan apa yang Anda inginkan. Berikut langkah - langkahnya !

Nah, biasanya menu navigasi yang akan ditampilkan nanti di blog Anda adalah seperti Gambar dibawah ini!

Menu Navigasi bawaan download template atau pasang navigasi

Nah, Jika Anda ingin mengeditnya, ikuti cara berikut ini.

1. Anda Cari Kode "Menu 1" pada kode template Anda dengan menekan CTRL+F masukan kata diatas lalu Enter.
2. Ganti Semua kata dan masukan link postingan sesuai dengan kata yang Anda ganti. Sebagai Contoh  Lihat Gambar Dibawah ini !

Cara mengganti nama & link menu navigasi

Yang tanda pagar ganti dengan link artikel Anda, sementara yang menu atau sub menu Anda ganti sesuai yang Anda inginkan.

4. Jika sudah selesai mengganti semua nama dan juga linknya. Anda Save Template Anda dan lihat seperti apa hasilnya.

5. Selamat Mencoba :)