With these simple steps, we well create a search bar that using google cse and stylized.

1. go to google.com/cse and create your custom search engine
2. add you site, don`t forget to add * sign to make google cse aearch  on your site fully. so it wouold be http://yoursite.com/*
3. Next step Get Code, you just take cx code. see Var cx

this Var CX code will be used further.

Now, save this css on your style.css


/* search dari detik */

.dtksearch {
background: #ffffff;
padding: 2px;
text-align: center;
height: 27px;
}
.search_detik {
padding-top: 3px;
margin: auto;
}
.search_detik .input {
background: 0;
font-size: 13px;
font-family: Arial,Helvetica,sans-serif;
background: 0;
border: 0;
width: 85%;
color: #666;
clear: none;
height: 21px;
padding-left: 10px;
float: left;
}
.search_detik form {
width: 280px;
height: 23px;
width: 95%;
background: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
margin: auto;
-moz-box-shadow: inset 0 0 5px #999;
-webkit-box-shadow: inset 0 0 5px #999;
box-shadow: inset 0 0 5px #999;
}
.search_detik .btn {
width: 28px;
height: 23px;
background: 0;
border: 0;
cursor: pointer;
float: right;
background: url(http://posmetrobatam.com/wp-content/themes/menit/images/icons/search.png) no-repeat left center;
}
.search_detik .btn:hover { opacity: .50 };

Now, Final step, open header.php or whatever page template  that will display this customized search bar. in mine, i placed it on header.php. so i opened header.php

Paste this code











Now, Custumize it, Change :

  1. YOUR_CSE_CODE_HERE with Your Var CX on step 3 above
  2. YOUR_SEARCH_TEXT_HERE with your style, ex. “search on my site”
  3. If want to limit size of search form width, just add width element on .dtksearch  after height: 27px;
    like this

    dtksearch {
    background: #ffffff;
    padding: 2px;
    text-align: center;
    height: 27px;
    width:400px;
    }