Hay kawan, setelah sebelumnya saya share berkali - kali mengenai tentang games compressed, pada kesempatan kali saya akan share tentang tips blogging, yaitu Cara Membuat Menu Navigasi Horizontal Dropdown. Apa yang dimaksud?? ya contohnya menu ada diblog saya ini kawan, ini saya perjelas dengan screenshot dibawah ini ==>>
Tertarik?? Untuk caranya adalah sebagai berikut =>>
1. Masuk Ke akun blogger, Rancangan, Edit HTML
2. Cari kode ]]></b:skin>
3. Kemudian copas kode dibawah ini tepat diatasnya =>>
4. Setelah itu Save Template.
/*-- (Menu/Nav) --*/
#nav-element{width:980px; margin:0; padding:0px 0 0px 0; float:center}
#nav{background:#transparent; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto; -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;}
#nav-left{float:left; display:inline; width:980px; padding-left:6px; padding-top:1px}
#nav-right{float:right; display:inline; width:200px; padding-top:3px; padding-right:15px}
#nav ul{float:left;list-style:none;margin:0;padding:0;font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold}
#nav li{list-style:none;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{display:block; color:#000; margin:1px 4px; padding:4px 4px; text-decoration:none;}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
#nav li a:hover,#nav li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;text-decoration:none}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:transparent;color:#fff;font-size:12px;text-transform:none;float:none;margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;}
#nav li li a:hover,#nav li li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;}
#nav li{float:left;padding:0}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:167px; background: #424242;margin:0px; padding:4px; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
#nav li ul a{width:156px;margin-bottom:2px;}
#nav li ul ul{margin:-32px 0 0 171px}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto}
#nav li:hover,#nav li.sfhover{position:static}
5. Untuk langkah selanjutnya buka elemen halaman, kemudian Tambah widget dilokasi yang kalian inginkan, pilih HTML/java script
6. Isikan kode dibawah ini =>>
<div id="nav-element">7. Setelah itu simpan, dan lihat hasilnya
<div class="widget-content">
<div id="nav">
<div id="nav-left">
<li><a href="http://andicxcools.blogspot.com/"><img src="http://casavas.xtgem.com/icon/home02.gif" /></a></li>
<li><a href="http://andicxcools.blogspot.com">Area Download</a><ul>
<li><a href="http://andicxcools.blogspot.com/search/label/Free%20Software">Free Software</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Games%20Compressed">Games Compressed</a></li>
</ul></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Kumpulan%20Askep">Kumpulan Askep</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Bussiness">Bisnis Online</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Nursing">Keperawatan Online</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Metodologi%20Penelitian">Metodologi Penelitian</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Tips%20n%20Trick">Tips n Tricks</a><ul>
<li><a href="http://andicxcools.blogspot.com/search/label/Tips%20Blogging">Tips Blogging</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Tips%20n%20Trick">Tips Lainnya</a></li>
</ul></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Info">Info Penting</a><ul>
<li><a href="http://andicxcools.blogspot.com/search/label/Nnfo%20Kesehatan">Info Kesehatan</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Info%20Islami">Info Islami</a></li><a href="http://andicxcools.blogspot.com/search/label/Kontes%20SEO">
</a><li><a href="http://andicxcools.blogspot.com/search/label/Kontes%20SEO">Kontes SEO</a></li>
<li><a href="http://andicxcools.blogspot.com/search/label/Info">Info Lainnya</a></li>
</ul></li>
<li><a href="http://1.shoutmix.net/?andicx_cools">Buku Tamu</a></li>
<li><a href="http://www.pulsagram.com/?id=CN020512">Uncategorized</a><ul>
<li><a href="http://andicxcools.blogspot.com/2010/08/link-tidak-jalan-atau-broken-link.html">Laporan Kesalahan</a></li>
<li><a href="http://andicxcools.blogspot.com/2010/08/requset-sofware.html">Request Software</a></li>
<li><a href="http://andicxcools.blogspot.com/2010/08/link-excahange.html">Link Exchange</a></li>
</ul></li>
<script language="javascript">setPage()</script>
</div>
<div id="nav-right">
<div id="tsrc-m">
<div id="src-m">
</div>
</div>
</div></div></div></div>
8. Selesai
0 comments:
Posting Komentar