6 Search Box Keren Untuk Blogger

6 Search Box Keren Untuk Blogger

Kegiatan mencari merupakan hal yang tak akan bisa dilepaskan dalam kehidupan setiap orang, sama halnya dengan kehidupan di dunia maya, setiap detiknya mesin pencari seperti google tak berhenti digunakan oleh para netizen. Begitu juga dengan blog, saya yakin teman-teman blogger pasti sudah tidak asing lagi dengan yang namanya kotak pencari / search box. Karena kebanyakan blog sendiri sudah memiliki tool ini pada sidebar, menu navigasi, ataupun di footernya, tergantung pada selera masing-masing pemilik blog. Namun yang saya akan share kali ini bukan search box biasa pada umumnya, melainkan cool search box atau kotak pencari yang sangat KEREN.

Secara umum, search box atau kotak pencari pada blog merupakan sebuah tool yang disediakan oleh pemilik blog atau situs untuk pengunjung dalam mencari data-data di dalam blog tersebut. Pengunjung dapat mengetik kata atau kata kunci pada kotak pencari tersebut, lalu nanti kotak pencari akan bekerja untuk mencari suatu konten atau posting atau artikel dalam blog tersebut.

Sangat mempermudah pengunjung blog bukan? Jadi jangan lewatkan kesempatan memasang search box ini dalam blog anda. Supaya pengunjung semakin betah berlama-lama di dalam blog anda.

Bagi anda yang ingin membuat dan measang kotak pencari/ serch box, maka kali ini saya akan share 6 model kotak pencari keren / cool search box beserta cara memasangnya ke dalam blog anda. Pilih salah satu untuk blog atau situs kesayangan anda.


6 Kotak Pencari Keren (Cool Search Box) Pada Blogger

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXCY-sBafmQ9wASjqROgoO19ZlwG1HflhGbgHrmFdbGNRIcbHDfkHSOQcEit5NihcsJB0urv-sTFliNihfWcfdntK5eK_3LlOrEwfJ7_pID6upgUPzxnwPm5xOI21_HEnxW8fHLrCIH_U/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>

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXCY-sBafmQ9wASjqROgoO19ZlwG1HflhGbgHrmFdbGNRIcbHDfkHSOQcEit5NihcsJB0urv-sTFliNihfWcfdntK5eK_3LlOrEwfJ7_pID6upgUPzxnwPm5xOI21_HEnxW8fHLrCIH_U/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqgLgZVJrea3PTA8VkEBeSHb7fFKGjsxDeI36hWlN5kuTO9GjsFdk53Rs3dt4ewI9yPE6VfoqzUbBGDSgrvDfl72KfTdYpRSng74wiJQ9ABAbzhZvWNLpQ5HNpxCVWsNQGfv0hpiCjHMI/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>

#3

<style>
#searchbox {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMESzcgCub2lGgxH9D11yeWelWWGNOQn_y1y0obMK7oe9qI_E53_XgVGQp6RVuhlXcmfgHeGnR706uhOlOeEb92XWkXsHhFm9yHcVvzQ4L3_ypfYtaCEgQQgf3qkQkr6EaJtyIead0YL8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gWv9rVx35o7GYzt9Z35_5xm0V8XpPVke4SZcPD4KxXNtOTleYdftCTIhUItj-E9m61Qujv-s2BPwhs5FGB4dK-P8_NH9nlqP_DXY15hSsIQ1_tAc_U1zXsNrVg95UYI0-ix6VSM9lbWe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-4AY0DSqD6y1yeHJ9Jf0qHf_y5qTuwltTjQIgTiJF8O9hCX0P5fnkOLsusASe2tUP_xNWncd9WOd52WDpIb6BSDGiSSb0urdKswDJnUXI2IgnNwBo7lZCHBTvbn_rYvaDDyziZT3rQrQ/s1600/magnifier-hover.png) no-repeat}
#button-submit:active{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-4AY0DSqD6y1yeHJ9Jf0qHf_y5qTuwltTjQIgTiJF8O9hCX0P5fnkOLsusASe2tUP_xNWncd9WOd52WDpIb6BSDGiSSb0urdKswDJnUXI2IgnNwBo7lZCHBTvbn_rYvaDDyziZT3rQrQ/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>

#4

<style>
#searchbox{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLxclUwwRjZrYmRY7HFMDm6rbAYgU1poNqt_1L5bmlXC3Smz8qn1c7U_Q6J4WQf87aUxHOJnoipX6QWcGGslHOefvaG8VJpKhhwvxwe97oQuDlpoGbOEjWhh3APrXt-q9vEjDPyLEljHr/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigKtlePwAjP4IMbG-9WdEOS4tweedBx2X3BjoRla7HYH8_pA3OqVsOfkDms4O5lDKjJQFJvV3_zDYulGjlId8HwlsZLoDHAOeLsXWv09C4sh7y_4ga57VI_F9zyDw-Vp2iXIyFu7PfxhPo/s1600/search-button.png) no-repeat;     border-width:0px;     cursor:pointer;     width:30px;     height:25px}
#button-submit:hover{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizSLM-CVebYrElcsAk_WwfEVGr1Fl7sI4-i5jiCpG1jAfJMtlO3r0ktGNYlxyxcIW4xfEcThaQkEnNXS_muPSY0_VZBZ8WCFzfW_2Z8wxrHd6pd8HhD7zAJgdpC0OOHJhNTAE7_Ahe-9a/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>

#5

<style>
#searchbox{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-EsomtnH-iBCp1mNULpbwUEugYnxHn-33Zsr9UQ_Ii9Ac4v7U1DgdDwOAvPj-psdU0zL9JrTk_x4NHWSJpcpV7JSxmF7T78slWE6AoQvtB5Rufu48ngf13GnYLh6B8qctGalwHh0VJUaM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSi1gQcwOEzID4dhAxXegfVQx6Oaw9Bfje5WWeIzOjU0hq0KrAurnFkKB2-BZrKl5CrKWBKo6A1fZ9R324Pmcr3AJpCWOArm3pCOqM8XC27I3TyqP9cUr_Ji_6GDXsY9LYgTKk-moM-yEb/s1600/magnifier.png) no-repeat;     border-width:0px;     cursor:pointer;     margin-top:10px;     width:19px;     height:25px}
#button-submit:hover{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF_qMxN_NcIS6kK_7Fyg8gfD-3wq6UB1KlPCqH_p1KcXZouF75p65_-OpDbLLuZ3PwJFsylRhRip_tO0Dzb-WT0OzurpEbHmfhO921zuyf27bO-2o6sx8RIo_P4fkxCaKm7kNnJtyXB9Q/s1600/magnifier-hover.png) no-repeat}
#button-submit:active{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF_qMxN_NcIS6kK_7Fyg8gfD-3wq6UB1KlPCqH_p1KcXZouF75p65_-OpDbLLuZ3PwJFsylRhRip_tO0Dzb-WT0OzurpEbHmfhO921zuyf27bO-2o6sx8RIo_P4fkxCaKm7kNnJtyXB9Q/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>

#6

<style>
#searchbox{width:280px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG69qUUZGL_tmS7fqIHgmPZU0GLdqiavAiOnV3sYuUk7crdAX3gwV-5NYzjsuPTV3d2UFf9Ib7l-FLBTAaKdr5liqjE1GRkH0SZLgt3PSLeSEYPIYVueeVCuRA-eF0UbRTKQN_M5V1X1tX/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXqxA8bL_eDMaJnUQjourLYxQqZQbmE6FUqsGi6riULGOaDlhLqle4F_SStI8rOnQDHLH1faOdK9u7Ifo71PS9dSe-Rf6k68KO7JQ4BLUq5PSk-NqAL33DEPrYvGkKKpebSdfTFhxIbX3/s1600/search-icon.png) no-repeat; margin-left:-40px; border-width:0px; width:40px; height:50px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChkOLVYyLsj-IMAQjhO-KAIJ0X6T6K2Sc8ULVoKC1eHGjzPGRPPuc46OQicKVv5nYeh3Loklh4UIye8rGLXPo0Bfbpoed9Kc-eQn7U9bI8Vm0MOIusWuzMv-4LfpCwQIsu1ditEPqjVC2/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>

Cara Memasang Search Box atau kotak pencari pada Blogger

1. Login ke Blogger. Klik pada tab Layout  ->  Lalu klik pada Add a Gadget.

2. Pilih HTML/Java script

3. Masukkan atau paste kode kotak pencari / search box pilihan anda yang ada diatas kedalam kotak HTML/JavaScript  >  klik Save.

4. Selesai. Dan lihat hasilnya

Keren-keren bukan search box nya? :) Silahkan tentukan kotak pencari pilihan untuk blog kesayangan anda.

Demikian dulu ulasan artikel mengenai 6 Search Box Keren Untuk Blogger dan tutorial cara memasangnya. Bila ada pertanyaan silahkan beri komentar ya. 6 Search Box Keren Untuk Blogger

Artikel Terkait

6 Search Box Keren Untuk Blogger

4/ 5

Oleh Unknown

Unknown 16:38 Komentar