Google CSE on Static Page with Search Form Style

Therefore, on this time, I will explain to you how to implement the Google CSE on search static page of a blog with the search form style that was created by yourself, especially for you who are create the blog template by Artisteer 4.

First we have to get the google CSE code for your blog. Go to google CSE and sign in using your google account. Enter the blog url, select the language that you are using and then click the create button. Look at the picture below!

In this step you have been created google CSE. In order to get the CSE Code, press Get Code button, then you will find the script code for the blog url that you enter. The Script code on the picture below have ready to be placed right now on blog sidebar as the new gadget of your blog. But there are something less and looks not so suitable about Search Form/Search Box that was displayed on my blog by default, i don't like that. It looks better if using Search Form that created by artisteer 4 or if you have style of Search Form on your template. That's mean i have to change the form input of  Search Form on blog, don't you?


Now we shall make how the search results of the google CSE being the content of our blog. You have to create a new article post with the title Search or whatever you want to give the name. The new article post being the search static page that will be used to display the search result when someone typing search query on the search form. The static page will always change when someone was typing something on the search form of your blog. For you need to insert the script code that was with the google CSE with the character of the blog script code. Let's see the script code below!

<div id="cse" style="width: 100%;">Wait a moment...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
google.load("search", "1", {
 language: "en",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);
//]]></script>

Description The script code above :
Once you adjust the forth point above, then place the script code as the post content, this going to be the search engine to the static page, surely you must paste it in the html script code of the post as shown like the picture below! From here you have been created the place where the result of search query put in on your blog.


Now we shall use Search Form style that you have used on  the template of  yours. Such as for those of you who want to use Artisteer templates as the template blog. Find script code  form input on the html template like the script below.

<form action='/2013/05/search.html' class='art-search' name='Search'>
    <input autocomplete='off' name='q' type='text' value=''/>
    <input class='art-search-button' name='search-button' type='submit' value=''/>
</form>

The script code above will be there if you've made ​​a search form on your blog template. If you not find that's mean you no have ready created search form yet. If you use Artisteer 4 that was easy for you to create and put the search form in some other place on your template, and no need to create a new gadget again. Because Artisteer 4 is ready available for search form style when you make the template. Change the green color as the path of the url of the search static page that was created. Let's see the picture below!

If you already finish save the html of your blog template. See the results on your blog by typing any keyword on the search from about an article there was any on the content of your blog. For more details, let's see the article video!