Membuat Horizontal Menu Dropdown (Versi www.deddycamp.com)

07.19  Mr Ghoz  3 comments

Membuat Horizontal Menu Dropdown, pada posting sebelumnya saya telah membahas Tentang Artikel ini. Namun setelah shufi jalan2 ke http://www.deddycamp.com. sya bertanya kepada beliau bagaimna membuat menu horizontal drop down sepeti milik beliau. setelah agan deddy memosting menu horizontal drop down versi 2 nya, shufi pun langsung mencobanya, hasilnya seperi di header shufi or sepeti Picture di samping




1. Silahkan Login Blogger

2. Langsung menuju Edit HTML

3. Jangan lupa Backup Template anda terlebih dahulu

4. Contreng Expand Widget Template

5. Cari kode ]]></b:skin> dan letakkan kode berikut sebelum kode ]]></b:skin>



    #NavbarMenu {
    background:#1d1313 url(http://lh6.ggpht.com/_pt7i0nbIOCY/SeBPD1yqObI/AAAAAAAABt4/NG52XwhwAHQ/bgnav_thumb%5B1%5D.png) repeat-x center;
    width: 960px;
    height: 35px;
    color: $navcolor;
    margin: 0 auto;
    padding: 0;
    font: bold 8px Trebuchet MS;
    }

    #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: 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: $navcolor;
    display: block;
    text-transform: uppercase;
    margin: 0;
    padding: 9px 15px 8px;
    font: bold 11px Trebuchet MS;
    border-right:1px solid #000;
    }

    #nav li a:hover, #nav li a:active {
    background:#000 url(http://lh6.ggpht.com/_pt7i0nbIOCY/SeBSfNbxQ_I/AAAAAAAABuA/lQToFnYZHKI/navhover_thumb%5B1%5D.png) repeat-x;
    color: #e6e1e1;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }

    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background:#000;
    width: 150px;
    color: #fff;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    font: normal 13px Trebuchet MS;
    }

    #nav li li a:hover, #nav li li a:active {
    color: #e0dbdb;
    padding: 7px 10px;
    background:#5c5858;
    }

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

    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding:10px;
    background:#000;
    border-bottom:3px solid #C30606;
    }

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

    #nav li ul ul {
    margin: -32px 0 0 171px;
    padding:10px;
    background:#000;
    border-bottom:3px solid #C30606;
    }

    #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 {
    padding:0;
    margin:0;
    }

    #search input{
    background: transparent;
    color: #fff;
    float: left;
    font-size: 12px;
    margin: 7px 0 0 10px;
    width: 178px;
    padding:3px 7px;
    border: 1px solid #605151;
    font: normal 10px arial, verdana, Times New Roman;
    }

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




Catatan:

Warna biru Gambar Background Horizontal Menu Dropdown
width: 960px; Pengaturan Lebar, Silahkan anda sesuaikan dengan template anda.




6. Kemudian Cari Kode seperti ini <body>  dan Letakkan Kode berikut Setelah kode <body>

Kalau gak ada kode <body>
Anda Cari kode </header> dan letakkan kode berikut Setelah kode </header>

    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'>
    <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl&#039;>Home</a></li>
    <li>
    <a href='http://www.deddycamp.com/search/label/PTC&#039;>PTC</a>
    <ul>
    <li><a href='http://www.deddycamp.com/search/label/PTC%20Indonesia'>PTC Indonesia</a></li>
    <li><a href='http://www.deddycamp.com/search/label/PTC%20Internasional'>PTC Internasional</a></li>
    </ul>
    </li>
    <li><a href='http://www.baris-iklan4u.co.cc' target='new'>Free Advertise</a></li>

    <li><a href='http://www.deddycamp.com/2010/07/banner-exchange-yuk.html'>Banner Exchange</a></li>

    <li><a href=&#039;#'>About Me</a>
    <ul>

    <li><a href=&#039;#'>My Profile</a></li>

    </ul>
    </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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnH5v68P4RkbwNsSpxqXaYx6piEC1UBgtGTvIhyphenhyphenB1zxa19o5iyAUVvCSg526HX7Fz3_t401pI8oed3K7dtzXrsuXPj-EZnXLLCts1eeUAlATPrHImBcOar1G6Nmil6V_Z0tmWfD6aTpfQ/?imgmax=800' type='image' value='Go'/>


    </form>


    </div></div>


Catatan:

Tulisan yang berwarna merah, adalah Link/alamat/URL halaman yang dituju, ganti dengan Link milik anda.
Tulisan yang Berwarna biru adalah Judul atau Nama dari Link tersebut, silahkan ganti dengan milik anda.

7. Simpan Template anda, dan Lihat Hasilnnya.

Selamat Mencoba DAN Semoga berhasil, AMIN.......!!!!


Thank's So Much buat Agan Deddy.
NB : Buat Shobat Shufi Yang Bernama Novi,
        Untuk Mengubah Warna text silakan cari kode ini color: $navcolor;,
         Dan Ganti Kode $navcolor  Dengan kode warna yang anda inginkan.
         Karna kodenya da dua, So ganti kedua-dua nya,
         Untuk kode warna HTML Silhakan Klik DISINI


Source : http://www.deddycamp.com/2010/08/membuat-horizontal-menu-dropdown-versi.html







Posted in:

3 komentar:

bro, udah ane praktekin 'n berhasil....
thank's banget...ya, barakallahu fiik...

cuman ane nggak ngerti gmn cara tukar kode warnanya....udah ane coba hasilnya malah kabur tuh.... coba lihat http://effendinovi.blogspot.com/
tlg in ya bro....!!

bro,..
warna tuk tulisan menunya nggak jelas tuh....
gmn cara tukarnya, soalnya dah diset ya....??

udah bro,...
thank's banget ya....
bisa belajar ngeblog...

Posting Komentar

=> TingGalKan JejAk AnDa DI BawAh niCh <=