Membuat menu Drop-down pada blog dengan CSS

Login ke blogger
Rancangan>edit Html>beri tanda pada Expand Template Widget>copy paste kode dibawah ini tepat di atas tag

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>

Cari kode berikut :

<b:includable id='title'><br> <b:if cond='data:blog.url == data:blog.homepageUrl'><br> <data:title/><br> <b:else/><br> <a expr:href='data:blog.homepageUrl'><data:title/></a><br> </b:if><br></b:includable><br><b:includable id='description'><br> <div class='descriptionwrapper'><br> <p class='description'><span><data:description/></span></p><br> </div><br></b:includable><br></b:widget><br></b:section><br> </div><br> </div><br>

Copy paste kode iberikut tepat di bawahnya!

<div id='navcontainer'><br><ul id='navlist'><br><li><a href='#'><span>Link 1</span></a></li><br><li><a href='#'><span>Link 2</span></a></li><br><li><a href='#'><span>Link 3</span></a></li><br><li><a href='#'><span>Link 4</span></a></li><br><li><a href='#'><span>Link 5</span></a></li><br><li><a href='#'><span>Link 6</span></a></li><br></ul><br></div><br>

Catatan: “#” ganti dengan alamat yang ingin di Link-an.inkl1 dan seterusnya diganti dengan nama yang diinginkan.Contoh:

<li><a href='http://www.Detiksport.com'><span>DUNIA BOLA</span></a></li>

Apabila diklik tombol tersebut dan terbuka pada jendela baru pada browse anda maka ditambahkan (target=’_blank’).

contoh:

<li><a href='http://www.Detiksport.com' target=’_blank’><span>DUNIA BOLA</span></a></li>

Simpan template. Lihat blog kamu maka hasilnya akan seperti gambar di bawah ini.