Memasang Menu Navigasi Keren Pada Blog

Memasang Menu Navigasi Keren Pada Blog
Sebuah bar navigasi atau menu bar adalah penting untuk sebuah blog. Selain berfungsi untuk mempermudah pengunjung, menu navigasi juga dapat memperindah tampilan sebuah blog. Cara membuat tab navigasi tidaklah terlalu sulit.

Dalam tutorial ini akan di jelaskan bagaimana cara memasang menu yang sangat keren untuk blog Anda. Posisi menu navigasi ini akan berada tepat di bawah header, adalah posisi yang khas untuk sebuah bar navigasi. Cara menambahkan menu navigasi ini dilakukan dengan menggunakan pilihan gadget melalui halaman tata letak.

Dengan menggunakan menu gadget ini tentunya akan memudahkan ketika Anda ingin menghapusnya nanti, tidak perlu repot-repot halaman HTML untuk mengedit nya. Untuk membuat menu navigasi ini blog harus memiliki Add A Gadget Link thingy atau wadah widget di lokasi tertentu. Dan berikut ini tutorial belajar bagaimana membuat Elemen tepat di bawah header.

Add It To Blogger

1. Masuk ke Blogger Dashboard >> Layout >> dan klik add a gadget (lihat screen shot di bawah)


2. Klik Add A Gadget link di bawah header.
3. Pilih add HTML/JavaScript.
4. Biarkan title nya kosong.
5. Copy dan paste kode HTML di bawah ini ke dalam widget.

<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='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

6. Replace “#” dengan URL yang ingin di masukan ke dalam menu.
7. Untuk merubah lebar nya silahkan edit kode ini "width: 960px"
Berikut ini beberapa background untuk menu navigasi yang mungkin dapat Anda sesuaikan dengan warna blog yang Anda miliki.









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

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

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

http://3.bp.blogspot.com/-OB85xAfJPfI/UcQLUnbbJGI/AAAAAAAACjg/yWWiaCSgjdk/s1600/menu_bg_4.png

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

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

http://3.bp.blogspot.com/-9i_l3hRT6Y0/UcQLVcvpW0I/AAAAAAAACjs/ZOW6CjQRff0/s1600/menu_bg_7.png

http://3.bp.blogspot.com/-QX3hor6qsBI/UcQLVm-rJbI/AAAAAAAACj0/rDVtHMvgfoY/s1600/menu_bg_8.png

http://2.bp.blogspot.com/-a2i-Vuheci4/UcQLWEpqL3I/AAAAAAAACkE/mdbH_irg_a8/s1600/menu_bg_9.png

http://4.bp.blogspot.com/-wLdR4j6FmPE/UcQLTjvxQ2I/AAAAAAAACjE/Ao5IPiehxtE/s1600/menu_bg_10.png


Cari kode URL ini untuk menggantinya dengan kode URL yang ada di atas sesuai dengan selera Anda
background:url(http://3.bp.blogspot.com/-OycpSljNYE/UbidzWvOk4I/AAAAAAAACYs/lGxPWmjfzlA/s1600/menu_bg.png) no-repeat;

9 Responses to "Memasang Menu Navigasi Keren Pada Blog"

  1. aku amankan di Dreamweaver dulu sob barang kali besok butuh...

    ReplyDelete
  2. keren bos Roz, harus di coba neh.
    Tapi di blog yg mana ya......

    ReplyDelete
    Replies
    1. Blog yang motifasi forex itu bang keren pasti kalo disana

      Delete
  3. Mantap sob..!! (y)
    Met Malemmingguan sob. :D hehehe.. :D

    ReplyDelete
    Replies
    1. Hihihihi oke sob mantep juga ya buat sobat hehe

      Delete
  4. Menu navigasi keren, Sob. Terima kasih sharenya...

    ReplyDelete
    Replies
    1. Iyah bang, abang juga keren deh, iyah sama sama ya bang

      Delete

Jika Anda menanyakan sesuatu pastikan beri centang pada kotak "Notify Me" di bawah komentar agar dapat segera mengetahui balasan dari admin.