Monday, July 8, 2013

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 ! 

Related Posts

Cara Buat Menu Dropdown di Blog
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

14 komentar

Tulis komentar
avatar
July 14, 2013 at 2:47 PM

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

Reply
avatar
July 14, 2013 at 4:50 PM

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

Reply
avatar
November 2, 2013 at 12:46 PM

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

Reply
avatar
November 3, 2013 at 1:10 PM

di coba trus sob sampai bisa :D

Reply
avatar
January 6, 2014 at 11:42 AM

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
February 4, 2014 at 11:55 AM

yg nomer 7 enggk ketemu sob
tolong bantuannya

Reply
avatar
February 21, 2014 at 12:59 PM

Makasih banyak sob.. postingan yg sangat bermanfaat

Reply
avatar
June 4, 2014 at 11:33 PM

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

Reply
avatar
June 27, 2014 at 7:48 PM

kalau ini menunya ikut turun apa ga masss

Reply
avatar
June 28, 2014 at 12:57 PM

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

Reply

=======================================================
• 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]
=======================================================