Cara Membuat menu horizontal dan Search box


Tutorialnya :
  • Pada dashboard Pilih Template
  • Klik Edit HTML
  • Cari kode ]]></b:skin> (Tekan tombol F3 untuk mempermudah pencarian)
  • Copy Paste script Dibawah ini dan Letakkan tepat Diatas Kode ]]></b:skin>

    /************************************************************************/
    /* Menu horizontal multi level & search box
    /* (C)2010 Update by Dido Borneo
    /* visit http://dido-borneo.blogspot.com to get more Widget Collection /************************************************************************/
    #NavbarMenu {
    width: 960px;
    height: 35px;
    background:#000147 url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/navbar3copy_zps1802505d.jpg) repeat-x top;
    color: #000147;
    margin: 0 auto 0;
    padding: 0;
    font: bold 11px Arial, Tahoma, Verdana;
    border-top: 1px solid #AFAFAF;
    border-bottom: 1px solid #FFFFFF;
    }
    #NavbarMenuleft {
    width: 960px;
    float: left;
    margin: 0;
    padding: 0;
    }
    #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 {
    color: #FFE600;
    display: block;
    text-transform: capitalize;
    margin: 0;
    padding: 9px 15px 8px;
    font: normal 15px Georgia, Times New Roman;
    }
    #nav li a:hover, #nav li a:active {
    background:#0400FF;
    color: #36731b;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #6A00FF url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/navbar3copy_zps1802505d.jpg) repeat-x top;
    width: 200px;
    color: #FFDD00;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #99C9FF;
    border-left: 1px solid #99C9FF;
    border-right: 1px solid #99C9FF;
    font: normal 14px Georgia, Times New Roman;
    }

    #nav li li a:hover, #nav li li a:active {
    background: #e3f1ce;
    color: #156018;
    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;
    }
    #search{width:210px;font-size:11px;float:right;margin:0;padding:0}
    #searchform{overflow:hidden;display:inline;margin:0;padding:0}
    #searchbox{background:#ddd;margin:0;padding:0}
    #search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}
    #search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
  • Kemudian Cari Kode yang Mirip Dengan kode dibawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>
  • Copy Paste Kode Dibawah ini dan Letakkan Tepat Diatasnya

    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'>
    <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl' title=''>Home</a></li>
    <li><a href='#'>Baju</a>
    <ul>
    <li><a href='Alamat URL'>Baju Hitam</a></li>
    <li><a href='Alamat URL'>Baju Putih</a></li>
    <li><a href='Alamat URL'>Baju Merah</a></li>
    </ul></li>
    <li><a href='#'>Sandal dan Sepatu</a>
    <ul>
    <li><a href='#'>Sandal</a>
    <ul>
    <li><a href='Alamat URL'>Sandal Baru</a></li>
    <li><a href='Alamat URL'>Sandal Rusak</a></li>
    </ul></li>
    <li><a href='#'>Sepatu</a>
    <ul>
    <li><a href='#'>Sepatu Hitam</a>
    <ul>
    <li><a href='Alamat URL'>Sepatu Hitam Baru</a></li>
    <li><a href='Alamat URL'>Sepatu Hitam Rusak</a></li>
    <li><a href='Alamat URL'>Sepatu Hitam Curian</a></li>
    </ul></li>
    <li><a href='#'>Sepatu Putih</a>
    <ul>
    <li><a href='Alamat URL'>Sepatu Putih Baru</a></li>
    <li><a href='Alamat URL'>Sepatu Putih Rusak</a></li>
    <li><a href='Alamat URL'>Sepatu Putih Curian</a></li>
    </ul></li>
    </ul></li>
    </ul></li>
    <li><a href='Alamat URL'>Tas</a></li>
    <li><a href='Alamat URL'>Topi</a></li>
    </ul>
    <div id='search'>
    <form action='Masukkan Url Blog Sobat Disini/search' id='searchform' method='get' style='display:inline;'>
    <input id='searchbox' maxlength='160' 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://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/search_zps3a61a7ca.png' type='image' value='Go'/>
    </form>
    </div>
    </div>
    </div>
Keterangan :
Alamat URL (Alamat URL Tujuan Sobat)
Ganti Judul yang berwarna Hijau dengan Judul kreasi sobat Sendiri



Comments
0 Comments