Kostum Kotak Pencarian untuk Blogger


Copy paste dimana saja kode dibawah untuk membuat kostum kotak pencarian untuk Blogger

<style>
.search-field {
 background-color: transparent;
 background-image: url(http://s5.postimg.org/4nc8nk3b7/search_icon.png);
 background-position: 5px center;
 background-repeat: no-repeat;
 background-size: 24px 24px;
 border: 2px solid transparent;
 cursor: pointer;
 height: 37px;
 margin: 3px 0;
 padding: 0 0 0 34px;
 position: relative;
 -webkit-transition: width 400ms ease, background 400ms ease;
 transition: width 400ms ease, background 400ms ease;
 width: 0;
color: #222;
font-family: Arial;
font-weight: bold;
}
.search-field:focus {
 background-color: #fff;
 border: 2px solid #c3c0ab;
 cursor: text;
 outline: 0;
 width: 230px;
</style>
<form action='/search' id='search' method='get'>
<input class='search-field' name='q' placeholder='Search...' title='Click to Search!' type='text'/>
</form>

Live demo:


Happy blogging!

3 comments

madu ndotkom delete May 27, 2014 at 10:32 PM

artistik banget bro blog ente..
Nice blog!

Maniez Mutz delete May 31, 2014 at 2:58 PM

thanks :coffee

josua tambanaung delete November 4, 2016 at 6:52 PM

wow bagus banget gan

Allowed tag: <i>...</i> <b>...</b> [img]...[/img] <youtube>...</youtube> [pre]...[/pre]

Emoticons

:) :D :coffee :( :malu :sorry :takut :ultah :traveller :sup :sup2 :toast :confused :wizard :manyun :zzz :cool :lol :cat :mad :bandit :smoking