5 Script Search Box Keren dan Cara Membuatnya

Assalamualaikum Sahabat Blogger.

5 Script Search Box Keren dan Cara Membuatnya - Kotak Pencarian atau Search Box adalah perangkat penelusur informasi dari artikel blog kita yang tersedia. Hasil pencarian umumnya ditampilkan dalam bentuk daftar yang seringkali diurutkan menurut tingkat akurasi ataupun rasio pengunjung atas suatu berkas yang disebut sebagai Hits. Dan bagi anda yang telah mengganti template blog atau masih menggunakan Widget Pencarian bawaan dari blogger pastinya anda kurang puas kan dengan tampilannya .

Baca Juga : Cara Membuat Widget FansPage Facebook di Blog

Nah, maka dari itu artikel ini saya buat untuk menambah tampilan blog anda agar menjadi lebih elegan dan nyaman untuk dilihatnya. Saya sudah sediakan 5 script Search Box yang saya dapatkan dari blog Komputerdia.com . Silakan anda pilih Search Box yang menurut anda cocok dengan tampilan blog anda.

Cara Pemasangan

Tahap #1

Masuk ke Tata Letak -> Tambahkan Gadget.

Tahap #2
Pilih HTML/JavaScript -> Copy script yang sudah anda pilih.

Tahap #3

Masukkan di kolom Konten -> Simpan.

Catatan : Untuk Judul dikosongkan Saja.

Baca Juga : Cara Membuat Widget Breaking News di Blogger

Berikut adalah Script Search Box.

Search Box 1

<style> #searchbox {
  background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/s1600/search-box.png) no-repeat;
  height: 27px;
  width: 202px;
  }
  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: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
  }
  #button-submit {
    background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
  }
  #button-submit:hover {
    background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat;
  }
  #button-submit::-moz-focus-inner {
    border: 0;
  }
</style> 
<form id="searchbox" method="get" action="/search" autocomplete="off"> 
  <input name="q" type="text" size="15" placeholder="search..." /> 
  <input id="button-submit" type="submit" value="" /> 
</form>

Search Box 2

<style> #searchbox {
  background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat;
  width: 208px;
  height: 29px;
  }
  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: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
  }
  #button-submit {
    background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
  }
  #button-submit:hover {
    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
  }
  #button-submit:active {
    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
    outline: none;
  }
  #button-submit::-moz-focus-inner {
    border: 0;
  }
</style> 
<form id="searchbox" method="get" action="/search" autocomplete="off"> 
  <input name="q" type="text" size="15" placeholder="search..." /> 
  <input id="button-submit" type="submit" value="" /> 
</form>

Search Box 3

<style> #searchbox {
  width: 240px;
  }
  #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: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
    border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -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;
  }
  #searchbox input[type="text"]:focus 
  {
    background: #f7f7f7;
    border: 2px solid #f7f7f7;
    width: 200px;
    padding-left: 10px;
  }
  #button-submit{
    background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 43px;
    height: 45px;
  }
</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>

Search Box 4

<style> #searchbox {
  background: #d8d8d8;
  border: 4px solid #e8e8e8;
  padding: 20px 10px;
  width: 250px;
  }
  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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
  }
  #button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    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>

Search Box 5

<style> #searchbox 
  {
    width: 280px;
    background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/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(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
  }
  #button-submit:hover 
  {
    background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/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>

Gimana kerenkan? Hehe :)
Silakan anda pilih saja sesuai dengan selera anda masing - masing. Semoga tutorial ini berguna dan bermanfaat. Terimakasih. Wassalamu'alaikum

Penulis : MasPutro.com