YAYASAN AL-ISTIQOMAH KAJEN

Saturday, January 12, 2019

CARA membuat 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 YAYASAN AL-ISTIQOMAH</a></li>
<li><a href='disini URL nya'>Susunan Pengurus</a></li>
<li><a href='disini URL nya'>Administrasi YAYASAN AL-ISTIQOMAH </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>



OJO LALI ...Baca juga Artikel lainnya ya !!!!!!

sumber dari:
http://pkbmash-shiddiqiyyah.blogspot.com/2012/04/cara-bikin-menu-dropdown.html?m=1

No comments:

Post a Comment