Blogger merupakan salah satu platform blogging yang paling populer di Indonesia. Blogging adalah cara yang bagus untuk berbagi pengetahuan, pengalaman, dan ide dengan orang lain. Namun, untuk membuat blog yang menarik dan mudah digunakan, Anda perlu memperhatikan desain blog Anda. Salah satu cara untuk meningkatkan desain blog Anda adalah dengan membuat menu drop down.
Jika anda masih menggunakan tema bawaan blogger seperti Soho, Emperio, Simple dan template blogger klasik lainnya. Maka fitur drop down menu harus ditambah secara manual dan kebanyakan untuk tema terbaru sudah responsif pengeditan sub menu atau drop down menu. Sebelum itu baiknya Anda pelajari lagi penjelasan dari fungsi dan manfaat dari menu drop down dibawah ini!
Apa itu Menu Drop Down?
Hasilnya: Menu Drop Down di Blogger |
Menu drop down adalah menu yang muncul ketika pengunjung mengarahkan kursor ke menu utama di blog Anda. Menu ini memungkinkan pengunjung untuk memilih kategori atau subkategori dengan mudah. Dalam artikel ini, saya akan membahas cara membuat menu drop down di Blogger.
Menu drop down merupakan sebuah fitur yang sangat berguna bagi para blogger. Dengan menggunakan fitur ini, Anda dapat membuat blog Anda lebih terorganisir dan mudah diakses oleh para pengunjung. Jadi, jika Anda ingin membuat blog Anda lebih profesional dan mudah diakses, jangan ragu untuk menggunakan menu drop down di Blogger.
Menu drop down adalah fitur yang sangat penting dalam menjadikan blog mereka lebih teratur dan mudah diakses oleh para pengunjung. Menu drop down adalah sebuah menu navigasi yang muncul saat kita mengklik atau mengarahkan kursor ke sebuah tombol atau menu tertentu. Fitur ini sangat populer di kalangan blogger karena dapat membantu para pengunjung untuk menemukan konten yang mereka cari dengan mudah.
Langkah-langkah Membuat Menu Drop Down di Blogger
Sebagian Template Blogger Responsif terbaru sudah mendukung pengeditan menu drop down ini, akan tetapi bila anda masih menggunakan template bawaan/default blogger. Untuk membuat menu drop down, ikuti langkah-langkah berikut:
- Masuk ke dashboard Blogger Anda.
- Pilih "Tata Letak" dari menu di sebelah kiri.
- Klik "Tambahkan Gadget > HTML/Javascript lalu Copy dan Paste kode script dibawah ini kedalamnya.
<style>
#menunavigasihorisontal {
background: #ff7474;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:50px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #000;
display: block;
font:normal 16px crushed, oswald;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #91857f;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #e06666;
display: block;
font:normal 14px Arial, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 14px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #e06666;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='/'>Beranda</a>
</li>
<li>
<a href='#'>Menu 1</a>
</li>
<li>
<a href='#'>Menu 2 ▼</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
</div>
- Silahkan ganti nama Menu 1, Menu 2 dan Sub Menu 1, Sub Menu 2, Sub Menu 3 sesuai dengan judul navigasi blog Anda.
- Jika sudah klik "Simpan" untuk menyimpan menu Anda.
Catatan:
Untuk menambah menu Anda hanya perlu menyalin kode
<li><a href='#'>Menu 1</a></li>
Untuk Menambah menu Drop Down Anda hanya perlu menyalin kode
<li><a href='#'>Menu 2 ▼</a><ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
Akhir Kata
Dengan menggunakan menu drop down di Blogger, Anda dapat membuat blog lebih terorganisir dan mudah diakses oleh para pengunjung. Anda dapat mengelompokkan konten berdasarkan topik atau kategori tertentu, sehingga para pengunjung dapat dengan mudah menemukan konten yang dicari.
Selain itu, menu drop down juga dapat membantu Anda mengurangi tampilan sidebar yang terlalu panjang, sehingga blog Anda akan terlihat lebih rapi dan profesional. Langkah-langkah diatas mudah untuk diikuti dan akan membantu membuat blog Anda lebih menarik dan mudah digunakan.
- refrensi: https://www.tettytanoyo.com