Membuat Widget Pencarian Di Blog

Cara Memasang Kotak Pencarian Simple Responsive - Kotak pencarian ini memudahkan pengunjung dan admin blog mereka sendiri untuk menemukan posting yang diperlukan. Blog yang tidak mempunyai kotak pencarian di sidebar, di header, atau di bab yang gampang dilihat oleh pengunjung, katakan tidak user friendly atau tidak user friendly. Perlu kalian ketahui, sejauh pengalaman aku didunia blogging ada banyak template atau theme keren untuk kita pasang di blogger yang kita miliki, namun tampilan kerennya tersebut masih belum dapat menopang kebutuhan para pengunjung blog kita.

Membuat Widget Pencarian di Blog

Saya akan sedikit menjelaskan bagaimana cara mengatasi dan menciptakan kotak pencarian (search box) keren untuk blogger. Untuk lebih jelasnya silahkan kalian pahami klarifikasi dibawah ini :

Cara menginstal Simple Search Box:

Klik Tambah Widget > pilih HTML/Javascript
Hapus Judul Widget
Kode sebagai berikut:

 <style>     #searchbox {         background: #3A4962;         padding: 2px 1px;         width: 100%;     }      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/AVvXsEhjUN315KearsZbUx3DldBKkTtGy4OcLfMer0czPNoRokHYR1aVltqKNoQftJrpcxPO0otmGz9pMHPT5XtiVXToFCrg6Ep1vEQOW2QcPs3HDAS2gIhUGdBUatOgojYnGTSnWUejIU39ltBg/s1600/search-dark.png) no-repeat 10px 6px #fff;         border-width: 2px;         border-style: solid;         border-color: #3A4962;         font: bold 12px Arial,Helvetica,Sans-serif;         color: #000;         width: 55%;         padding: 8px 15px 8px 30px;     }      #button-submit {         background: #EF5747;         border-width: 0px;         padding: 8px 0px;         width: 27%;         cursor: pointer;         font: bold 12px Arial, Helvetica;         color: #fff;         text-shadow: 0 1px 0 #555;     }      #button-submit:hover {         background: #CF000F;     }      #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>

Save

Demikian warta ihwal Membuat Widget Pencarian di Blog. Maaf kalau ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap warta ini bermanfaat.FAST DOWNLOADads| Server1 | Server2 | Server3 |