Replace Wordpress Search Form With Google CSE and Detik Style

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

   Share on Facebook Share on Twitter Share on Google Plus

   About JackSparrow

   This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.