Cara membuat menu horizontal dropdown di blog. Tutorial sebelumnya yaitu cara membuat menu horizontal dan cara menambahkan navbar+search box, kali ini kita akan share cara membuat navigasi horizontal dengan fungsional dropdown. Navigasi dropdown bertujuan untuk memperlengkap system navigasi blog agar tersusun rapi dan memudahkan para pembaca. Blog yang memiliki navigasi mudah dan rapi akan membuat para pembaca merasa nyaman saat berada di blog anda. System navigasi adalah salah satu bentuk perlengkapan system eksplorasi blog yang dapat memudahkan para pengunjung dalam mengeksplor blog.

Navigasi horizontal dropdown menjadi perlu apabila blog anda memuat banyak konten atau label. Menu dropdown dapat anda jadikan sebagai penunjuk untuk pengelompokan kategori. Dengan begitu para visitor akan lebih mudah untuk menemukan artikel atau tutorial yang sedang dibutuhkannya. Navigasi horizontal dropdown tentunya tidak ada hubungannya dengan SEO, namun ia juga cukup penting untuk memudahkan susunan navigasi blog. Jika blog anda hanya memiliki beberapa label, mungkin keberadaan dropdown menu tidak seberapa diperlukan. Namun, terlepas dari itu kembali lagi pada selera si Admin. Mungkin anda beranggapan bahwa selain memudahkan para pembaca keberadaan dropdown horizontal menu dianggap bisa menjadikan blog tampak lebih keren.

Seperti halnya membuat menu horizontal, untuk membuat dropdown horizontal menu yang dibutuhkan adalah dua ekstensi kode/script, yaitu kode CSS dan kode HTML. CSS adalah kode untuk menentukan desain dari objek/widget yang ingin kita pasang di blog. HTML berada satu paket dengannya, karena kode HTML yang akan membuat suatu objek dari desain CSS dapat dimunculkan pada bidang laman blog. CSS berbeda dengan javascript. Keberadaan javascript memang sangat penting untuk blog karena ia juga memiliki beberapa peran vital, dan yang membedakan antara javascript dengan CSS adalah terletak pada beban/size. Konten javascript berpotensi untuk menjadikan loading blog menjadi sangat berat, sementara CSS tidak akan berpengaruh terhadap loading.

Karena javascript menyumbang ukuran berat blog, maka ada baiknya anda mengurangi penggunaan konten javascript. Cukup gunakan javascript untuk keperluan yang prioritas saja supaya blog dapat di load dengan cepat. Loading cepat akan membuat visitor merasa lebih nyaman untuk menjelajahi seluruh isi blog. Selain itu, blog yang terlalu berat juga tidak baik untuk SEO. Search engine lebih menyukai blog yang berukuran ringan, baik itu Google, Bing maupun search engine lainnya.

Langkah-langkah untuk membuat menu dropdown horizontal blog

Masuk ke Dashboard Blogger

Pilih tab Layout/Tata Letak

Klik Add a Gadget/Tambahkan Gadget

Pilih HTML/Javascript, kemudian masukkan kode dibawah ini.

Simpan.

Selanjutnya silahkan menuju ke tab Template

Untuk mengantisipasi terjadinya permasalahan pada template silahkan backup dulu template anda.

Pilih Edit HTML, klik Proceed/Lanjutkan.

Cari kode ]]></b:skin>

Masukkan kode dibawah ini diatas kode ]]></b:skin>

/*----- Geosya Drop Down Menu ----*/
#geosyanavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#geosyanav {
    margin: 0;
    padding: 0;
}
#geosyanav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#geosyanav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#geosyanav li a, #geosyanav li a:link, #geosyanav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#geosyanav li a:hover, #geosyanav li a:active {
    background: #BF0100; 
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#geosyanav li {
    float: left;
    padding: 0;
}
#geosyanav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#geosyanav li ul a {
    width: 140px;
}
#geosyanav li ul ul {
    margin: -25px 0 0 161px;
}
#geosyanav li:hover ul ul, #geosyanav li:hover ul ul ul, #geosyanav li.sfhover ul ul, #geosyanav li.sfhover ul ul ul {
    left: -999em;
}
#geosyanav li:hover ul, #geosyanav li li:hover ul, #geosyanav li li li:hover ul, #geosyanav li.sfhover ul, #geosyanav li li.sfhover ul, #geosyanav li li li.sfhover ul {
    left: auto;
}
#geosyanav li:hover, #geosyanav li.sfhover {
    position: static;
}
#geosyanav li li a, #geosyanav li li a:link, #geosyanav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#geosyanav li li a:hover, #geosyanavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Simpan dan selesai.

Note:

Kode #060505; adalah kode warna background utama, silahkan ganti sesuai dengan selera anda atau biarkan saja.

Pada kode HTML <li><a href='#'>Sub Page #1</a></li> ganti simbol #  dengan URL anda.

#BF0100; Kode warna untuk mouse hover 

#BF0100; Kode warna background dropdown

Result dropdown menu

Selamat mencoba. Ada yang ingin ditanyakan silahkan tinggalkan komentar.