Membuat Menu Horisontal pada Blog

Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab kita bisa membuatnya dengan bantuan kode CSS. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header

1. Login ke akun Blogspot sobat blogger

2. Klik link menu Tata Letak, kemudian pilih Edit HTML.

3. Back up terlebih dahulu template sobat blogger dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, sobat blogger bisa mengembalikannya dengan menguploadnya kembali.

4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget

5. Cari kode </b:skin> ,

6. Tambahkan kode CSS di bawah ini sebelum kode </b:skin> :

/* ----- LINKBAR ----- */

#NavbarMenu{ background:#000
url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800)
repeat-x; width:960px; height:40px; color:#cccccc;
margin:0 auto; padding:0; font: bold 8px Arial, Tahoma, Verdana;}

#NavbarMenuleft{ width:650px; float:left; margin:0; padding:0;}

#search{ width:240px; font-size:11px; float:right; margin:0; padding:0;}

#nav{ margin:0; padding-top:3px;}

#nav ul{ float:left; list-style:none; margin:0; padding:0;}

#nav li{ list-style:none; margin:0; padding:0;}

#nav li a, #nav li a:link, #nav li a:visited{ color:#cccccc; display:block;
text-transform:uppercase; margin:0; padding:9px 15px 8px; font:bold 12px Arial,
Times New Roman;}

#nav li a:hover, #nav li a:active{ background:#6b6a6a; color:#FFF; margin:0;
padding:9px 15px 8px; text-decoration:none;}

#nav li li a, #nav li li a:link, #nav li li a:visited{ background: #6b6a6a;
width:150px; color:#e5e3e3; text-transform:lowercase; float:none; margin:0;
padding:7px 10px; border-bottom:1px solid #151f23; border-left:1px solid
#151f23; border-right:1px solid #151f23; font:normal 14px Georgia, Times New
Roman;}

#nav li li a:hover, #nav li li a:active{ background:#4c4b4b; color:#fff;
padding:7px 10px;}

#nav li{ float:left; padding:0;}

#nav li ul{ z-index:9999; position:absolute; left:-999em; height:auto;
width:170px; margin:0; padding:0;}

#nav li ul a{ width:140px; }

#nav li ul ul{ margin:-32px 0 0 171px;}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul{left:-999em;}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover
ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}

#nav li:hover, #nav li.sfhover{ position:static;}

#searchbox{ padding:0; margin:0;}

#search input{ background:#ffffff; color:#000000; float:left;margin:10px 0 0
10px; width:178px; padding:3px 7px; border:1px solid #484848; font:normal 11px
arial, verdana, Times New Roman; }

#search .btn{ margin:7px 0 0 3px; padding:0; width:auto; border:0; }

Sesuaikan lebar kode CSS yang berwarna merah dalam menu
horizontal tersebut dengan mengganti kode tersebut sesuai dengan lebar template
sobat blogger

7. Setelah itu, cari kode:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Testing templates (Header)'
type='Header'/>

</b:section>

</div>

8. Jika sudah ketemu, silahkan copy kode di bawah ini dan letakkan diatas kode dalam langkah 7

<div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl'>HOME</a></li>

<li><a
href='http://rolandbimo.blogspot.com/search/label/MY%20DIARY'>MY DIARY</a></li>

<li><a
href='http://rolandbimo.blogspot.com/search/label/MY%20PHOTO'>MY PHOTO</a></li>

<li><a
href='http://rolandbimo.blogspot.com/search/label/MY%20PROFILE'>MY PROFILE</a></li>



</ul>

</div>

<div id='search'>

<form action='/search/' id='searchform' method='get' style='display:inline;'>

<input id='searchbox' maxlength='200' name='q' onblur='if (this.value ==
&quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value ==
&quot;Search...&quot;) {this.value = &quot;&quot;}' type='text'
value='Search...'/>

<input class='btn' name=''
src='http://lh5.ggpht.com/_pt7i0nbIOCY/Sm5QQKgWjUI/AAAAAAAACJ0/XS493LrfKqs/search_thumb%5B1%5D.png?imgmax=800'
type='image' value='Go'/>

</form>

</div>

</div>

Ganti kode yang berwarna merah dengan url link pada blog sobat blogger..

9. Klik tombol SIMPAN TEMPLATE.