Search Box Keren untuk Blogger

Membuat Search Box Keren untuk Blogger - Beberapa waktu lalu saya sempat bingung memilih search box yang cocok untuk template blog saya. Naah kali ini saya akan membagikan Widget Search Box Keren untuk Blogger, dengan pilihan banyak pilihan warna pada search button. untuk demonya bisa dilihat di blog saya.

Baiklah seperti biasa tanpa banyak basa-basi langsung saja ke TKP! berikut tutorialya: 
 

1. Login ke Akun Blogger sobat masing-masing.
   
   
2. Masuk pada bagian Tata Letak.
   
   
3. Klik tambah gadget.
   
   
4. Pilih mode HTML/Javascript.
   
   
5. Masukan kode berikut:
   
   

   <style>
   #search-box {
   position: relative;
   width: 100%;
   margin: 0;
   }
   
   #search-form 
   {
   height: 40px;
   border: 1px solid #999;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background-color: #fff;
   overflow: hidden;
   }
   #search-text 
   {
   font-size: 14px;
   color: #ddd;
   border-width: 0;
   background: transparent;
   }
   
   #search-box input[type="text"]
   {
   width: 90%;
   padding: 11px 0 12px 1em;
   color: #333;
   outline: none;
   }
   
   #search-button {
   position: absolute;
   top: 0;
   right: 0;
   height: 42px;
   width: 80px;
   font-size: 14px;
   color: #fff;
   text-align: center;
   line-height: 42px;
   border-width: 0;
   background-color: #4d90fe;
   -webkit-border-radius: 0px 5px 5px 0px;
   -moz-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;
   cursor: pointer;
   }
   </style>
   
   <div id='search-box'>
   <form action='/search' id='search-form' method='get' 
   target='_top'>
   <input id='search-text' name='q' 
   placeholder='sigitseo....' type='text'/>
   <button id='search-button' 
   type='submit'><span>Search</span></button>
   </form>
   </div>

   
   nb: Ganti beberapa script sesuai keinginan anda
6. Simpan. dan Lihat hasilnya!
   
   Hasil akan tampak seperti berikut:
   
   
   
   (DEMO)
   
   Bagaimana? lumayan cantik kan? hehehehe.... okeh itu tadi tutorial mengenai widget Search Box Keren untuk Blogger. semoga bermanfaat! terimakasih.............