Membuat Drop Down Menu

Posted on
  • Thursday, June 9, 2011
  • by
  • Borong Shop
  • in
  • Labels: ,
  • Membuat menu horizontal sebenarnya ada banyak alternatif, untuk kali ini kita akan mencuba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih lebih professional


    Langkah Pertama
    Login ke akaun Blogger
    Pergi ke DESIGN => EDIT HTML => EXPAND TEMPLATE WIDGET
    Selepas itu dengan menggunakan ctrl+f atau f3, cari kod ]]></b:skin>


    copy kod di bawah ini dan paste kn sebelum atau di atas kod ]]></b:skin>
    .preload1 {background: url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif);}
    .preload2 {background: url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif);}
    #nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
    #nav li.top {display:block; float:left;}
    #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif);}
    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px;height:35pxpx; background: url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) no-repeat right top;}
    #nav li:hover a.top_link {color:#fff; background: url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) no-repeat;}
    #nav li:hover a.top_link span {background:url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) no-repeat right top;}
    #nav li:hover a.top_link span.down {background:url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) no-repeat right top; padding-bottom:3px;}
    /* Default list styling */
    #nav li:hover {position:relative; z-index:200;}
    #nav li:hover ul.sub
    {left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
    #nav li:hover ul.sub li a
    {display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
    #nav li ul.sub li a.fly
    {background:#50b5d0 url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) 80px 6px no-repeat;}
    #nav li:hover ul.sub li a:hover
    {background:#3f96a9; color:#fff; border-color:#fff;}
    #nav li:hover ul.sub li a.fly:hover
    {background:#3f96a9 url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) 80px 6px no-repeat; color:#fff;}
    #nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
    {background:#3f96a9 url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
    {background:#50b5d0 url(http://2.bp.blogspot.com/-dvSFLkOzOnE/Tf764KDsRrI/AAAAAAAAAKw/o04hPECzksI/s1600/stylishtutorial.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}
    Jika telah siap,klik preview dahulu..jika tiada apa2 error maka klik save template dan teruskan dengan step di bawah pula


    Langkah kedua
    1)Klik Page design
    2)Klik Add  a Gadget dan masukkan kod di bawah
    <span class="preload1"></span>
    <span class="preload2"></span>
    <ul id="nav">
    <li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
    <li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
    <ul class="sub">
    <li><b>Judul1</b></li>
    <li><a href="#" class="fly">Subjudul1</a>
    <ul>
    <li><a href="#" target="_blank">subitem1.1</a></li>
    <li><a href="#" target="_blank">subitem2.1</a></li>
    <li><a href="#" target="_blank">subitem3.1</a></li>
    </ul>
    </li>
    <li><a href="#" class="fly">Subjudul2</a>
    <ul>
    <li><a href="#" target="_blank">subitem1.2</a></li>
    <li><a href="#" target="_blank">subitem2.2</a></li>
    <li><a href="#" target="_blank">subitem3.2</a></li>
    </ul>
    </li>
    <li><a href="#" class="fly">Subjudul3</a>
    <ul>
    <li><a href="#" target="_blank">subitem1.3</a></li>
    <li><a href="#" target="_blank">subitem2.3</a></li>
    <li><a href="#" target="_blank">subitem3.3</a></li>
    <li><b>Subjudul3.1</b></li>
    <li><a href="#">item1.3.1</a></li>
    <li><a href="#">item2.3.1</a></li>
    <li><a href="#">item3.3.1</a></li>
    <li><b>Subjudul3.2</b></li>
    <li><a href="#">item1.3.2</a></li>
    <li><a href="#">item2.3.2</a></li>
    <li><a href="#"&gt;item3.3.2</a></li>
    </ul>
    </li>


    <li><b>Judul2</b></li>
    <li><a href="#" target="_blank">subitem1.2</a></li>
    <li><a href="#" target="_blank">subitem2.2</a></li>
    <li><a href="#" target="_blank">subitem3.2</a></li>
    </ul>


    </li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
    <ul class="sub">
    <li><a href="#" target="_blank">submenu1.2</a></li>
    <li><a href="#" target="_blank">submenu2.2</a></li>
    <li><a href="#" target="_blank">submenu3.2</a></li>
    </ul>
    </li>
    </li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
    <ul class="sub">
    <li><a href="#" target="_blank">submenu1.3</a></li>
    <li><a href="#" target="_blank">submenu2.3</a></li>
    <li><a href="#" target="_blank">submenu3.3</a></li>
    </ul>
    </li>
    </li>
    <li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
    <ul class="sub">
    <li><a href="#" target="_blank">submenu1.4</a></li>
    <li><a href="#" target="_blank">submenu2.4</a></li>
    <li><a href="#" target="_blank">submenu3.4</a></li>
    </ul>
    </li>
    <li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul> 
    Keterangan :
    Warna Merah, Alamat URL yang akan menjadi drop menu(isikan dengan web yg anda inginkan)
    Warna Hijau, tajuk besar bagi menu hadapan(anda cuba ubah dan lihat hasilnya)


    Selamat Mencuba...

    0 comments:

    Post a Comment

     
    Copyright (c) 2010 Stylish Tutorial by Secret Profile
    Any FAQ ? : Contact Me| Forum| About Me