Latest News

5 Widget Search Box Dengan CSS Bootstrap Keren Di Blogspot - Search Button

Search box atau search button sangat penting di blog/situs anda. Karena memiliki fungsi yang penting bagi pengunjung blog. Apa fungsi dan manfaat dari search button di blog? Search box/search button membantu pengunjung dalam mencari dan mengindex artikel yang ada disitus kita. Sarch box biasanya sudah ada satu paket dengan navigasi blog.

Kali ini aku akan membagikan tutorial cara membuat widget search box atau search button. Widget ni dibuat dengan css design yang keren,html,dan bootstrap. Dengan begitu search box akan tampil dengan keren. Anda mampu mengubah style css sesuai dengan harapan anda.

Search box ini mampu anda letakkan ditempat dimana pengujung mampu melihatnya sehingga mampu menemukan artikel yang dicari dengan pinjaman search box. Dengan begitu pembaca blog mampu menemukan kata/frase yang mereka caari di blog.

Ada 5 style search box yang akan aku bagikan. Yang tentunya sangatlah keren jikalau ditampilkan di blog. Untuk cara membuatnya sangat mudah dan sederhana. Berikut ini demo style search box yang mampu anda pilih.

5 Cara Membuat Widget Search Box Keren Di Blogger

Itu beliau kelima style widget search box yang mampu anda pakai,apa anda sudah memilih style mana yang mau dipakai? Langsung saja berikut langkah membuatnya:

Cara Membuat Widget Search Box

#1. Silakan masuk ke blogger, pilih Tata Letak 

#2. Buat widget gres dengan klik Tambahkan Gadget → HTML/JavaScript

#3. Lalu silakan masukkan isyarat HTML CSS berikut kedalam widget gres sesuai dengan style search box yang anda pilih.

Style 1

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

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

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

Style 4

 <style>     #searchbox {         background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;         width: 250px;         height: 65px;     }      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;         padding: 5px 0px 5px 20px;         margin: 10px 15px 0px 0px;         border-width: 0px;         font-family: "Brush Script MT", cursive;         font-size: 12px;         color: #595959;         width: 65%;         font-weight: bold;         display: inline-table;         vertical-align: top;     }      #button-submit {         background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;         border-width: 0px;         cursor: pointer;         margin-top: 10px;         width: 19px;         height: 25px;     }      #button-submit:hover {         background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;     }      #button-submit:active {         background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/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 class="textarea" name="q" type="text" size="15" placeholder="Search here..." />         <input id="button-submit" type="submit" value="" />     </form> 

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

Lalu klik simpan.

Selesai. Gimana cantik bukan style search boxnya. Anda mampu mengotak-atik kodekode tersebut sehingga menghasilkan style search box yang baru. Itulah tutorial cara membuat widget search box keren di blogger. Semoga bermanfaat.