Pada kali ini saya akan memberikan suatu cara untuk membuat atau menampilkan Menu Dropdown di blog kita. Banyak sekali pengguna blog yang ingin mengetahui cara membuat Menu Dropdown. Dan disini anda dapat mengetahui bahkan mempraktekkannya langsung keblog anda.
Tanpa Basa-Basi lagi saya akan membritahu bagaimana cara membuat Menu Dropdown di blog Kita :
1. Anda pastinya terlebih dahulu Login ke blog anda,
2. Klik menu Template
3. Klik tombol HTML,lalu setuju
4. Jangan lupa untuk mendownload template anda terlebih dahulu untuk berjaga-jaga. Caranya (Klik Disini)
5. Klik Expand Template Widget, untuk mengatur CSS blog
6. Sekarang cari ]]></b:skin> (gunakan Ctrl F untuk mempermudah pencarian)
7. Apabila sudah ketemu, copas kode dibawah ini, diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixbXjgqcLlardNGyTsuVqx_xIcqQTwY6rsnucR7QUGot-09MAsumD9JwkpLO-m3q4FbcL3h5t2zotL4QqNP8QSkQ6VEYmI065KB-zHXbpNkrt8tfRGZ0621JMLOy0fbwyeBy3UERQVIFo/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0R-gG1Um2cJ3uuMitGNf1wa-hrJ6_7vRgTleKAc4XwOcPI4NLsq9R0c6SW-c5crgeg9tlxusmPiy6rtC4JVIHRGTPZmTt6r3vJ8an4yH1nxLDFSHtOQvVAScJaWJYQ2YqUNxAHlOrji0/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
<div class='header-outer'>
...........
</b:section>
</div>
</div>
atau
<div id='header-wrapper'>
...........
</b:section>
</div>
</div>
9. Setelah menemukan salah satu kode diata, copas kode dibawah ini ke bawah kode yang di atas
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://blog-anda.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuO0FvQORb0ZButU2beJiJWS5lrYpo3hVtgd4GCNJQPPZoKNVx_MFTrfy2ehCGZ3Ko7eIKFdUtJ7PE7SB3uzcR4NxKEnWo-O4Pbdu6jqE15IQ4BcW41ZPZKLVwUlmZNblQxi36fmg09Pw/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a class='trigger' href='#'>Tecnologi</a>
<ul>
<li><a href='#'>Laptop</a></li>
<li class='hr'/>
<li><a href='#'>Komputer</a></li>
<li class='hr'/>
<li><a href='#'>Hanphone</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Tutorial</a>
<ul>
<li><a href='#'>Blog</a></li>
<li class='hr'/>
<li><a href='#'>Pelajaran</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Blog</a>
<ul>
<li><a href='#'>Menu Dropdown</a></li>
<li class='hr'/>
<li><a href='#'>Wiget</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Kristen</a>
<ul>
<li><a href='#'>Sejarah</a></li>
<li class='hr'/>
<li><a href='#'>Keselamatan</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Batak</a>
<ul>
<li><a href='#'>Sejarah</a></li>
<li class='hr'/>
<li><a href='#'>Kumpulan Marga</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Hiburan</a>
<ul>
<li><a href='#'>Musik</a></li>
<li class='hr'/>
<li><a href='#'>Film</a></li>
<li class='hr'/>
<li><a href='#'>Televisi</a></li>
</ul>
</li>
<li><a class='trigger' href='#'> Contact Me </a>
<ul>
<li><a href='#'>Email</a></li>
<li class='hr'/>
<li><a href='#'>Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Twitter</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://URL-blog.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:100px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrUZybYJ05bazufJFrEOEqcOA0eGLmvt4ioJY3RTRAsilQTM3th_DqT-ZP-CiRSNoTXfIJuaM6LlxlnFJu90aSF1eH36Cc9ZO4-MSDaJ1vJevbiBoIakmzOje28ZisVRQt-FcmPoZOq5M/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsAISb_60mbzyMQbjW-StsymqQkt2mCxUcP2ev1Iuj2TJLcG0szpqhLF8AuWINrkbITnWTlCez1s5Wi3Gur1hP7DLNiv7sALvlySf7l2FEGQKyXVYwmXi3v_OiC-OWyzIOSKOTWvmxj8/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
9. Klik Simpan Template. SELESAI
0 komentar:
Posting Komentar