Cara Buat Menu Dropdown di Blog

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:
Lalu, cara menambahkannya ke blog susah tidak ? tentunya tidak sulit, kali ini kita hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK.
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

<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>
Perhatian!
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 ! 
Previous
Next Post »

14 komentar

Write komentar
M Raffi
AUTHOR
July 14, 2013 at 2:47 PM delete

keeren nih gan menunya mirip ama blog ane, salam kenal gan ane pem blogger baru kunjungi gan!http://info-news99.blogspot.com/

Reply
avatar
Henry Dwi.s
AUTHOR
July 14, 2013 at 4:50 PM delete

iya sob cumang beda warnanya aja, salam kenal juga sob!

Reply
avatar
choirul fauzi
AUTHOR
November 2, 2013 at 12:46 PM delete

Belum Bisa2 ya boz...sulit banget...keranjangberita.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
November 3, 2013 at 1:10 PM delete

di coba trus sob sampai bisa :D

Reply
avatar
gilang romy
AUTHOR
January 6, 2014 at 11:42 AM delete

sob, susahnya cari kode ]]> sama apa mungkin nggak ada ya di blog saya, ada solusi lain nggak ? di tunggu balessannya kalau punya waktu luang.. seadanya1@gmail.com

Reply
avatar
Elemen
AUTHOR
February 4, 2014 at 11:53 AM delete

sob cari kok enggk ketemu"

Reply
avatar
Elemen
AUTHOR
February 4, 2014 at 11:55 AM delete

yg nomer 7 enggk ketemu sob
tolong bantuannya

Reply
avatar
brimedika mks
AUTHOR
February 21, 2014 at 12:59 PM delete

Makasih banyak sob.. postingan yg sangat bermanfaat

Reply
avatar
wahidbdg
AUTHOR
June 4, 2014 at 11:33 PM delete

Saya ga bisa nemuin content wrapper....yg mirip juga ga tahu....pls bantu .....

Reply
avatar
Arkaan ku
AUTHOR
June 27, 2014 at 7:48 PM delete

kalau ini menunya ikut turun apa ga masss

Reply
avatar
Henry Dwi.s
AUTHOR
June 28, 2014 at 12:57 PM delete

inspeksi elemen gan, dgn cara klik kanan pada halaman blog lalu inspeksi elemen

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon