Membuat Menu Dropdown Horizontal Keren

Menu Dropdown ini sangat keren untuk dipasang pada blog anda. Cara membuatnya-pun cukup mudah, karena anda tidak perlu mengoprek-oprek template blog, anda hanya cukup menambahkan pada kode HTML java script berikut ini di widget anda. Contoh menu Dropdown ini bisa anda lihat seperti gambar diatas.

Ini kode HTML java script yang ditambahkan pada widget anda :

<style type="text/css"> #japmenu ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#japmenu li .current{color: transparant;}#japmenu li a:hover, #japmenu li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#japmenu {width: auto;float: left;margin: 0;padding: 0;}#japmenu {margin: 0;padding: 0;}#japmenu ul {float: left;list-style: none;margin: 0;padding: 0;}#japmenu li {list-style: none;margin: 0;padding: 0;}#japmenu li a, #japmenu li a:link, #japmenu li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#japmenu li a:hover, #japmenu li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#japmenu li li a, #japmenu li li a:link, #japmenu li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#japmenu li li a:hover, #japmenu li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#japmenu li {float: left;padding: 0;}#japmenu li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#japmenu li ul a {width: 140px;}#japmenu li ul ul {margin: -32px 0 0 171px;}#japmenu li:hover ul ul, #japmenu li:hover ul ul ul, #japmenu li.sfhover ul ul, #japmenu li.sfhover ul ul ul {left: -999em;}#japmenu li:hover ul, #japmenu li li:hover ul, #japmenu li li li:hover ul, #japmenu li.sfhover ul, #japmenu li li.sfhover ul, #japmenu li li li.sfhover ul {left: auto;}#japmenu li:hover, #japmenu li.sfhover {position: static;}#footer-column-divide {clear:both;}#japmenu{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8fwZQiYl5AWGgexNvnpFRqBHki32sw2I-BB0wtNElWhyphenhyphenrVaAJegb7y2IApehlxeLnv6RJBZd8DdmYBPYrDUQfC4v-E9TdbYajs-KJS_TZaDfohe1bjHDOab2Rfnttw412yqMSvIOMOohI/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> <div id='japmenu'> <ul id='japmenu'> <li><a href='disini letak link anda'>Home</a></li> <li><a href='disini letak link anda' target='_blank'>Daftar Isi</a></li> <li><a href='http://belajarsaraf.blogspot.com/' target='_blank'>link7</a> <ul class='children'> <li><a href='disini letak link anda' target='_blank'>link7</a></li> <li><a href='disini letak link anda' target='_blank'>link7</a></li> <li><a href='disini letak link anda' target='_blank'>link7</a></li> <li><a href='disini letak link anda' target='_blank'>link7</a></li> <li><a href='disini letak link anda' target='_blank'>link7</a></li> </ul> </li> <li><a href='http://belajarsaraf.blogspot.com/' target='_blank'>link8</a> <ul class='children'> <li><a href='disini letak link anda' target='_blank'>link8</a></li> <li><a href='disini letak link anda' target='_blank'>link8</a></li> </ul> </li> <li><a href='disini letak link anda' target='_blank'>link9</a> <ul class='children'> <li><a href='disini letak link anda' target='_blank'>link9</a></li> <li><a href='disini letak link anda' target='_blank'>link9</a></li> <li><a href='disini letak link anda' target='_blank'>link9</a></li> </ul> </li> <li><a href='http://belajarsaraf.blogspot.com/'>link10</a> <ul class='children' target='_blank'> <li><a href='disini letak link anda' target='_blank'>link10</a></li> <li><a href='disini letak link anda' target='_blank'>link10</a></li> </ul> </li> <li><a href='disini letak link anda' title='titleeeeee' target='_blank'>link11</a> <ul class='children'> <li><a href='disini letak link anda'>link11</a></li> <li><a href='disini letak link anda' target='_blank'>link11</a></li> </ul> </li> <li><a href='disini letak link anda' target='_blank'>link12</a></li> <li><a href='http://belajarsaraf.blogspot.com/' title='tutorial' target='_blank'><blink>Tutorial</blink></a></li> </ul> </div>

Ganti kode yang berwarna hijau diatas dengan link yang hendak dituju pada blog anda.

Kemudian klik save.

Dan lihatlah hasilnya.

Postingan yang Bersenggama