Tutorial Membuat Menu Navigasi di Blog dengan Kode Javascript

Oleh Diposting pada

Cara mudah membuat Menu Navigasi di Blog – Salam buat sahabat punakawanku, postingan saya kali ini akan membahas tentang Cara mudah membuat menu navigasi di blog. Apa itu Menu Navigasi? Menu navigasi merupakan bagian penting yang harus ada di blog sahabat semua, saking pentingnya biasanya Menu navigasi ini akan di letakkan tepat di bawah Header Blog. Contohnya seperti gambar ini :

Tutorial Membuat Menu Navigasi di Blog dengan Kode Javascript
Menu Navigasi blog PUNAKAWANKU

Sebenarnya apa aja sih fungsi dari Menu Navigasi ini? Kalau untuk fungsi jangan ditanyakan lagi, Menu Navigasi ini akan sangat membantu pengunjung blog untuk lebih tau lebih banyak lagi tentang artikel yang ada pada blog kita. Biasanya pada menu Navigasi ini berisi link yang menuju halaman posting, halaman statis, halaman label maupun ke web lain. Untuk Menu Navigasi yang saya pasang memang sengaja saya kasih menu About, Sitemap, Contact Us, Privacy Policy, dan Disclimer. Untuk memudahkan pengunjung melihat semua isi postingan di Blog, Pengunjung cukup menekan Menu Sitemap. 

Baca juga : Cara Membuat Sitemap/Daftar isi di Blog

Untuk para blogger pemula seperti saya ini, kebanyakan berfikiran kalau membuat Menu Navigasi itu sedikit lebih sulit. Akan tetapi, dengan Tutorial Mebuat Menu Navigasi yang saya berikan ini semoga saja lebih mudah dari yang selama ini kita bayangkan. Cara kali ini kita tidak perlu melakukan editing pada HTML. Jadi bagi blogger pemula yang belum mengetahui Cara Editing HTML yang memang membutuhkan ketelitian, cara kali ini cukup dengan menambahkan widget HTML/Javascript di bagian tata letak blog.

Langsung saja ke langkah-langkah Tutorial Membuat Menu Navigasi di Blog :

  1. Silahkan masuk ke Dashboard Blogger anda.
  2. Pilih Layout atau Tata Letak
  3. Pilih Tambahkan Gadget
  4. Silahkan cari HTML/Javascript ,jika sudah ketemu klik untuk menambahkan. sehingga akan muncul seperti ini :
Tutorial Membuat Menu Navigasi di Blog dengan Kode Javascript
Biarkan judul kosong, untuk konten silahkan copy kode Menu Navigasi di bawah ini :
<style>


#tab_menu {
    background:url(http://3.bp.blogspot.com/-OycpSljNY-E/UbidzWvOk4I/AAAAAAAACYs/lGxPWmjfzlA/s1600/menu_bg.png) no-repeat;
    height:50px;
    width:960px;
    line-height:50px;
    list-style:none;
    margin-top:10px;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bold;
    overflow:hidden;
}


#tab_menu li {
    float:left;
    border-right:1px solid #FFA722;
    border-left:1px solid #CC5200;
}


#tab_menu li:first-child {
    border-left:none;
}


#tab_menu li:last-child {
    border-right:none;
}


#tab_menu li a{
    text-decoration:none;
    float:left;
    display:block;
    height:50px;
    padding:0 20px;
    color:#FFF;
}


#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
    color:#622900;
    text-shadow:1px 1px 0px #E8964B;
}


#tab_menu li a.tool{
    color:#000;
    text-shadow:1px 1px 0px #E8964B;
}


</style>




<ul id=’tab_menu’>
<li ><a href=’#’>Home</a></li>
<li ><a href=’#’>Sitemap</a></li>
<li ><a href=’#’>Contact Us</a></li>
<li ><a href=’#’>Privaci Policy</a></li>
<li ><a href=’#’>Disclaimer</a></li>
</ul>
Untuk Tulisan yang berwarna Biru di atas merupakan kode untuk warna menu Navigasi blog. Sedangkan tanda #, silahkan di ganti dengan URL halaman tujuan anda.
Setelah selesai silahkan klik SIMPAN.

Jika anda tidak suka dengan warna Menu Navigasi Biru seperti di Blog Punakawanku, di bawah ini saya berikan kode warna agar anda bisa memilih warna Menu Navigasi sesuai selera. Caranya cukup mudah, silahkan ganti kode yang berwarna Biru di atas dengan kode warna di bawah ini :

http://3.bp.blogspot.com/-f3ORap0IbMI/UcQLTr-sN1I/AAAAAAAACjA/lLak8xIEoxA/s1600/menu_bg_1.png

http://1.bp.blogspot.com/-_P9c5moKK7o/UcQLUc9rF1I/AAAAAAAACjU/anVA6KuWp9U/s1600/menu_bg_3.png

http://3.bp.blogspot.com/-4ccU3i0MrDs/UcQLVRHIlqI/AAAAAAAACjw/XnIWQ_dTVuc/s1600/menu_bg_6.png

http://3.bp.blogspot.com/-eKVpgd7fjkA/UcQLUgO_EAI/AAAAAAAACjY/NfsBYjPXyhQ/s1600/menu_bg_5.png

http://3.bp.blogspot.com/-I5ddZuLgrJw/UcQLTjhTmAI/AAAAAAAACjI/Yb3yhgPRIBI/s1600/menu_bg_2.png

Sangat mudahkan!hehehehe. sekarang di Blog anda sudah terpasang Menu Navigasi, semoga pengujung blog sobat bisa lebih mudah dalam mengetahui semua Isi blog sobat.
Sekian Tutorial Membuat Menu Navigasi di Blog dari saya. Semoga bermanfaat untuk sobat. Silahkan tinggalkan komentar sobat jika artikel ini membantu. Sampai jumpa di postingan berikutnya:)

Artikel menarik lainnya...

6 thoughts on “Tutorial Membuat Menu Navigasi di Blog dengan Kode Javascript”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.