Cara Membuat Menu Dropdown untuk Blogger

Cara membuat menu dropdown, panduan website kali ini akan membahas tentang Membuat menu dropdown untuk sebuah website maupun blog.
Menu adalah sebuah fitur untuk memunculkan atau memajang link atau nama (papan nama) dari halaman website misalnya halaman Kontak , tentang kami , privasi ataupun halaman postingan serta halaman berdasarkan kategori/label.

Dropdown adalah sebuah fitur atau mode dengan desain satu ruang nama halaman bisa memunculkan banyak menu halaman yang lainya, dan menu dropdown untuk blogger biasanya berderet menyusun kebawah, sebagai contohnya seperti gambar di bawah ini

Dengan membuat atau menampilkan menu dropdown pada sebuah website atau blog maka akan membuat mudah bagi pengguna/pengunjung dari website tersebut karena apa yang ada di website tersebut di berikan menu pada halaman utama dari website tersebut.
dan dengan menu dropdown ini juga bisa menghemat ruang apa lagi website yang memang menyediakan banyak menu, jadi satu kolom nama menu bisa di isi 4 sampai 6 menu dropdown kebawah/dibawahnya.

Cara membuat menu dropdown ini sebenarnya mudah kita hanya butuh menambahkan 2 rangkain kode dalam HTML template, dan cara pembuatanya silahkan simak panduanya dibawah ini

Cara membuat menu dropdown

1.buka blog anda dengan mengunjungi blogger.com
2.lalu login ke akun blog/website masing-masing.
3.selanjutnya pergi kedashboard blog dengan mengeklik desain.
4.pada menu dashboard blogger pilih Template , lalu klik EDIT HTML , contohnya bisa dilihat gambar di bawah ini

5.lalu cari kode ini ]]</b:skin> dalam html template anda.
6.selanjutnya kopi kode yang ada di bawah ini dan pastekan di atas kode ]]</b:skin>

nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}

7.lalu kopi lagi kode yang di bawah ini dan pastekan di atas kode </head>

<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://www.jasa-website.web.id/2014/12/jasa-setting-blog.html'>Desain Website</a></li>
<li class='sub'><a href='/search/label/Template'>Menu 1</a><ul>
<li><a href='alamat url'>sub menu 1</a></li>
<li><a href='alamat url'>sub menu 2</a></li>
<li><a href='alamat url'>sub menu 3</a></li>
<li><a href='alamat url' target='_blank'>jasa pembuatan website</a></li>
</ul>
</li>
</ul>
</nav>

8.selanjutnya anda tinggal mengedit untuk nama menu nya dan alamat url dari masing-masing menu nya , dalam rangakain kode di atas sudah saya berikan contoh nama menu dan alamat url nya.
9.jika sudah selesai memasukan nama menu dan alamat url nya kemudian simpan templatenya.
10.selesai.

Untuk melihat perubahan pembuatan menu dropdown nya silahkan buka ulang salah satu halaman website anda.

Anda juga bisa membaca panduan Cara membuat Related Post

Demikian Panduan website dari Jasa pembuatan website tentang Cara membuat Menu dropdown, semoga dengan anda memasang menu dropdown bisa membuat pengunjung website anda masing-masing merasa puas dan buat anda juga merasa website anda bisa bermanfaat untuk orang banyak.