Graphic Web Design, Computer Network, Balinese Culture

Google CSE on Static Page with Search Form Style

Google CSE (Custom Search Engine) is one of the Google facility to search your internal content on the site or blog url. With google CSE you can also find out which articles are indexed by google. Google CSE being a widget that support for those of you who want your blog or site is accepted by google adsense, although it is not an absolute thing.

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="" 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"012345678901234567890:mdrcctmncrt", {});
    var a = new;
    c.draw("cse", a);
    for (var a = {}, e ="&"), 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,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
}, !0);

Description The script code above :
  • Wait a moment... is the text message that will appear during the process of loading the search query by the user.
  • language: "en" is the language that used on the search engine
  • style : google.loader.themes.V2_DEFAULT is the style that used on the style search result by default google V2, if you already have the style, remove this!
  • 012345678901234567890:mdrcctmncrt is the unique ID of your google CSE, replace it with unique ID that you have which related to the url of your blog
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=''/>

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!

  • /2013/05/search.html is the path of search static page url on the content without sub domain your blog.
  • name='q' is a unique character to the execution of a search query (do not change!!!)
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!

Share This Article :
Related Articles


  1. This blog always updating such a interesting at the same time useful information regarding web and development related topics.
    Website Design Companies | Web Development Company

  2. Every website design and development company should provide the static web development solutions to customers.Then only they consummation the customer satisfaction.
    Web Design Company Bangalore | Responsive Web Design Services

  3. Creating static web page is very simple part in the website creation.But creating components and functionality only the tough things.
    Web Design Companies London | Website Design Companies London

  4. Great post,Thanks for providing us this great knowledge,Keep it up.
    A good blog. friv4 | games2girls | kids games online | | juegos de matar zombies | jogos do friv


Back to Top