Hai sob, udah lama gak posting nih hehe, oke sekarang saya akan posting tentang Cara Buat Menu Dropdown di Blog, Bagi yang belum tahu dropdown menu akan saya beri tahu deh..Dropdown menu adalah menu yang biasanya berisi link-link untuk menuju halaman tertentu. Tidak hanya itu, menu-menu ini juga memiliki sub menu lagi yang tampil ke bawah dari menu tersebut oleh karena itu menu ini disebut dropdown menu, karena tampilnya ke bawah. Sedikit bingung dengan penjelasan saya ? baiklah, saya akan berikan contohnya:
Berikut saya perjelas langkah-langkahnya !
1. Login ke www.blogger.com menggunakan akun blog anda.
2. Buka menu TEMPLATE, pilih EDIT HTML
3. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian)
4. Setelah ketemu, masukan kode dibawah ini tepat di atas kode ]]></b:skin>
#menu{background:#01a279;border:1px solid #028564;color:#fff;height:35px;font-family:'Oswald', Arial, sans-serif;width:938px;margin:15px auto;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:35px;width:1100px}
#menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Open Sans', Arial, sans-serif;text-shadow: 0 -1px 0 #028564;}
#menu li a{border-right:1px dotted #028564;}
#menu li a:hover {color:#fff;background-color:#028564;-webkit-transition: all 0.6s ease-in;-moz-transition: all 0.6s ease-in;-o-transition: all 0.6s ease-in;transition: all 0.6s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff}
#menu label span{font:normal 14px Open Sans;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#01a279;border-top:1px solid #028564;border-left:1px solid #028564;border-bottom:1px solid #028564;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#e0f6f0 transparent transparent transparent;position:absolute;top:14px;right:9px}
#menu ul.menus a:hover{background:#028564;color:#fff}
5. Untuk kode #01a279 dan kode #028564 itu merupakan kode warna Anda dan bisa anda ganti dengan sesuka anda
6. dan kode 1100px itu untuk ukuran dan anda bisa ganti dengan sesuka anda
7. Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya
Perhatian!<nav id='menu'>
<input type='checkbox'/>
<label><i class='icon-reorder'></i><span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li><a class='dropdown' href='#'>Drop menu</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'><span>Menu 3</span></a></li>
<li><a class='dropdown' href='#'>Drop Menu</a>
<ul class='menus'>
<li><a href='#'>SD</a></li>
<li><a href='#'>SMP</a></li>
<li><a href='#'>SMA</a></li>
</ul>
</li>
</ul>
</nav>
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
8. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.
Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Cara Buat Menu Dropdown di Blog. Semoga bermanfaat !
_thumb%5B1%5D-crop.png)
0 komentar: