Selamat Datang Di Blog Ash-Shiddiqiyyah ========= Semoga Apa Yang Kami Berikan Bisa Bermanfaat Bagi Pengunjung. Amin!!!!!!!

Tuesday, April 3, 2012

Cara Bikin Menu Dropdown

1. Log in ke dashbord Blogger anda menggunakan akun Blogger atau Google anda , trus kita pilih Opsi dan  kita pilihTata Letak

2. Juka sudah tinggal kita klik Tambah Gadget
4. Terus Plih yang HTML/Java Script
5. Baru dech kita masukin Scriptnya disini ( yang dilingakari ya )

Ini Scriptnya


<style type="text/css">
#babi{background:url(http://lh3.googleusercontent.com/-ixgySORWjpg/T1_3miHt8RI/AAAAAAAAA_s/ZWUZBT78UNA/s35/catmenuhov.jpg); width:945px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 3px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;}
#ngepet{width:900px; float:left; margin:0; padding:0;}
#boled{margin:0; padding:0;}
#boled ul{float:left; list-style:none; margin:0; padding:0;}
#boled li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#boled li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:8px 10px 8px; font:bold 11px Arial, Times New Roman;}
#boled li a:hover, #boled li a:active{background:url(http://lh3.googleusercontent.com/-oeHoTI_4VNk/T1_3Xt7xs3I/AAAAAAAAA_c/YZm8fsXKPyg/s284/widgettitle-bg.png);color:#fff; padding:9px 15px 9px; text-decoration:none;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;}
#boled li li a, #boled li li a:link, #boled li li a:visited{background:url(http://lh4.googleusercontent.com/-NTMvWa4PgBw/T14ZMOBJ_jI/AAAAAAAAA6E/aZlo0d1jynY/s300/ctmenu.png); width:150px; color:#e5e3e3; text-transform:capitalize;position:left; float:none; margin:0; padding:2px 5px; border-bottom:1px solid #151f23; border-left:px solid #151f23;border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;}
#boled li li a:hover, #boled li li a:active{background:url(http://lh3.googleusercontent.com/-oeHoTI_4VNk/T1_3Xt7xs3I/AAAAAAAAA_c/YZm8fsXKPyg/s284/widgettitle-bg.png); color:#fff; padding:3px 10px;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;}
#boled li{float:left; padding:0;}
#boled li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#boled li ul a{width:140px;}
#boled li ul ul{margin:-24px 0 0 170px;}
#boled li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#boled 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;}
#boled li:hover, #nav li.sfhover{position:static;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
</style>
<div id='outer'>
<div id='babi'>
<div id='ngepet'>
<ul id='boled'>
<li><a href='disini URL nya'>Home</a></li>
<li><a href='disini URL nya'>About Me</a></li>
<li><a href='#'>Pkbm</a>
<ul>
<li><a href='disini URL nya'>Sambutan</a></li>
<li><a href='disini URL nya'>Profil Pkbm</a></li>
<li><a href='disini URL nya'>Susunan Pengurus</a></li>
<li><a href='disini URL nya'>Administrasi Pkbm</a></li>
</ul></li>
<li><a href='#'>Paud</a>
<ul>
<li><a href='disini URL nya'>Sambutan</a></li>
<li><a href='disini URL nya'>Profil Paud</a></li>
<li><a href='disini URL nya'>Susunan Pengurus</a></li>
<li><a href='disini URL nya'>Administrasi Paud</a></li>
</ul></li>
<li><a href='#'>Lifestyle</a>
<ul>
<li><a href='disini URL nya' target="_blank" >Kesehatan</a></li>
<li><a href='disini URL nya' target="_blank" >Food</a></li>
<li><a href='disini URL nya' target="_blank">Motivasi</a></li>
</ul></li>
<li><a href='#'>Technology</a>
<ul>
<li><a href='disini URL nya' target="_blank">Handphone</a></li>
<li><a href='disini URL nya' target="_blank">Komputer</a></li>
</ul></li>
<li><a href='#'>Music</a>
<ul>
<li><a href='disini URL nya' target="_blank">Lirik Music</a></li>
</ul></li>
<li><a href='#'>Blogger</a>
<ul>
<li><a href='disini URL nya'>Tips Blog</a></li>
<li><a href='disini URL nya'>Tutorial Blog</a></li>
</ul></li>
<li><a href='#'>Download</a>
<ul>
<li><a href='disini URL nya'target="_blank">Download Icons</a></li>
<li><a href='disini URL nya'>Download Template</a></li>
</ul></li>
<li><a href='#'>Games</a>
<ul>
<li><a href='disini URL nya'target="_blank">Point Blank</a></li>
</ul></li>
<li><a href='#'>Photoshop</a>
<ul>
<li><a href='disini URL nya'target="_blank">Tutorial Photoshop</a></li>
</ul></li>
</ul></div>
</div>
</div>



Itulah sekiranya yang dapat saya berikan , semoga bisa bermanfaat buat kawan semua . Baca juga Artikel lainnya ya !!!!!!



Share:

0 comments:

Post a Comment

Definition List

Unordered List

free counters

Support


web counter