CSS Menu Drop Down | Pada kali ini saya akan posting tentang CSS Menu Drop Down. Bagaimana cara memasangnya? ribetkah? Jawabannya "Tidak. Mudah-mudah saja". Sebelum kita masuk ke topik utama pembicaraan kita, ada
baiknya sobat melihat postingan Kode Warna HTML, yang mungkin saja sobat ingin merubah warnanya, nanti pada kode CSS banyak terdapat kode warna, naha sobat bisa menggantinya sesuai dengan keinginan.
Baiklah mari kita ke inti, ini contoh screen shotnya:
Caranya adalah sebagai berikut:
Baiklah mari kita ke inti, ini contoh screen shotnya:
Caranya adalah sebagai berikut:
- login ke blogger.com
- setelah anda login dan berada di dasbor, klik rancangan di blog anda
- setelah anda berada di rancangan nanti ada terdapat tiga tab yaitu page element, edit html dan perancang template. Klik pada edit html dan cari kode ]]></b:skin> (untuk memudahkan pencarian tekan F3 atau ctrl + f pada browser sobat dan masukkan kode ]]></b:skin>)
- setelah ketemu letakkan kode berikut tepat diatas atau sebelum kode ]]></b:skin>
/* main and secondary top-level navigations */
#nav {
float: left;
font-family: 'Oswald', sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
width: 100%;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav ul li { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
float:left;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZipphZu7wjLEDYeWE80pIbrU8EaHcz1OX7_0pb7p_dn1tx5_aSSRsc_BFfOC8xX7OYJwDTBRkxMdIlQcVQldnSVJpleOJ4IbWVMiNmJwBhdCKzIgaQqp-etu003j_jYNW03m69c1wcU4/s320/menu-link-bg.png)
bottom center no-repeat;
}
#nav ul li a {
width: 100%;
float: left;
color:#fff;
padding: 10px 19px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top,
color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)),
color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom,
rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65)
9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#nav ul li a:hover,
#nav ul li:hover > a {
color: #fff;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top,
color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)),
color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom,
rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79)
9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #fff;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top,
color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)),
color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177)
17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom,
rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom,
left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)),
color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom,
rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom,
rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav li li ul {
margin: -1px 0 0 160px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 7px 6px;
border-radius: 0 6px 6px 6px;
visibility:hidden;
}
#nav li li:hover ul {
visibility:visible;
}
#nav ul ul li:last-child > a {
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
}
#nav ul ul ul li:first-child > a {
-moz-border-radius:0 6px 0 0;
-webkit-border-radius:0 6px 0 0;
border-radius:0 6px 0 0;
}
5. klik save. Setelah itu masuk pada rancangan lagi tepatnya
page element
6. pilih add gadget lalu html/java script
7. tambahkan kode berikut
<div id="nav">
<ul>
<li><a href="http://www.panjinasrullah.blogspot.com">Home</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Edukasi</a></li>
<li><a href="#">Fiqih</a></li>
<li><a href="#">Kesehatan</a></li>
<li><a href="#">Kisah</a>
<ul>
<li><a href="#">Biografi</a></li>
<li><a href="#">Motivasi</a></li>
<li><a href="#">Sejarah</a></li>
</ul>
</li>
<li><a href="#">Kultum</a></li>
<li><a href="#">Lirik</a></li>
<li><a href="#">Politik</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Tips Blog</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">By category</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tools</a></li>
<li><a href="#">Android</a>
<ul>
<li><a href="#">Android Apps</a></li>
<li><a href="#">Android Games</a></li>
</ul>
</li>
<li><a href="#">Linux</a>
<ul>
<li><a href="#">RedHat</a></li>
<li><a href="#">CentOS</a></li>
<li><a href="#">Fedora</a></li>
<li><a href="#">Ubuntu</a></li>
<li><a href="#">Debian</a></li>
<li><a href="#">Linux Mint</a></li>
</ul>
</li>
<li><a href="#">Back To Tutorial </a></li>
</ul>
</div>
8. tanda pagar (#) bisa anda ganti dengan link anda sendiri kemudian klik save/ atau simpan dan lihat hasilnya.
