Cara Pasang Kotak Pencarian Keren di Blog

Cara Pasang Kotak Pencarian Keren di Blog - Cara Pasang Kotak Pencarian Keren di Blog

Mungkin kita sebagai newbie blogger kadang menemukan template yang tidak disertai dengan kotak pencarian ataupun juga bosen dengan tampilannya yang itu-itu saja. Bisa saja kita menggunakan kotak pencarian langsung dari pihak blogger yang telah disediakan.

Tapi disini saya akan berbagi informasi dengan kalian semua bagaimana Cara Pasang Kotak Pencarian Keren di Blog. Langsung saja tanpa berbasa-basi lagi kawan.

Berikut Cara Pasang Kotak Pencarian Keren di Blog :

Kotak Pencarian 1 :

1. Login dengan akun blogger anda
2. Tata Letak
3. Klik Add a Gedget
4. Klik HTML/Javascript, lalu pastekn kode dibawah ini

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px 48px 12px 12px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
width: 200px;
height: 16px;
color: #3a4449;
border: none;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPnPaTKe9-c3uY8eG7-TSOWk28iJrNVm9WFlY360_Ee2q3Prs5kYf8X6fYOXaBr2w9X81I2oMVz0FevilBeT5Hn5KYoqVPJRgNPnnjinNGovmz_kpe8xPNOELkrGjr-v6vVCq0AS9_ODI/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>

Keterangan:

Cari Artikel Disini = ganti dengan kata-kata anda
width: 200px; dan height: 16px; = ganti sesuai selera anda

Dan setelah anda pasang, Hasilnya seperti dibawah ini

Kotak Pencarian 2 :

Keterangan :

Kode yang berwarna hijau anda bisa mengggantinya dengan kode warna lain, anda bisa pilih beberapa warna yang sudah disediakan dibawah ini.

warna merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCmkg0GKypoFV3MIcYGPTeoOmgOBJeR1RQqwcdY6-4OmcBNvdN1b9iBIumewhFA-kzFXs3ny84_76Bcq80QI7svCSabn8L02j-stMBkkTOhAKL8AuxGLCvDpACn_NS94dsAJFtb8Pkbg7w/s1600/impoint.blogspot.com-red.png

warna biru :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmin5rV5wNI45LZZCLRXTspY4QdLZLjR7ZYVvKxyJXZOhobApfer2qjkkFukTpiCKuVuTIx3zPpBY_IN6l8dw9gyBfiAUYtrDdmLAOEICZ_-230UkpEkRtDeP7eWP1OjBcMnzAPnnCvQPY/s1600/impoint.blogspot.com-blue.png

warna orange :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuFfyr4VvvATPTbH-shwmIFzu5-T7ETT0LT6pjutkCgPuchDHDFtAQdBej3ZWseJfJQKMyb6qA1dp5sNTtW-z8-PC3gJjr66QFiwmvr_3Vt92mMCfRseUxvD3budP6S_gmrStNKKCIgOs/s1600/impoint.blogspot.com-orange.png

Dan setelah anda pasang, Hasilnya seperti dibawah ini

Kotak Pencarian 3 :

Keterangan :

Kode yang berwarna biru anda bisa mengggantinya dengan kode warna lain, anda bisa pilih beberapa warna yang sudah disediakan dibawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDHG3kMZ2cKhMefH3D5rYSdk9JWIFvw4E24UVDE4Zbivvhj5GwFajBRXd-oclPOgD7JRtl8phvvLdsAdzvTOalRE_BzfOT2D4udqmQVhPALgyD71FKs32HrGjfHM5ky0Aphpbtt5TvQD5/s1600/lostsector-search-box-darkgrey.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSAOaRxumjK6UiVt30eZO0gyuGHZEn1XCUYy1q4qSi1GaEVcxMlQH5Cxcn0rSMR9jdRKYTgTN7gyFca9sICTu0jf3B2PwseqZ58YDIzPe9XvJjYghj3884sBTNJFXhVP1GkRwNK7dDphP/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRrjKIgD3xacpvTO9PtWUQN-FFiAOQx-Djc2GsBBSRImiBy0jW0YsinkUmaD5KqFrCPF8fKo8b3LUErH8C5E7J5RkHH9xQonyQ0dg_eB95UOv007x80mBspOuD1mRdAKUQ3SUHvIwEDhM/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjQX3xCosbZrmI2aGki4sZHlxA3_JxnQufOrrI3l2mFptVN6iqRiBwecT5gK5fPv45Eq79J4X7vbpOPLMjwgW0Lh1tZ2Yq8VSTQ3JVWEWMMuBYnnkPgYhIoiTukgOWYHNYA1f3XEYEj5Uy/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIu7gYrPojP9BGyGuAOwL8CGuNjL9dRwXn11H8EjyxHNFiUOmnJIo_i44ympTlflVxHYRtIEUAaeISDHVqo50oePu19lEzeHnLdjEk0N2tkTHPtC5wdfWmYzkXb_pkwkzaIdIGfgWVfBX/s1600/lostsector-search-box-yellow.png

Dan setelah anda pasang, Hasilnya seperti dibawah ini

Kotak Pencarian 4 :

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVswtOZsABpHlaIe8wV8tRmAFc6Eawd1RI-UfUUgYjmpjrHA2Wy4rY3ydXoZN2ZB_6v9Hop1F4P8oXiqqd6ftfa_J7qel5ugrKq4_d4A2b3gDyTIyS5S3S-qGSP1NchCJXlYz3dUfSok9y/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Keterangan:
Silahkan ganti Search... dengan kata-kata anda

Dan setelah anda pasang, Hasilnya seperti dibawah ini