rozikin blog

Berbagi Pengalaman Online

» » » » Memasang Menu Navigasi Keren Pada Blog

Friday, November 29, 2013

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkN7eXi_Gpu2k8yps51AF4xedVq5EWWl8bnvRyn2VM4o6bdZ6jqD2NXIXhVh7ASAgxA8zmvFJFiUpvjpyyCuvhywXXI7JsdEHO4AHDwh2AOkGKph3fn8byAZEfbKoiFjn0l1gTtouDqmZ/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.









https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIXjjHzU55bICA6i7aFnNbG_pG1GOAx4He2J7J7rMVM9axbWU1V7uR3kQucz7Nw4jehITW7VSC9AREAxkWd6nEw44vWezpooPghOVtY6VMoexVOSfp6uo_NCcOxBolpmMAKvUYzveveUC/s1600/menu_bg_1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMDXUIBiCjAnWA-h0pfCdtUGJPYzECCarvb1-2AmlkH-XWC3Jb-41MauY0SAOqG0JMicOOHAlimUDetlTPlIEnG06ubHUHX6G0aVSuEkzpkO7XNy7bZHRzO7WBFk-FVMyNnxfiu7GXzcCH/s1600/menu_bg_2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_EIkMxmKIrX6YeJyHWGlqElxSbNS76g_4jcgMfcWWKvb6nKlo_14DB1JGG_r0nbvPpgnMauklfimZTkIg2y58e6EbIaf3GyGEMp8m7_c1W6UQbCghJCD2qW-gh1HJWXcFNAwuIc9xkVq/s1600/menu_bg_3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKyA9SQBdBzQwRgvBEfXjuDJqNNg0MJMjywI21wyEr3-DCm399AcPNTpHhqrvq_pXpcnz6bTTn7ncCFktPMfis9Z0l3005q72gI2FhHDwWAoZsorjKmwer1Da-zcUc-64_zsVmtu-_HHeW/s1600/menu_bg_4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqT5AtO9nPuUQCBxPahmWbCRKP483k-hL8RrbbyvVr6gLYaGLoQAyccPyBovT1YsY-JvDqeMVcrf5J5C_fRskRFtznrZ3Z31ZdEaQrL4N8rgnem_7zIfAzLILkJtfEcPVOVSFxwr0CZPLv/s1600/menu_bg_5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYn_8MhVDGj7POy1KuyKMVKbuoIBUoba1FVoyIxEhRJ4V1OdlL5IBp3s1V5eoN5vIb3nToTL4IK_rGY85PAkcGy_p-I7FMfpEdu4p5VSmbN12_5yU3j_-o7q8vI0R436OIutRt_lzO5Qd/s1600/menu_bg_6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbOPTUD7tRgYta3S_r_xaJQhbwRgWQHA3mS-Nsvn1gnSPqZQF5ekh6p-F8yREiU8-aMxmpWcUb_G-8dWcPVpJP8JIbxeEjqeBUFl6mIGmKAEnU-oT16M2st8RspETH3QsznzLx25Y6Ypd/s1600/menu_bg_7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZrB121V7eyyflqLPKPw_xGUwsKhyvlfEDDMtzS8CWYvqpo2PSIgHssmUwWhs0zRVrYxo8SDkdHn_PbsV7WQ4i69r848nENUBQ-WlA6qb2MLvqaDqTCTTXNAanyStRXVmosy1j7SmUCLt/s1600/menu_bg_8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5v1GT8ZA1JijTsZz5Vt_T4D44QLavhtcsgqX9QTbK49-YTJihYd9VpSglYsx0GMJvzQMgNJJmAd291KalRJphPuW9utPY3OoeaEAlGjIcKVwUu0iVx8jAs17_nISOPuQ8YaTw5nTwUgeY/s1600/menu_bg_9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKNTpA03AZ7bVU59Q6J9Cz_9zhn4BAhcNsDdGTxI5ByPzxj3tpmcp4C87cxewtckKVXemheNyn7bxfgH4wM3_54Q3mPEI9Rtp0b5TJx139KoKV7I2Si7DjiOH4Sr3SwXDIxx8aobj2tBta/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;
Back To Top