Cara membuat menu dropdown di blog tanpa edit html Mudah Praktis dan Terbaru - Dipadgi yang cerah ini saya telah membuat postingan yang menarik untuk anda pemula (newbie) blogger, karena kali ini saya telah memposting tentang bagaimana cara membuat menu dropdown pada blog tanpa mengedit HTML pada blog sehingga anda tidak perlu sulit dalam mendesain blog anda, sehingga blog akan tampak lebih rapi dan sempurna. Bagi anda yang ingin memasang menu dropdown pada blog ini anda bisa mengikuti langkah-langkah berikut ini :
1. Masuk ke Dashboard blogger anda.
2. Lalu masuk ke Templates > Tata letak > Lalu pilih New Widget > HTML dan copy script dibawah.
<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 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: 50px;
border-radius: 50px;
-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: 25px;
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: 35px;
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: 10px;
height: 10px;
width: 130px;
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='/'>Home</a></li>
<li><a href='http://pakepe.com/' rel='nofollow' target='_blank'>Drop menu</a>
<ul>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://pakepe.com/' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 3</a>
<ul>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://pakepe.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>
Mudah kan? silahkan dicoba kawan blogger.
Itulah langkah-langkah cara membuat menu dropdown dengan mudah dan praktis untuk blog anda agar tampak lebih bagus serta sempurna. Semoga dengan artikel yang saya posting diaras dapat bermanfaat bagi anda.
Terima kasih Atas kunjungannya
