Cara Membuat Custom Search Gadget di Blogger

Cara untuk menambahkan Custom Search pada blogger:
1. Login ke blogger, pergi ke menu Layout > klik "add a gadget"
2. Pilih HTML/Javascript pada pop-up window > paste kode dari Custom search
3. Save.

Ini dia kodenya:

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQppxW6D3EYQxf7ABK3Z7ErJtjFDVV3Ev1gwF83P0KogXWwxsg8x6R5t7ibwSIKe_6vhkbVFOstbGmxrpNdXYLjXEpkPfjh_eM3_CGdJIf0PgaD5Pbyk7V8khOJCS55BottqFVsxvNaSFl/s1600/search-box.png) no-repeat;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsG9YSaKlD2MGztWEone_0pcHYOhFMhh_XBvGL0F8nu_IOwCvmjnGGPC6g5T0Lf_i6DzWRt5ViS5nyWpWTUVVk5zeBi1kIcl9xOm_tVF_4nqmCAr4Y9JhisiO12GhP-sfJ17rMeSKHFg5o/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcTDxW3g3cRndk0IaHYAIslaaWBfm98Dc34lAvi9zI6g-aF1qDk-TjNhCNQ3dEG5a5LOwAFkKjW3EuD2ZD-b51WjyAFsnsuE_UPspVGAViydNrN2Pw87tQgLfNHeo6I37vgP4-LugZvUZ/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

source: http://helplogger.blogspot.co.id/2014/10/6-custom-search-boxes--for-blogger.html