Menambahkan kotak pencari pada blog: lengkap keren

Menambahkan kotak pencari pada blog: lengkap  keren- memberikan kemudahan bagi pengunjung untuk bernavigasi tidak hanya dari tampilan blog yang sederhana, navigasi suatu blog menjadi faktor dasar yang harus ada pada elemen blog, navigasi tidak hanya berbentuk sebuah menu list, navigasi halaman ataupun dropdown tetapi sesuatu yang memudahkan pembaca blog dalam menemukan atau mencari artikel/postingan pada laman blog itu tersendiri, salah satunya adalah kotak pencarian, apa itu gadget kotak pencarian blog? ketika anda membuka google untuk mencari suatu informasi pasti anda akan menuliskan kata kunci pada kotak pencarian google kemudian akan tampil hasil dari kata kunci yang anda maksud sama halnya dengan kotak pencarian pada blog bedanya hanya kotak pencarian pada blog hanya menampilakan queri/ yang hanya terdapat pada blog anda. pada artikel ini saya akan memberikan beberapa gadget kotak pencarian yang sudah dimodifkasi menjadi lebih menarik dan keren


       Cara menggunakan kotak pencarian google pada blog

Keuntungan menggunakan kotak pencarian/ search pada blog

keuntungan menggunakan kotak pencarian pada blog tidak hanya menambah unsur ekstetika pada blog, melainkan dapat mempermudah pengunjung untuk mencari artikel sebelumnya pada blog anda, ataupun ada pembaca blog anda yang selalu mengikuti perkembangan artikel blog yang kemudian ingin mencari artikel sebelumnya yang pernah blog anda publish, bukankah menjadi lebih mudah ketika tinggal menulis kata kunci yang dimaksud pada kotak pencarian dari pada harus cape cape mencari satu persatu artikel yang dicari. Keuntungan lain menambahkan kotak pencarian pada blog anda yaitu menambah jumlah pageview harian dan meningkatkan pembaca untuk tetap berlama lama mencari artikel pada blog. dan menambah seo dalam hal navigasi halaman.


jika pada dasarnya gadget kotak pencarian blog hanya terlihat kaku dan kurang menarik anda dapat mengkustomisasi sendiri menjadi lebih menarik dan keren, tapi jika anda belum mengenal betul css untuk mengkustom dan tidak mau ribet, berikut saya sediakan beberapa gaya kotak pencarian yang menarik dan keren:

7 gaya kotak pencarian/search box blog

Tampilan pertama

<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/AVvXsEglG8A6O3ACn4egMPYnhRPNVQ2g7wLFdFsJPAuWgmOtGYmU8fqM4BIEhwRB96OcJd6JIFxapb6xFl7BHihlVIDXH9fwizcemyxTY1ip1lzXwQIMYXQ93tMLVPN4XHem6kn-uSUpGUpOc0G4/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>

Tampilan kedua

<style>

#search-box {

position: relative;

width: 100%;

margin: -15px 0px -20px 0;

}

#search-form{

height: 40px;

border: 1px solid #999;

border-radius: 5px;

background-color: #fff;

overflow: hidden;

}

#search-text{

font-size: 14px;

color: #ddd;

border-width: 0;

background: transparent;

}

#search-box input[type="text"]{

width: 90%;

padding: 11px 0 12px 1em;

color: #333;

outline: none;

}

#search-button {

position: absolute;

top: 0;

right: 0;

height: 42px;

width: 80px;

font-size: 14px;

color: #fff;

text-align: center;

line-height: 42px;

border-width: 0;

background-color: #4d90fe;

border-radius: 0px 5px 5px 0px;

cursor: pointer;

}

</style>



<div id='search-box'>

<form action='/search' id='search-form' method='get' target='_top'>

<input id='search-text' name='q' placeholder='Search here...' type='text'/>

<button id='search-button' type='submit'><span>Search</span></button>

</form>

</div>

Tampilan ketiga 

<style>

#searchbox {

background: url(http://2.bp.blogspot.com/-Un3zhkw1XA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO-wtTd_DvznEL81fn2TL7Uokckfbc8U3fheA0JacAi08klWy-xteFuZSE53-A4Ik7tVojIczVZ2SaE-kK1Nw_KQN_wFdfIqHGj-a9IT8UPiKc0KuYGkMyl7QVE-GuV-pc1sRqDrkQQKW6/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr9IS-129oWoMGivi0JJuPhMwXLOlYWGVOsIsyFfjcBBe8LLjIEpJxAp4l_l0rIm7dAHIXYLUelUp63qa7r0iiR4tFgtbzelVZncSOz2Dzogx06j6tXSTpiD-EgekGVwNcR5e4GtXwpp-8/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>

Tampilan keempat

<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/AVvXsEglG8A6O3ACn4egMPYnhRPNVQ2g7wLFdFsJPAuWgmOtGYmU8fqM4BIEhwRB96OcJd6JIFxapb6xFl7BHihlVIDXH9fwizcemyxTY1ip1lzXwQIMYXQ93tMLVPN4XHem6kn-uSUpGUpOc0G4/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;

border-radius: 5px 0px 0px 5px;

text-shadow: 0 2px 3px #fff;

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

Tampilan kelima

<style>

#searchbox {

width: 280px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7RAib8zLZNI6sU1TsJnWQGvi4DBqOFapx6jkQZfFKi8IWIwRf35ko1g6B-jTz1BwkLDJpzBY9oRl7ElDLDBJZjE0W-qmK7bMUt7193sAeiUBaDT1dIWJvAtAv5-IIkBaKo6u-RWUjGxo_/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/AVvXsEhpQT0iA9JR03NSYrpL8UvI1OU04ygZ9lRSOr2DpuxS6soLIcwQBCPTGeLAQr_PYR7wANybjq9UZ6kx3A1l7EOhbqBylOO9lZhBEbGzgtgnZ4Y4uWF7AvpuCEIyW-cMYpgiSe4zazbF3ZFA/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/AVvXsEgZs2SlSZl3Ib26HD0LkJegA27FexFCuda88M3g5jIgN6ia0hFvO43Xswt4CwJbrjDnfwMGG37y9s60La7hRQrSR8R8jmtS5nlj0Xst8qR-3apSfRgW-N64vgghVaUG6wILZnsYLCJLwjUL/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>

Tampilan keenam

<style>

#search-box {

    border: 1px solid #d2d2d2;

    background: none repeat scroll 0 0 #FFFFFF;

    padding: 10px;

    width: 186px;

}

#search-button {

    background: none repeat scroll 0 0 #359BED;

    border: 0 none;

    border-radius: 0 0 0 0;

    color: #FFFFFF;

    font-weight: 700;

    padding: 10px 20px;

}



</style>

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="40" type="text" placeholder="  Type to search "/>

<input id="search-button" value="Search" type="submit"/>

</form>

Cara menambahkan pada blog

1. pilih salah satu tampilan yang anda suka kemudian copy paste ke layout >>add a gadget>> html javascipt