Horizontal Menu Rounded Version

Menjawab request dari beberapa sobat blogger,kali ini kita akan membahas mengenai cara membuat navigasi rounded yang dapat anda lihat pada bawah header blog ini.Berhubung dalam template asli blog ini,saya menggunakan google adsense search sebagai search engine.. Maka untuk berjaga-jaga bila ada sobat-sobat yang tidak mempunyai account google adsense,menu search pada navigasi yang akan saya bagikan kali ini telah saya modifikasi sedikit agar bisa di pakai oleh semua sobat-sobat blogger.Berikut adalah tampilan hasil modifikasi tersebut.

Ingin mencoba membuatnya di blog anda ?,Sok atuh.. di lanjutin bacanya Winking

1. Login terlebih dahulu ke account blogger anda.
2. Pilih TATA LETAK –> EDIT HTML.
(Simpan dulu template anda dengan cara mengklik link Download template lengkap.Untuk Berjaga-jaga apabila terjadi kesalahan dalam pemasangan script)
3. Tambahkan kode di bawah ini diatas kode #outer-wrapper {

#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;
}

Nb: Anda dapat mengganti text “http://Alamat link background” dengan Link gambar anda sendiri.Atau dengan beberapa alternatif warna dari saya.

Warna biru :
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-3.png

Warna orange :
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-orange-ok.png

Warna hijau:
http://i730.photobucket.com/albums/ww306/gozhilaq/Navbar-hijau.png
Kemudian jangan lupa untuk mengganti text “http://Alamat link hover background” dengan link gambar anda sendiri.Atau dengan warna yang telah saya siapkan.*Hover background adalah perubahan warna background saat menu di sorot oleh mouse*

Hover untuk warna biru:
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-hover.png

Hover untuk warna orange:
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-orange-hover-ok.png

Hover untuk warna hijau:
http://i730.photobucket.com/albums/ww306/gozhilaq/Navbar-hijau-hover.png
4. carilah kode :

<div id='content-wrapper'>

5. Letakkan kode di bawah ini tepat diatas 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'>
      <form action='/demo/church/index.php' id='searchform' method='get'> <input id='searchbox' name='s' onblur='if (this.value == '') {this.value = 'Search this website...';}' onfocus='if (this.value == 'Search this website...') {this.value = '';}' type='text' value='Search this website...'/> <input id='searchbutton' type='submit' value='GO'/></form>
    </div>
</div>

6. Selesai deh.. sekarang anda tinggal mengganti text ‘#’ dengan ‘Alamat link yang anda ingin pasang’.
7. Selanjutnya,ganti text berwarna hijau dengan judul dari link anda tersebut.
contoh:

<li><a href=’http://anggaleoputra.blogspot.com>Info Gaul</a></li>

8. Akhir kata,selamat berkreasi dengan menu ini.. Happy Blogging Winking

Blogger Abstrak

Kategori Yang Kalian Suka

Paling banyak dibaca minggu ini

Post ini diterbitkan pada : Wednesday, March 18, 2009

Horizontal Menu Rounded Version

Artikel Terkait

5 comments:

My Tweet

Followers

Social Network

Labels