Cara Membuat Menu Drop Down Keren

Hey sob, kali ini saya share cara membuat Menu Drop Down yang keren abis buat kalian para pemula blogger. Yaps langsung aja ni lihat hasilnya dibawah ini :

Bagus kagak sob ??? hhe

Bila sobat berminat atau ingin memiliki menu ini langsung aja yuk, ikiutin langkah-langkahnya !

1. Buka setelan tempelate.

2. Klik Sesuaikan dan Klik Tingkat Lanjut,

3. Dan Klik CSS

4. Dan masukan code dibawah ini lalu "Tetrapkan ke Blog" atau simpan !

#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; position: relative; } #cssmenu { height: 49px; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #141414; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); border-bottom: 2px solid #740cb0; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu a { background: #141414; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); color: #ffffff; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; } #cssmenu ul { list-style: none; } #cssmenu > ul { float: left; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #740cb0; margin-left: -10px; } #cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #cssmenu > ul > li:last-child > a { border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; } #cssmenu > ul > li.active a { box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; background: #070707; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); } #cssmenu > ul > li:hover > a { background: #070707; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; } #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover > ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li a { background: #740cb0; border-bottom: 1px dotted #ac6dd0; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; } #cssmenu .has-sub ul li:hover a { background: #540980; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li a { background: #540980; border-bottom: 1px dotted #996bb3; } #cssmenu .has-sub .has-sub ul li a:hover { background: #350551; }

5. Nah kemudian pastekan kode HTML ini dengan menambahkan widget atau java scrift di "Tata Letak".

<div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class='active'><a href='URL milik anda'><span>About</span></a></li> <li class='active'><a href='URL milik anda'><span>Artikel</span></a></li> <li class='has-sub'><a href='#'><span>Download</span></a> <ul> <li class='active'><a href='URL milik anda'><span>Product 1</span></a></li> <li class='active last'><a href='URL milik anda'><span>Product 2</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Trips & Triks</span></a> <ul> <li class='active'><a href='URL milik anda'><span>SEO</span></a></li> <li class='active'><a href='URL milik anda'><span>Blogger</span></a></li> <li class='active last'><a href='URL milik anda'><span>Java Scrift</span></a></li> </ul> </li> <li class='has-sub last'><a href='#'><span>Contact Me</span></a> <ul> <li class='active'><a href='URL milik anda'><span>Via Facebook</span></a></li> <li class='active'><a href='URL milik anda'><span>Via Twitter</span></a></li> <li class='active'><a href='URL milik anda'><span>Via Gmail</span></a></li> <li class='has-sub'><a href='#'><span>Phone Number</span></a> <ul> <li class='last'><a href='#'><span>+6285324568807</span></a></li> </ul> </li> </ul> </li> </ul> </div>

6. Lalu Simpan / Save.

Ket : Hrup yang ditandai warna merah, ganti dengan URL / No. Hp milik anda sendiri.