Membuat Search Box Profesional Untuk Blog

Rencomputra.com - Pada kesempatan kali ini aku akan menyebarkan widget "Search Box Profesional" kepada anda dengan langkah - langkah yang sangat gampang sekalipun kita sesama newbie (Pemula).

Kegunaan Search Box adalah untuk memudahkan pengunjung untuk mencari artikel yang mereka inginkan. Search Box pada halaman web biasanya dipakai untuk memungkinkan pengguna untuk memasukkan query untuk diserahkan ke Web mesin pencari script sisi server, dia didampingi tombol pencarian untuk menyerahkan pencarian. Namun, tombol pencarian sanggup dihilangkan sebagai pengguna sanggup menekan tombol enter untuk menyerahkan pencarian, atau pencarian sanggup dikirim secara otomatis untuk menyajikan pengguna dengan hasil real-time.

MEMBUAT SEARCH BOX PROFESIONAL UNTUK BLOG

Langkah - langkanya sebagai berikut:

1. Buka [Blogger] >> [Tata Letak] >> [Tambahkan Gadget]
2. Copy Script di bawah ini kemudian pastekan di [Tambahkan Gadget] yang tadi anda buat
Style I

 <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>

Style II

 <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>

Style II

 <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>

Semoga Widget yang simpel ini sanggup membantu anda...!!!

Bagikan Artikel ini