Cara membuat menu dropdown pada blogspot

Lagi santai tidak ada kerja.

panaskan air,turn on pc, tur on modem, langsung blogger.

pasang rokok, buat kopi lansung posting........

Okey pada kesempatan ini saya mau berbagi tutorial cara membuat menu dropdown.

Seperti biasanya anda harus login ke blogger sobat-kemudian klik menu    template - pilih edit HTML.

Okay yang pertama anda harus meletakan kode dibawah ini tepat        di atas   kode  ]]></b:skin>

#DropdownMenu {<br />    background:green;<br />border-radius:6px;<br />    width: 880px;<br />    height: 35px;<br />    font-size: 12px;<br />    font-family: Arial, Tahoma, Verdana;<br />    color:#FFFFFF;<br />    font-weight: bold;<br />    margin-bottom: 30px;<br />    padding: 2px;<br /><br /><br />} <br />#Dropdownbox {<br />    width: 875px;<br />border-radius:6px;<br />    float: left;<br />    margin: 0;<br />    padding: 0;<br />}<br /><br />#strike { <br />border-radius:6px;<br />    margin: 0;<br />    padding: 0;<br />}<br />#strike ul {<br />border-radius:6px;<br />    float: left;<br />    list-style: none;<br />    margin: 0;<br />    padding: 0;<br />}<br />#strike li {<br />border-radius:6px;<br />    list-style: none;<br />    margin: 0;<br />    padding: 0;<br />}<br />#strike li a, #strike li a:link, #strike li a:visited {<br />border-radius:6px;<br />    color:#FFFFFF;<br />    display: block;<br />    font-size: 16px;<br />    font-family: Georgia, Times New Roman;<br />    font-weight: normal;<br />    margin: 0;<br />    padding: 9px 15px 8px;<br />}<br />#strike li a:hover, #strike li a:active {<br />border-radius:6px;<br />    background:#FFFFFF;<br />    color:#ff6803;<br />    margin: 0;<br />    padding: 9px 15px 8px;<br />    text-decoration: none;<br />}<br />#strike li li a, #strike li li a:link, #strike li li a:visited {<br />border-radius:6px;<br />      background:#ff6803;<br />    width: 150px;<br />    color:#FFFFFF;<br />    font-size: 14px;<br />    font-family: Georgia, Times New Roman;<br />    font-weight: normal;<br />    float: none;<br />    margin: 0;<br />    padding: 7px 10px;<br />    border-bottom: 1px solid #FFF;<br />    border-left: 1px solid #FFF;<br />    border-right: 1px solid #FFF;<br />}<br />#strike li li a:hover, #strike li li a:active {<br />border-radius:6px;<br />     background:#FFFFFF;<br />    color:#ff6803;<br />    padding: 7px 10px;<br />}<br />#strike li {<br />border-radius:6px;<br />    float: left;<br />    padding: 0;<br />}<br />#strike li ul {<br />border-radius:6px;<br />    z-index: 9999;<br />    position: absolute;<br />    left: -999em;<br />    height: auto;<br />    width: 170px;<br />    margin: 0;<br />    padding: 0;<br />}<br />#strike li ul a {<br />border-radius:6px;<br />    width: 140px;<br />}<br />#strike li ul ul {<br />border-radius:6px;<br />    margin: -32px 0 0 171px;<br />}<br />#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {<br />border-radius:6px;<br />    left: -999em;<br />}<br />#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {<br />border-radius:6px;<br />    left: auto;<br />}<br />#strike li:hover, #strike li.sfhover {<br />border-radius:6px;<br />    position: static;<br />}<br />

• Jika sudah simpan dan tunggu sampai proses selesai


• Lanjut Pilih menu add gadget atau tambah gadget kemudian pastekan dengan kode di bawah ini

<div id="DropdownMenu"> <div id="Dropdownbox"> <ul id="strike"><li><a href="#">Menu1</a></li><br /><li><br /><br /><a href="#">Menu2</a><br /><br /><ul><li><br /><br /><a href="#">Sub Menu 2</a><br /><br /><ul><li><a href="#">Sub Sub Menu 2</a></li><br /><li><a href="#">Sub Sub Menu 2</a></li><br /><li><a href="#">Sub Sub Menu 2</a></li><br /></ul></li><br /><li><a href="#">Sub Menu 3</a></li><br /><li><a href="#">Sub Menu 4</a></li><br /><li><a href="#">Sub Menu 5</a></li><br /><li><a href="#">Sub Menu 6</a></li><br /></ul></li><br /><li><a href="#">Menu 3</a></li><br /><li><a href="#">Menu 4</a></li><br /></ul></div></div>

• Simpan dan lihat Hasilnya


• Nama manu dan sub menu serta link yang dituju anda harus menggantinya sesuai dengan selera sobat