Agoengsang - Membuat Menu Horizontal + Kotak Pencarian - Mengotak - atik blog sendiri memang sungguh mengasikkan walaupun sungguh melelahkan juga tetapi saat saya mengotak - atik blog sendiri menjadi apa yang seperti saya harapkan itu mendapatkan kepuasan tersendiri.
Nah, kali ini Agoengsang akan berbagi trik Membuat Menu Horizontal + Kotak Pencarian di blog.
Kalo sobat tertarik, langsung saja ikuti langkah - langkah dibawah ini :
1. Login diblog sobat dulu
2. Masuk ke dasboard
3. Masuk ke Template lalu klik Edit HTML
4. BackUp blog sobat dulu untuk menghindari hal - hal yang tak diinginkan
5. Setelah itu letakan kode HTML dibawah diatas kode ]]></b:skin>
.solmenu{background:#7b0000;width:970px;margin:0 auto;padding:0 auto}
.solnav{width:970px;height:26px;border-bottom:solid 1px #b53e01;margin:0 auto;padding:4px 0}
.solnav ul{padding-left:7px;color:#666;text-transform:capitalize;list-style-type:none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;margin:0}
.solnav li a{float:left;display:block;text-decoration:none;border-right:0 solid #415770;font-weight:700;color:#fff;padding:4px 10px 4px}
.solnav li a:visited{color:#fff}
.solnav li a:hover{background:#fff;border-radius:3px;-webkit-border-radius:3px;-opera-border-radius:3px;-moz-border-radius:3px;color:#000;text-decoration:none}
.solnav .current a{background:#e95000;border-radius:3px;-webkit-border-radius:3px;-opera-border-radius:3px;-moz-border-radius:3px;color:#000;text-decoration:none}
#search{float:right;width:180px;height:20px;margin-top:1px;margin-right:5px}
#search form{float:left}
#search input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrMnb9QHKqmT9_U7pY2snQng4vCL8Zcaw-_G7Z2CzmkYF85gsTLEPASSg3I9sQOaGMqrYTqjabQYu4AI51dXeITNa6hE-_EYLXVlTpG3URkALrIC3WS1ESALx66ud2GLLLku-7DTy_kJ8/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #a21b14;width:150px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
#search input[type="text"]:focus{background:#fff}
#search input[type="submit"]{display:none}
6. Kemudian cari code HTML <div id='outer-wrapper'><div id='wrap2'> dan letakan code HTML dibawah ini dibawah code HTML <div id='outer-wrapper'><div id='wrap2'>
<div class='solmenu'>
<div class='solnav'>
<ul>
<li><a href='http://agoengsang.blogspot.com/'>Home</a></li>
<li><a href='http://agoengsang.blogspot.com/'>Menu 1</a></li>
<li><a href='http://agoengsang.blogspot.com/'>Menu 2</a></li>
<li><a href='http://agoengsang.blogspot.com/'>Menu 3</a></li>
<li><a href='http://agoengsang.blogspot.com/'>Menu 4</a></li>
<li><a href='http://agoengsang.blogspot.com/'>Menu 5</a></li>
<div id='search'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Search an artikel";}' onfocus='if (this.value == "Search an artikel") {this.value ="";}' size='30' type='text' value='Search an artikel'/>
</div>
</form>
</div>
</ul>
<br class='clearit'/>
</div>
</div>
Keterangan :
- Ganti code yang berwarna orange dengan alamat URL sobat
- Ganti code yang berwarna pink dengan judul yang diinginkan
