--
0

Membuat Menu Drop Down

 Membuat Menu 
Drop Down


Membuat Menu Drop down mungkin terdengar aneh di telinga kita, memang saya sendiri awalnya tidak tau harus membuat kata kunci apa yang umum di gunakan di Indonesia untuk mencari tutorial sejenis ini. awalnya mau cara pasang halaman li di blogspot, lalu coba cara buat navbar menu lebar ke bawah, dan akhirnya cara membuat halaman menu pada blogspot mudah-mudahan pada nyangkut ke sini hehe.

Seperti apa sih Menu Drop down itu langsung aja liat gambarnya biar saya ga sulit ngejelasinnya



Nah dah ngerti belum? menu dropdown adalah seperti gambar di atas, saat kita arahin kursor mouse salah satu menu di navbar, tiba-tiba mucul panjang kebawah (menu tambahan ke bawah) itulah yang di maksud dengan Dropdown Menu

Bagaimana cara buatnya?

1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML

4. cari kode ]]>
5. Silakan anda copy kode di bawah ini :

Ingat sebelum di acak" mending save dulu template yang lama...!!!

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width: 780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB3guFAiKXsoWndzubWJV0aBEPjOrpHrfcykmNC4jC3odWJ6t65JtQyI4AumOva0AKy74TPK66oFSV5BsIOfWctneK2Fsp5E1QDuIpci75t1dW4V2AFR3sitDw6L4ZxoXZc4mCyXYFkcbi/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
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: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB3guFAiKXsoWndzubWJV0aBEPjOrpHrfcykmNC4jC3odWJ6t65JtQyI4AumOva0AKy74TPK66oFSV5BsIOfWctneK2Fsp5E1QDuIpci75t1dW4V2AFR3sitDw6L4ZxoXZc4mCyXYFkcbi/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
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 15px,;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
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;
}

6. Simpan di atas kode ]]>

catatan :

   1. pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
   2. pada text yang berwarna orange di atas biarkan saja

 7. Setelah itu silakan copy kode berikut ini :
>


8. Simpan di bawah


9. save.




Sehingga hasilnya seperti ini :



]]>












Kode di atas adalah kode yang saya gunakan di salah satu blog saya. dan mungkin akan sedikit berbeda posisinya dengan template anda. namun standarnya seperti contoh di atas. lihat hasilnya disini


keterangan :
1. jika anda ingin menambah dropdown lagi tinggal tambahkan saja kode :




  • Tutorial








    • Catatan :
    Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawaholeh kita. jadi bila nanti anda ingin membuat dropdown tambahan, tambahkan saja kode pada kumpulan kode menu pada no.7

    2. Di atas, saya banyak menuliskan link ke arah blog ini, ganti dengan link yang ingin anda tuju, bisa ke arah blog anda atau orang lain.

    No Response to "Membuat Menu Drop Down"

    Posting Komentar

    Diberdayakan oleh Blogger.

    Kamis, 28 Oktober 2010

    Membuat Menu Drop Down

     Membuat Menu 
    Drop Down


    Membuat Menu Drop down mungkin terdengar aneh di telinga kita, memang saya sendiri awalnya tidak tau harus membuat kata kunci apa yang umum di gunakan di Indonesia untuk mencari tutorial sejenis ini. awalnya mau cara pasang halaman li di blogspot, lalu coba cara buat navbar menu lebar ke bawah, dan akhirnya cara membuat halaman menu pada blogspot mudah-mudahan pada nyangkut ke sini hehe.

    Seperti apa sih Menu Drop down itu langsung aja liat gambarnya biar saya ga sulit ngejelasinnya



    Nah dah ngerti belum? menu dropdown adalah seperti gambar di atas, saat kita arahin kursor mouse salah satu menu di navbar, tiba-tiba mucul panjang kebawah (menu tambahan ke bawah) itulah yang di maksud dengan Dropdown Menu

    Bagaimana cara buatnya?

    1. Login ke Blogger.
    2. Pilih Edit Tamplate
    3. pilih Edit HTML

    4. cari kode ]]>
    5. Silakan anda copy kode di bawah ini :

    Ingat sebelum di acak" mending save dulu template yang lama...!!!

    /* ----- NAVBAR MENU ----- */
    #NavbarMenu {

    width: 780px;
    height: 30px;
    background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB3guFAiKXsoWndzubWJV0aBEPjOrpHrfcykmNC4jC3odWJ6t65JtQyI4AumOva0AKy74TPK66oFSV5BsIOfWctneK2Fsp5E1QDuIpci75t1dW4V2AFR3sitDw6L4ZxoXZc4mCyXYFkcbi/s800/navbar.gif) repeat-x top;
    color: #3D81EE
    margin: 0 auto 0;
    padding: 0;
    font: bold 11px Arial, Tahoma, Verdana;
    border-top: 1px solid #AFAFAF;
    border-bottom: 1px solid #FFFFFF;
    }
    #NavbarMenuleft {
    width: 680px;
    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: #3D81EE;
    display: block;
    text-transform: capitalize;
    margin: 0;
    padding: 9px 15px 8px;
    font: normal 14px ARIAL;
    }
    #nav li a:hover, #nav li a:active {
    background:#99C9FF;
    color: #3D81EE;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB3guFAiKXsoWndzubWJV0aBEPjOrpHrfcykmNC4jC3odWJ6t65JtQyI4AumOva0AKy74TPK66oFSV5BsIOfWctneK2Fsp5E1QDuIpci75t1dW4V2AFR3sitDw6L4ZxoXZc4mCyXYFkcbi/s800/navbar.gif) repeat-x top;
    width: 150px;
    color: #000;
    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 15px,;
    }

    #nav li li a:hover, #nav li li a:active {
    background: #99C9FF;
    color: #3D81EE;
    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;
    }

    6. Simpan di atas kode ]]>

    catatan :

       1. pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
       2. pada text yang berwarna orange di atas biarkan saja

     7. Setelah itu silakan copy kode berikut ini :
    >


    8. Simpan di bawah


    9. save.




    Sehingga hasilnya seperti ini :



    ]]>












    Kode di atas adalah kode yang saya gunakan di salah satu blog saya. dan mungkin akan sedikit berbeda posisinya dengan template anda. namun standarnya seperti contoh di atas. lihat hasilnya disini


    keterangan :
    1. jika anda ingin menambah dropdown lagi tinggal tambahkan saja kode :




  • Tutorial








    • Catatan :
    Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawaholeh kita. jadi bila nanti anda ingin membuat dropdown tambahan, tambahkan saja kode pada kumpulan kode menu pada no.7

    2. Di atas, saya banyak menuliskan link ke arah blog ini, ganti dengan link yang ingin anda tuju, bisa ke arah blog anda atau orang lain.
    Diposting oleh Ihsan Syaputra di 10/28/2010 12:32:00 PM
    Label:

    0 komentar:

    Posting Komentar

    Langganan: Posting Komentar (Atom)

    Tukeran Link

    Blog Tutorial