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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6W4nmOYDIQhyphenhyphenDI1Z48Gz0ZbVb7pZXjio2N-MDwmKTNyYfqkdzrv9rIA9FsgHArY-WQtpm_m5h9XBwcfAY4NAZvO40ZKQznxW__zPoeM_5-h9czWEsAR7oWj6T_OJxm8W5hl-OGpanVU/s24/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>

Klik gambar dibawah untuk live demo:

Happy blogging!

Judul: Kostum Kotak Pencarian untuk Blogger; Ditulis oleh Unknown; Rating Blog: 5 dari 5