Cara Membuat Dropdown Menu di Blogspot
Thursday 9 May 2013
1
comments
Cara Membuat Dropdown Menu di Blogspot - mungkin masih banyak temen-temen yang ingin tau maupun belum tau cara membuat menu dengan tampilan ke bawah. Biasanya menu dengan tampilan ke bawah dikenal dengan nama dropdown menu.
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.
Jika teman-teman masih bingung dengan penjelasan saya, saya akan berikan contonya
Menu dropdown tersebut menggunakan sedikit tambahan pada bagian style CSS, menggunakan efek melengkung (perhatikan ujung-ujung menu, terlihat tidak membentuk siku). Cara menambahkannya ke blog susah tidak ? pastinya tidak sulit, kali ini kita hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK. :)
Berikut ini adalah langkah-langkah yang harus kalian lakukan :)
5. Untuk kode yang di beri warna merah dan hijau itu merupakan kode warna. Kalian bisa mengganti warna background dan tulisan dari menu yang akan kalian buat. Untuk kode #808080 itu adalah warna abu, #FFFFFF yang di dalam kotak berwarna hijau, itu adalah untuk warna tulisan dalam menu.. Silahkan anda ganti bila memang diperlukan.
yang menjadi warna background dari menu ini, silahkan anda ganti bila memang perlu. Lalu untuk kode
6. Jika sudah silakan SIMPAN tempelate anda
7. Sekarang kita menuju ke Tata Letak
8. Pilih Tambah Gadget dan tambahkan HTML/Java Script
9. Letakan script html dibawah ini pada kotak yang telah disediakan (ingat ! untuk kolom nama dikosongkan
<div id="DropdownMenu">
<div id="Dropdownbox">
<ul id="strike">
<li><a href="#">Menu1</a></li>
<li>
<a href="#">Menu2</a>
<ul>
<li>
<a href="#">Sub Menu 2</a>
<ul>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
<li><a href="#">Sub Menu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
</div>
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.
Jika teman-teman masih bingung dengan penjelasan saya, saya akan berikan contonya
Menu dropdown tersebut menggunakan sedikit tambahan pada bagian style CSS, menggunakan efek melengkung (perhatikan ujung-ujung menu, terlihat tidak membentuk siku). Cara menambahkannya ke blog susah tidak ? pastinya tidak sulit, kali ini kita hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK. :)
Berikut ini adalah langkah-langkah yang harus kalian lakukan :)
- Masuklah ke blog yang kalian miliki di www.blogger.com
- Setelah itu buka menu Tempelate, pilih Edit HTML
- Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian)
- setelah itu masukkan kode dibawah ini tepat diatas ]]></b:skin>
#DropdownMenu {
background:#808080;
border-radius:6px;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color:#FFFFFF;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Dropdownbox {
width: 875px;
border-radius:6px;
float: left;
margin: 0;
padding: 0;
}
#strike {
border-radius:6px;
margin: 0;
padding: 0;
}
#strike ul {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#strike li {
border-radius:6px;
list-style: none;
margin: 0;
padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
color:#FFFFFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
background:#FFFFFF;
color:#808080;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
background:#808080;
width: 150px;
color:#FFFFFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
background:#FFFFFF;
color:#808080;
padding: 7px 10px;
}
#strike li {
border-radius:6px;
float: left;
padding: 0;
}
#strike li ul {
border-radius:6px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#strike li ul a {
border-radius:6px;
width: 140px;
}
#strike li ul ul {
border-radius:6px;
margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
position: static;
}
background:#808080;
border-radius:6px;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color:#FFFFFF;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Dropdownbox {
width: 875px;
border-radius:6px;
float: left;
margin: 0;
padding: 0;
}
#strike {
border-radius:6px;
margin: 0;
padding: 0;
}
#strike ul {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#strike li {
border-radius:6px;
list-style: none;
margin: 0;
padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
color:#FFFFFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
background:#FFFFFF;
color:#808080;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
background:#808080;
width: 150px;
color:#FFFFFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
background:#FFFFFF;
color:#808080;
padding: 7px 10px;
}
#strike li {
border-radius:6px;
float: left;
padding: 0;
}
#strike li ul {
border-radius:6px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#strike li ul a {
border-radius:6px;
width: 140px;
}
#strike li ul ul {
border-radius:6px;
margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
position: static;
}
5. Untuk kode yang di beri warna merah dan hijau itu merupakan kode warna. Kalian bisa mengganti warna background dan tulisan dari menu yang akan kalian buat. Untuk kode #808080 itu adalah warna abu, #FFFFFF yang di dalam kotak berwarna hijau, itu adalah untuk warna tulisan dalam menu.. Silahkan anda ganti bila memang diperlukan.
6. Jika sudah silakan SIMPAN tempelate anda
7. Sekarang kita menuju ke Tata Letak
8. Pilih Tambah Gadget dan tambahkan HTML/Java Script
9. Letakan script html dibawah ini pada kotak yang telah disediakan (ingat ! untuk kolom nama dikosongkan
<div id="DropdownMenu">
<div id="Dropdownbox">
<ul id="strike">
<li><a href="#">Menu1</a></li>
<li>
<a href="#">Menu2</a>
<ul>
<li>
<a href="#">Sub Menu 2</a>
<ul>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
<li><a href="#">Sub Menu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
</div>
10. 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.
11. Bila sudah klik SIMPAN, dan lihat perubahannya pada blog anda.
Bila anda melakukannya dengan benar, maka seharusnya tampilan menu akan seperti yang ada pada contoh. Namun bila berbeda, coba anda perhatikan kembali langkah-langkah di atas.
Selamat Mencoba... :D
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Dropdown Menu di Blogspot
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://letsreadingme.blogspot.com/2013/05/cara-membuat-dropdown-menu-di-blogspot.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
Categories:
blog,
cara membuat menu di blog,
cara membuat menu dropdown di blog
1 comments:
thanks gan,,, :D
slalu ikuti blog ku ya http://kitaklik-ya.blogspot.com/
Post a Comment