Cara Membuat Menu Navigasi Horizontal di Blogger

Cara Membuat Menu Navigasi Horizontal di Blogger - sebenarnya saat ini blogger telah memberikan kemudahan bagi Anda yang ingin membuat menu navigasi horizontal di blog, Anda tinggal menuju ke menu tata letak dan menambahkan menu navigasi horizontal di blog Anda. tetapi kebanyakan pemilik blog tidak akan puas dengan vasilitas yang di sediakan oleh blogger, dan selalu ingin membuat sesuatu dengan karya sendiri. sebab itu kali ini Febbiez memberikan tutorial tentang Cara Membuat Menu Navigasi Horizontal di Blogger dengan menggunakan kode script yang nantinya bisa Anda edit sesuka hati.

perhatikan langkah-langkahnya di bawah ini.
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan → Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk memudahkan mengembalikan template ke kondisi terakhir sebelum diedit jika nanti terjadi kesalahan.
4. Beri tanda centang pada "Expand Template Widget".
5. Cari kode ]]></b:skin>
6. Letakkan kode css di bawah ini di atas kode ]]></b:skin> .

/*Menu Navigasi*/
#menuwrapperpic {background:#2a4375;width:970;margin:0 auto;padding:0 auto;border-bottom:1px solid #1d335d;}
#menuwrapper {width:970px;margin:0 auto;height:20px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:970px;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial','arial';}
#menubar a {display: block;text-decoration: none;padding: 13px 10px 12px 10px;font-size:15px;font-weight:normal;text-transform:none;color:#d1d8e5;border-right:solid 1px #23375F;border-left:solid 1px #36538D;}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhgrOOXxeJrBvFeHUVxFzfCAOk19ynt8X0-uWgFgOP0eLiZ9Xa3dBGhjbadJKsZ5i-T8KVK_hSXqHyfpPhyBaETtPh_nkc2dXe2KaR-hfQPQFPjYIzt0hvIQAV657LV1DK2AbhteB2m5o/s1600/
arrow.gif) ;background-repeat: no-repeat;padding: 13px 24px 12px 10px;background-position: right center;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:160px;}
#menubar ul li a {text-align:left;color:#B7C2D6;padding: 4px 12px;font-size: 12px;font-weight:normal;text-transform:none;font-family:'Trebuchet Ms','Sans Serif';border:none;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#1d335d;padding-bottom:5px;}
#menubar li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#menubar li ul {-moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);filter:alpha(opacity=97);-moz-opacity:.97;opacity:.97;}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#253B61;color:#d1d8e5;text-decoration:none;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color:#d1d8e5;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr {border-bottom:1px solid #384E74; border-top:1px solid #051024; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0; }
#menubar ul a:hover {background-color: #0A1A37!important;color: #d1d8e5 !important;text-decoration:none;}
#menubar li.home a, #menubar li.home a:visited {background:#1d335d;border-left:solid 1px #23375F}
#menubar li.home a:hover {background:#142546;}

7. Selanjutnya klik Tata Letak kemudian Tambah Gadget.
8. Pilih HTML/JavaScript dan masukan kode dibwah ini.

<center>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='current_page_item'><a href='/'>Home</a></li>
<li><a class='trigger'> Nama Menu </a>
<ul>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='URL'> Nama Menu </a></li>
</ul>
<li><a class='trigger'> Nama Menu </a>
<ul>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='URL'> Nama Menu </a></li></ul></li>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='http://www.febbiez.com' title='Free Download Software Full Version Patch Serial Key Gratis'> www.febbiez.com </a></li>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='URL'> Nama Menu </a></li>
<li><a href='URL'> Nama Menu </a></li>
</li></ul></div>
<div style='clear: both;'></div>
</div>
<div id='nav-element-bottom'></div></center>

9. Simpan dan lihat hasilnya.

NB:
ganti text berwarna merah muda dengan urh yang Anda inginkan.
ganti text berwarna hijau dengan nama menu menurut URL di depannya.

itulah langkah-langkah Cara Membuat Menu Navigasi Horizontal di Blogger, apabila ada yang belum bisa di pahami silahkan bertanya di kotak komentar, terima kasih dan semoga bermanfaat.