Kotak Pencarian Responsive Simple Keren untuk Blogger

KODE Kotak Pencarian (Search Box) Simple Keren untuk Blogger

Ini Kode Kotak Pencarian Simple Keren untuk Blogger. Demonya ada di sidebar dan di bawah posting ini. Kotak Pencarian wajib untuk memudahkan pengunjung mencari tulisan yang dibutuhkan.

Ini penampakan Kotak Pencarian Responsive Simple Keren untuk Blogger.

<style>
#searchbox {
    padding: 0;
    width: 100%;
    margin: 0 auto;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZAOyEgGfM5w6tizLId-Z_eDWf1FF_icZxUnRGor6jRdzoq1IMA-1XJOlEcgyuH-hB7kI4r_uWEp3nWJeWXGTcqSO5dpcPC6VW2MdsmtHEjGc3bX9FxyTRKEdtEgRrC7BtFKYrZBhFyiE9/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;}
#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 10px 0;
    width: 25%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #5b5d60;
    outline: none;}
#button-submit::-moz-focus-inner {
    border: 0;}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

LIVE DEMO