Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML

Ditulis oleh: 21.3.14
Bulan Ramadlan SEO → Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML
Kebetulan karena kemarin saya memakai Drop Down Menu di Blog ini, dan kelihatannya lebih bagus dari sebelumnya maka saya akan share Drop Down Menu yang saya pakai ini, siapa tahu bermanfaat.
Bagi yang berminat memakai Menu Drop Down seperti yang saya pakai ini silahkan anda copy kode di bawah ini:

<style>
#menu
{
width: autopx;
margin: 5;
padding: 5px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 20px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 25px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 5px;
height: 5px;
width: autopx;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/' rel='nofollow'>Home</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu DropDown</a>
<ul>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/hubungi-bulan-ramadlan-seo.html' rel='nofollow' target='_blank'>Hubungi Bulan Ramadlan SEO</a></li>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-review-website-dan-produk-bulan.html' rel='nofollow' target='_blank'>Jasa Review Website dan Produk Bulan Ramadlan SEO</a></li>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-pasang-iklan-paket-murah.html' rel='nofollow' target='_blank'>Jasa Pasang Iklan Paket Murah</a></li>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-review-produk-dan-website-besar-besaran.html' rel='nofollow' target='_blank'>Jasa Review Produk dan Website Besar besaran</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='/' rel='nofollow' target='_blank'>Menu DropDown 2</a>
<ul>
<li><a href='/' rel='nofollow' target='_blank'>Menu 1</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 2</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 3</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 4</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/2013/06/cara-membuat-menu-drop-down-tanpa-edit.html' rel='dofollow' target='_blank'>Cara Membuat Menu Drop Down Tanpa Edit Html</a></li>
</ul></li></ul>

Lalu silahkan anda paste pada gadget html.
setelah anda paste silahkan anda simpan tanpa memberikan nama pada gadget tersebut.
dan sebelumnya silahkan anda ganti link yang ada dengan link anda, begitu juga nama sebagai anchor text-nya. dan sekian dari saya semoga Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML ini bermanfaat.

0 komentar "Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML", Baca atau Masukkan Komentar

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.