Cara membuat Menu horizontal Rounded version

Langsung saja kita coba :
1. Login ke blogger
2. Masuk ke menu Rancangan - edit Html - centang Expandwidget.
Sebelum kita membuat menu ini sebaiknya backup dulu dengan cara download template lengkap untuk menjaga apabila nanti ada kesalahan atau kegagalan dalam penginstalan.
3. Cari kode #outer-wrapper {
Tambahkan kode di bawah ini di atas kode tersebut

#NavbarMenu {
    background: #ffffff ;
    width: 680px; /*samakan kode ini dgn lebar outer wrapper anda*/
    height: 35px;
    font-size: 13px;
    font-family: Arial, Tahoma, Verdana;
    color: #fff;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}
#NavbarMenuleft {
    width: 400px; /*Lebar menu sebelah kiri*/
    float: left;
    margin-top: 3px;
    padding: 0;
}
#NavbarMenuright {
    background:#ff7604 url(http://Alamat link background);
    width: 260px; /*lebar menu search sebelah kanan*/
    font-size: 11px;
    float: right;
    margin: 0px;
    padding-left: 3px;
        padding-right: 0px;
        padding-top: 3px;
        padding-bottom: 3px;
        border:2px solid #ffffff;
        -moz-border-radius-topleft:15px;
        -moz-border-radius-topright:15px;
        -moz-border-radius-bottomleft:15px;
        -moz-border-radius-bottomright:15px;
}
#nav {
    margin: 0;
    padding: 0;
}
#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 {
        background: #ff7604 url(http://Alamat link background);
    color: #ffffff;
    display: block;
    font-size: 14px;
    font-family: trebuchet ms, Times New Roman;
    font-weight: bold;
    text-transform: none;
    margin: 0;
        padding-top:6px;
        padding-bottom:5px;
        padding-left:13px;
        padding-right:13px;
        border: 2px solid #ffffff;
        -moz-border-radius-topleft:15px;
        -moz-border-radius-topright:15px;
        -moz-border-radius-bottomleft:15px;
        -moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active {
    background: #ff7604 url(http://Alamat link hover background);
    color: #ffffff;
    margin: 0;
    padding-top:6px;
        padding-bottom:5px;
        padding-left:13px;
        padding-right:13px;
    text-decoration: none;
        -moz-border-radius-topleft:15px;
        -moz-border-radius-topright:15px;
        -moz-border-radius-bottomleft:15px;
        -moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ff7604 url(http://Alamat link background);
    width: 150px;
    color: #ffffff;
    font-size: 14px;
    font-family: trebuchet ms, Times New Roman;
    font-weight: normal;
    text-transform: none;
    float: none;
    margin: 0;
    padding: 7px 10px;
        border: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
    background: #ff7604 url(http://Alamat link hover background);
    color: #ffffff;
    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;
}
#searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
}
#searchbox {
    background: #ffffff !important;
    width: 210px; /*Lebar kolom search*/
    color: #202020;
    font-size: 12px;
    font-family: Trebuchet MS;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 3px 5px;
    border: 2px solid #c0c0c0;
    display: inline;
        -moz-border-radius-topleft: 21px;
        -moz-border-radius-topright: 21px;
        -moz-border-radius-bottomleft: 21px;
        -moz-border-radius-bottomright: 21px;
}
#searchbutton {
        cursor: pointer;
    background: #ffffff;
    color: #FF8000;
    font-size: 11px;
    font-family: Trebuchet MS;
    margin: 0 0 0 5px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border: 2px solid #c0c0c0;
        -moz-border-radius-topleft: 18px;
        -moz-border-radius-topright: 18px;
        -moz-border-radius-bottomleft: 18px;
        -moz-border-radius-bottomright: 18px;
}

 4. Selanjutnya cari kode <div id='content-wrapper'>

 5. Letakan kode di bawah ini tepat di atas kode tersebut :

<div id='NavbarMenu'>
       <div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Sample Page</a>
          <ul>
            <li>
              <a href='#'>Sub Page #1</a>
              <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href='#'>Sample Post</a></li>
        <li><a href='#'>Blog Page</a></li>
      </ul>
    </div>
    <div id='NavbarMenuright'>
      &lt;form action=&#39;/demo/church/index.php&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt; &lt;input id=&#39;searchbox&#39; name=&#39;s&#39; onblur=&#39;if (this.value == &#39;&#39;) {this.value = &#39;Search this website...&#39;;}&#39; onfocus=&#39;if (this.value == &#39;Search this website...&#39;) {this.value = &#39;&#39;;}&#39; type=&#39;text&#39; value=&#39;Search this website...&#39;/&gt; &lt;input id=&#39;searchbutton&#39; type=&#39;submit&#39; value=&#39;GO&#39;/&gt;&lt;/form&gt;
    </div>
  </div>

6. Gantilah kode yang berwarna ‘#’ sesuai dengan ‘Alamat link yang anda ingin pasang’.
7. Selanjutnya,ganti text berwarna hijau dengan judul dari link anda tersebut.
    contoh:

<li><a href=’http://gobelajarmandiri.blogspot.com>Bisnis Internet</a></li>

8. Selesai.. dan lihat hasilnya..


SEMOGA BERMANFAAT

Silahkan Baca Artikel Lainnya juga