Cara Membuat Menu Horizontal Dropdown di Blogspot

Cara Membuat Menu Horizontal Dropdown di Blogspot - Akhirnya postingan ini selesai setelah 2 hari di edit, itu waktu yang cukup lama buat newbie seperti ane, hihi. Kenapa posting tentang Cara Membuat Menu Horizontal Dropdown di Blogspot ini sangat lama di edit? Yah, lagi-lagi karena persoalan kurang pengalaman. Lebih dari itu, saya juga berusaha menguji postingan ini pada template yang berbeda dengan template yang saya gunakan. Kenapa harus diuji? Iya, karena tidak semua template memiliki pengaturan yang sama. Perbedaan ini terutama terjadi pada template bawaan blogger atau yang dibuat dengan "perancang template" dengan template yang kita download dari web penyedia template gratis.

Menu horizontal dropdown di blogspot harus kita buat secara manual. Meskipun pada "perancang tempate" yang disediakan oleh blogspot juga sudah memungkinkan membuat menu horizontal, yaitu menggunakan fitur laman, tapi tetap saja harus di edit secara manual agar dapat menjadi menu horizontal dropdown. Karena itulah, agar menu ini dapat kita gunakan sesuai keinginan, lebih baik kita membuatnya secara manual dari awal.  (bertele-telenya kepanjangan ya? hihihi)

Berikut cara membuat menu horizontal dropdown di blogspot :

1. Silahkan masuk dengan akun blogger sobat, >>> kemudian Rancangan

2. Setelah itu tambahkan gadget "HTML" kemudian pastekan kode berikut ini :

<style type="text/css">
    #subnavbar {
                background: #2a607b;
                width: 957px;
                height: 29px;
                color: #fff;
                margin: 0 10px 0 10px;
                padding: 0;
                font-weight: bold;
                border: 1px solid #d5d1b6;
    }
    #subnav {
                margin: 0;
                padding: 0;
    }
    #subnav ul {
                float: left;
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li {
                list-style: none;
                margin: 0;
                padding: 0;
    }
    #subnav li a, #subnav li a:link, #subnav li a:visited {
                color: #fff;
                display: block;
                font-size: 12px;
                font-weight: bold;
                text-transform: none;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li a:hover, #subnav li a:active {
                background: #2a607b;
                color: red;
                display: block;
                text-decoration: none;
                margin: 0 5px 0 0;
                padding: 6px 13px;
    }
    #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
                background: #2a607b;
                width: 140px;
                float: none;
                margin: 0;
                padding: 6px 10px;
    }
    #subnav li li a:hover, #subnav li li a:active {
                background: #2a607b;
                margin: 0;
                padding: 6px 10px;
    }
    #subnav li {
                float: left;
                padding: 0;
    }
    #subnav li ul {
                z-index: 9999;
                position: absolute;
                left: -999em;
                height: auto;
                width: 160px;
                margin: 0;
                padding: 0;
    }
    #subnav li ul a {
                width: 140px;
    }
    #subnav li ul ul {
                margin: -25px 0 0 161px;
    }
    #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
                left: -999em;
    }
    #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
                left: auto;
    }
    #subnav li:hover, #subnav li.sfhover {
                position: static;
    }
</style>
<div id='subnavbar'>
<ul id='subnav'>
<li><a href='http://www.anekanews.com/p/forum.html'>Home</a></li>

<li><a href='http://beranda-forum.1057624.n5.nabble.com/petunjuk-forum-f4585559.html'>Petunjuk Forum</a></li>

<li><a href='http://beranda-forum.1057624.n5.nabble.com/forum-blogger-f4581429.html'>Forum Blogger</a>
<ul><li><a href='http://beranda-forum.1057624.n5.nabble.com/blogwalking-amp-backlink-f4613188.html'>Blogwalking</a></li><li><a href='http://beranda-forum.1057624.n5.nabble.com/pernak-pernik-blogger-f4623844.html'>Edit Template</a></li></ul>
</li>
</ul>
</div>

Nah, langkah terakhir adalah menyimpan templatenya. Silahkan lihat contoh hasilnya di sini

Menu yang sobat copy tersebut masih seperti menu pada blogku ini, makanya lakukan pengeditan sesuai blog dan keinginan sobat. Untuk cara mengedit menu horizontal dropdown, silahkan klik linknya.