Sabtu, 09 Juni 2012
,kali ini saya akan share tutorial blogspot yang cukup menarik, yaitu cara membuat menu horizontal dropdown di blog. Sebenarnya sudah banyak tutorial yang membahas tentang ini oleh para blogger lainnya.
,apa itu menu horizontal dropdown? Menu horizontal dropdown adalah sebuah navigasi yang memudahkan pengunjung blog untuk menjelajahi isi isi yang ada di blog kita. Horizontal artinya berjajar ke samping, sedangkan dropdown artinya turun. Jadi kalau digabungkan, menu horisontal dropdown artinya navigasi berjajar di blog yang jika di tunjuk atau diklik akan keluar sederetan menu yang turun ke bawah.
1. Login ke blog kamu
2. Pilih Template >> Edit HTML (jangan lupa centang Expand Template Widget)
3. Kemudian cari kode ]]></b:skin> (dengan CTRL+F) lalu copy dan pastekan kode dibawah ini diatas kode ]]></b:skin>
#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#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;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#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;}
4. Setelah itu cari kode :
<b:widget id='Header1' locked='true'contoh :
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>5. Jika ingin menempatkan dibawah header, copy paste kode yang tersedia dibawah kode
<b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/>
</b:section>
</b:section>6. Dan jika ingin menempatkan diatas header, copy paste kode yang tersedia diatas kode
<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>Berikut ini adalah kodenya :
<div id='outer'>Yang bertanda '#' bisa anda ganti dengan link kamu sendiri.
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Artikel</a>
<ul>
<li><a href='#'>Pendidikan</a></li>
</ul></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
</ul></li>
</ul>
</div></div></div>
Kemudian disimpan :)
