B-CC Navbar Gunakanlah Google Chrome untuk Tampilan Maksimal Blog Ini , Thanks For Visit My Blog,Jangan Lupa Follow Blog Ini. Online Peoples


Cara membuat Menu Dropdown

Unknown | 7:03 م | 0 التعليقات

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.



1. Login blogger
2. Ke layout/tata letak, add gadget, EditHTML/JavaScript
3. Masukan code nya di bawah ini
<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>

4. KETERNGAN: Untuk yang '#' silakan ganti dengan link kalian, Warna Merah adalah Menu dan Hijau adalah Sub Menu. Silakan di ganti sesuai blog kalian.

Category: ,

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!

0 التعليقات