Wordpress Style Search Widget Untuk Blogger

Saya tidak suka Wordpress begitu banyak tapi hal yang saya suka di Wordpress ada style. Meraka menggunakan Css dan html dengan cara yang sempurna dimana pengguna tidak perlu mengedit blog ada begitu banyak.

Hari ini saya akan mengajarkan Anda bagaimana untuk menambahkan efek tampan melayang-layang kotak pencarian css ke blogger.

Untuk Tambahkan Kotak Pencarian ini di blog anda ikuti langkah-langkah di bawah ini-

•      Pergi ke dashboard blogger.

•      Klik pada tombol tata letak.

•      Sekarang ada Tambah Gadget.

•      Pilih html / Javascript dan paste kode berikut di sana.  

<style>
#search {
}
#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }
</style>
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form><br/>