cara memasang menu Dropdown di blog

Assalamu alaikum .... salam sejahtera untuk sahabat sahabat blogger semua ,

Dalam dunia blogger tentu banyak trik dan tips atau cara untuk mendesain blog agar supaya tampilan blog bagus dan menarik ,bagi blogger pemula termasuk saya tekadang sedikit bingung untuk memoles tampilan blog dengan berbagai macam pernak pernik warna atau memasang widget serta menu, berkaitan dengan bagaimana cara memasang menu Dropdown pada blog ,

nah kali ini saya akan berbagi trik bagaimana cara memasang menu Dropdown pada blog, cara ini memang sudah banyak beredar di kalangan blogger yang memposting bagaimana cara memasang menu Dropdown pada blog,

tapi tidak apa apalah untuk penyimpanan dokumen di blog, saya akirnya memposting artikel bagaimana cara memasang menu Dropdown pada blog

oky bagi sobat sobat yang ingin tahu cara memasang menu Dropdown pada blog
monggo ikuti beberapa langkah di bawah


pertama:
login ke akun Blogger anda
Masuk ke template anda dan pilih edit HTML.
Silahkan cari kode <header>
jika sobat menginginkan menu di atas header
letakan kode berikut ini tepat di bawah kode <header>


kemudian cari kode </header>
jika sobat menginginkan menu di bawah header
letakan kode berikut ini tepat di bawah </header>

<style>
#menu
{
width: 950px;
margin: 0;
padding: 2px 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: 0px;
border-radius: 0px;
-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='http://syarif-hidayatd.blogspot.com /'>Home</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='https://www.facebook.com/Asnaji' rel='dofollow' target='_blank'>faebook</a></li>
<li><a href='https://twitter.com/syarif_hyda' rel='dofollow' target='_blank'>twitter</a></li>
</ul>
</li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>

catatan :
silahkan ganti kode angka yang berwarna merah sesuai lebar template sobat
atau bisa di ganti dengan tulisan auto

kemudian silah ganti url warna biru dengan url sobat

terakhir : klik simpan
cukup sampai disini penjelasan saya tentang pemasangan menu Dropdown pada blog ketemu lagi dengan artikel berikutnya...

Tweet