Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett
  • Sabtu, 16 April 2011

    HOME , , Menu Horizontal Drop Down (menu bercabang)

    Menu Horizontal Drop Down (menu bercabang)



    Salam persahabatan, trik blogger kali ini share tentang menu horizontal drop down untuk blogger pemula yang ingin memasang menu horizontal dan juga sekedar untuk koleksi menu horizontal.


    Untuk lebih jelasnya sobat bisa lihat demonya dengan mengklik tombol di bawah ini

    Lihat Demo


    Langsung saja kita ikuti tutorial berikut ini :

    Masuk ke Blogger

    Pilih Design >> Edit HTML

    Cari kode  ]]></b:skin>

    Copy dan pastekan kode script di bawah ini tepat di atas kode tadi


    #trikbloggermenucontainer{height:37px;display:block;padding:0 0 0 0;font:12px Arial,Tahoma,Century gothic,verdana,sans-serif;font-weight:normal;background:#191917;border-bottom:1px solid #3d3d3d}
    #trikbloggermenu{margin:0 auto;padding:0 0;height:37px;overflow:hidden;width:1000px}
    #trikbloggermenu ul{float:left;list-style:none;margin:0;padding:0 10px}
    #trikbloggermenu li{float:left;list-style:none;margin:0;padding:0}
    #trikbloggermenu li a,#trikbloggermenu li a:link,#trikbloggermenu li a:visited{color:#999;display:block;margin:0;padding:0 10px;line-height:37px}
    #trikbloggermenu li a:hover,#trikbloggermenu li a:active{color:#fff;margin:0;padding:0 10px;line-height:37px;text-decoration:none}
    #trikbloggermenu li.current_page_item a{background:#034E9D;color:#fff}
    #trikbloggermenu li li a,#trikbloggermenu li li a:link,#trikbloggermenu li li a:visited{background:#363737;width:150px;color:#bebebe;float:none;margin:0;padding:0 10px;font-weight:normal;line-height:30px;border-bottom:1px solid #212121}
    #trikbloggermenu li li a:hover,#trikbloggermenu li li a:active{background:#4a4a4a;color:#fff;padding:0 10px;line-height:30px;border-left:none;border-right:none;border-bottom:1px solid #212121}
    #trikbloggermenu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:5px;background:#1C1C1C}
    #trikbloggermenu li li{}
    #trikbloggermenu li ul a{width:140px}
    #trikbloggermenu li ul a:hover,#trikbloggermenu li ul a:active{}
    #trikbloggermenu li ul ul{margin:-36px 0 0 170px}
    #trikbloggermenu li:hover ul ul,#trikbloggermenu li:hover ul ul ul,#trikbloggermenu li.sfhover1 ul ul,#trikbloggermenu li.sfhover1 ul ul ul{left:-999em}
    #trikbloggermenu li:hover ul,#trikbloggermenu li li:hover ul,#trikbloggermenu li li li:hover ul,#trikbloggermenu li.sfhover ul,#trikbloggermenu li li.sfhover1 ul,#trikbloggermenu li li li.sfhover1 ul{left:auto}
    #trikbloggermenu li:hover,#trikbloggermenu li.sfhover1{position:static}
    Setelah itu cari kode <div id='main-wrapper'>


    Copas kode di bawah ini tepat di atas kode tadi



    <div id='trikbloggermenucontainer'>
    <div id='trikbloggermenu'>

    <ul>

    <li class='current_page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-1c</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2c</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-2d</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-3c</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-4</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5b</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5c</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-5d</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-6</a>
    <ul class='children'>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-6a</a></li>
    <li><a href='Your-Link-Here' title='Link-Title'>Menu-6b</a></li>
    </ul>
    </li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-7</a></li>

    <li><a href='Your-Link-Here' title='Link-Title'>Menu-8</a></li>


    </ul>

    </div>
    </div>
    Kemudian simpan template sobat dan lihat hasilnya

    Selamat mencoba semoga berhasil dan salam blogger !!!


    Artikel Terkait

    1 komentar:

    Anonim mengatakan...

    Thanks for the sharing...
    nice post

    Posting Komentar