Cara membuat Menu Dropdown
Membuat menu dropdown, di samping bisa menghemat tempat juga biar blog kita terlihat rapi. dengan adanya menu dropdown, blogger sangat terbantu sekali apalagi menunya keren. pasti banyak di cari para pemercantik tampilan blogger. di kesempatan kali ini akan saya share cara membuat menu seperti judul postingan. supaya kalian tidak penasaran bagaimana menu dropdown nya.
<style type="text/css">
#Tutorialblog 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;}#Tutorialblog li .current{color: transparant;}#Tutorialblog li a:hover, #Tutorialblog li a:active {background: #009900; 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;}#Tutorialblog {width: auto;float: left;margin: 0;padding: 0;}#Tutorialblog{margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#Tutorialblog li {list-style: none;margin: 0;padding: 0;}#Tutorialblog li a, #Tutorialblog li a:link, #Tutorialblog li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#Tutorialblog li a:hover, #Tutorialblog li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#Tutorialblog li li a, #Tutorialblog li li a:link, #Tutorialblog 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;}#Tutorialblog li li a:hover, #Tutorialblog 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;}#Tutorialblog li {float: left;padding: 0;}#Tutorialblog li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#Tutorialblog li ul a {width: 140px;}#Tutorialblog li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #Tutorialblog li.sfhover ul ul ul {left: -999em;}#Tutorialblog li:hover ul, #Tutorialblog li li:hover ul, #Tutorialblog li li li:hover ul, #Tutorialblog li.sfhover ul, #Tutorialblog li li.sfhover ul, #Tutorialblog li li li.sfhover ul {left: auto;}#Tutorialblog li:hover, #Tutorialblog li.sfhover {position: static;}#footer-column-divide {clear:both;}#Tutorialblog{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimscE_BJXGQiYOoIspkJYlcjwrVNqTcrBCgw09scE_GtqE2IJIXxFCPc1hZIzNRGQatRi_kJRg7UHNbo2Iq2jCHezD3k7S8FobMnRYLIAMk2fKAE0_lWxutixV71TDPhvlf1K_skA7DxjW/)repeat-x;(0,0,0, 0.80);border: 0; 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='Tutorialblog'>
<ul id='Tutorialblog'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tukar link</a></li>
<li><a href='#'>Download</a>
<ul class='children'>
<li><a href='#'>Software</a></li>
<li><a href='#'>Game</a></li>
<li><a href='#'>Burn</a></li>
<li><a href='#'>Windows</a></li>
<li><a href='#'>Audio</a></li>
<li><a href='#'>Graphic Design</a></li>
</ul>
</li>
<li><a href='#'>contact us</a>
<ul class='children'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google+</a></li>
</ul>
</li>
<li><a href='#'>Tips</a>
<ul class='children'>
<li><a href='#'>blackberry</a></li>
<li><a href='#'>android</a></li>
<li><a href='#'>symbian</a></li>
</ul>
</li>
<li><a href='#'>Tutorial Blog</a>
<ul class='children'>
<li><a href='#'>web master</a></li>
<li><a href='#'>SEO</a></li>
</ul>
</li>
<li><a href='#'>Humor</a>
<ul class='children'>
<li><a href='#'>Umum</a></li>
<li><a href='#'>Suroboyoan</a></li>
</ul>
</li>
<li><a href='#'>help?</a></li>
<li><a href='#' target='blank'>link saya</a></li>
</ul>
</div>
Category: Tips dan Trik, Tutorial Blog
0 التعليقات