Saturday, 2 April 2016

Cara Membuat Menu Navigasi di Blog

Menu navigasi sangat di perlukan di sebuah blog/situs, menu navigasi berfungsi agar memudahkan para pengunjung dalam menjelajahi blog kita. Jika bagi para blogger handal membuat menu navigasi sangatlah mudah sekali, namun lain halnya dengan blogger pemula, mereka yang belum tahu cara membuat menu navigasi merasakan bingung, bagaimanakah membuat menu navigasi di blog.
Contoh Menu Navigasi


Ok, berhubung dengan itu maka saya akan membagikan tips bagaimana Cara Membuat Menu Navigasi di Blog. Membuat menu navigasi tidaklah sulit, ada dua cara pembuatan navigasi yaitu:
  1. Menggunakan menu navigasi bawaan blogger
  2. Menggunakan menu navigasi buatan html

Sekarang mari simak satu-satu.

1. Menggunakan Menu Navigasi Bawaan Blogger

Ini merupakan menu navigasi yang mudah membuatnya, menu navigasi ini mempunyai tampilan simple dan sederhana, namun walaupun simple menu navigasi ini banyak orang yang menggunakannya, cara untuk membuat menu navigasi bawaan blogger adalah:
  • Silahkan Anda login terlebih dahulu ke blogger milik Anda, setelah itu klik Tata Letak
  • Setelah itu tampilan akan seperti ini dan Anda klik Tambahkan Gadget pada crosscol
  • Kemudian Anda klik Laman dan akan muncul tampilan seperti ini

Nah, untuk menambahkan laman lagi, Anda klik Tambahkan Tautan Eksternal ditampilan tersebut ada kolom url yang akan mengarah kemana tujuan laman yang di klik nanti, Anda isi dengan url label pada blog setelah selesai lalu klik simpan.

2. Menggunakan menu navigasi buatan html

Menu navigasi ini lebih keren secara tampilan karena dapat diatur dengan kemauan sendiri.
Untuk cara yang kedua ini berbeda dengan cara yang pertama, ini cukup rumit karena Anda diharuskan menambahkan kode pada html blog Anda. Berikut langkah-langkahnya:
  • Anda buka blogger >> Blog Anda >> Template >> Edit Template. 
  • Cari kode ]]></b:skin> Anda bisa mencari kode tersebut dengan menekan CTRL+F, masukan kode dibawah ini diatas kode tersebut
Untuk kode menu navigasinya saya sediakan dibawah:
/*Top Menu*/
#top{margin:auto;padding: 0;width: 950px;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}
Keterangan:
Silahkan ganti width: 950px sesuai lebar navigasi yang Anda inginkan
Silahkan ganti kode warna background:#eeeded sesuai yang Anda inginkan.
Silahkan ganti warna tulisan color:#222 jika Anda inginkan.
  • Selanjutnya Anda cari kode </head> atau <body> dan masukan kode dibawah ini tepat dibawah kode </head> atau <body>
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='URL blog/' title='Top Menu'>Top Menu</a></li>
<li><a href='URL blog/' title='Contact'>Contact</a></li>
<li><a href='URL blog/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='URL blog/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='URL blog/' title='Facebook'>Facebook</a></li>
<li><a href='URL blog/' title='Twitter'>Twitter</a></li>
<li><a href='URL blog/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

 Keterangan:
Silahkan ganti URL blog  dengan alamat yang Anda inginkan dan ganti Top Menu dengan judul menu navigasi yang Anda inginkan.

 Diantara 2 cara diatas silahkan Anda pilih yang mana menurut Anda yang cocok dengan blog Anda.
Sekian dan terimakasih, semoga bermanfaat!
  • 0Blogger Comment
  • Facebook Comment

Leave your comment

Post a Comment