Membuat menu Horisontal (1)

1. Login
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 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..

Membuat menu Horisontal (1)

0 komentar: