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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/s1600/stylishtutorial.gif);}
    .preload2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/s1600/stylishtutorial.gif);}
    #nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/s1600/stylishtutorial.gif) no-repeat right top;}
    #nav li:hover a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/s1600/stylishtutorial.gif) no-repeat;}
    #nav li:hover a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/s1600/stylishtutorial.gif) no-repeat right top;}
    #nav li:hover a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKmb_7-FDfQeD41N5UcNWLzXy555vr2rOGSlS_Fa3sFnMpFOgEmbjWVdJGLszH5-9cJ0RprUhTbdqUnYjsSDAqP2tuY9vii40lW3xh-I8C43YsrOeQtxbe2-EnIYUTbn0NcTwZ_jhnHk/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...
    author

    Artikel ini ditulis oleh:

    Amycozzzo - Blog yang penuh dengan tutorial Stylishtutorial.

    Seorang yang suka membuat tutorial apa yang dia tau. Follow dia untuk tau lebih lanjut Twitter or email me

    Posted by Borong Shop on Thursday, June 9, 2011 at 7:48 AM
    Labels: ,

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)
     
    Copyright (c) 2010 Stylish Tutorial by Secret Profile
    Any FAQ ? : Contact Me| Forum| About Me