How to Add Google Custom Search Engine ( CSE ) In Blog (Update)

Actually I've never made a tutorial how to add the functionality of Google Search Engine or Google Custom Search blog. However, because at that time the tutorial was made in 2015, then of course the steps of manufacture is not in accordance with the GSE see today.

For now I've made the update tutorial, to avoid confusion for those who want to try adding a GSE in the search box that already exists in your blog.

The first step

Please you enter HEREand please log in with your Google account.

Step two

Please click the "Add" to start making Google Search Engine for your blog.

Third step

Then on pages available please add your blog URL without the "http" as written in the example. Then choose a name for your blog Search Engine in the box below, then please click on the button "Create".

Step four

Then on the next page, please click the "Control Panel"

Fifth step

On the next page on the "Setup" please click the button "Search engine ID" and please copy your blog search engine ID to the notepad. After that please click the "Advanced" and select "West European Latin-1 (ISO-8859-1)" the option "Search engines encoding".

Step six

Please click menu "Look And Feel" at the top left and the option "Layout" please select the "Results only" then click the "Save & Get Code"

Step seven

On the next page please copy the code provided and simply create a new post on Page Static (Static pages) of your blog and paste the code in the HTML editor, please give the title of the page, for example "Your Blog Search Results" and then publish the post and note the URL static posts.

Step eight

In this step we will embed the Google search engine in the search box that already exists in our blog. As an example I will use a search box that resembles a Google search box on the tutorial ago.

HTML code of the search box that looks like this

</button>

</form>

</div>

Note the code below

Please replace the code above to be like below

Please replace the URL posting STATIC IN STEP SEVEN with a static page URL to Search Results that you created in step seven earlier.

Then add the following code after the code before

Please replace the CODE SEARCH ENGINE OF STEP FIVE ID code search engine ID that you get from the fifth step above.

Then complete after changes and additions, the appearance of the HTML code of the search box at the top would be like below.

</button>

</form>

</div>

Done ... until here we are already embedded Google Search Engine search box on the blog.

You could also try some of the themes to see search results that you can select the menu "Look And Feel" as in the sixth step. Selahkan select a theme and then "Save". To see the themes we choose please look on our blog search results. Please do searching on our blog to get its search results. If you want to try other themes simply choose again on the "Look And Feel" in the Google search engine page and then "Save" then please refresh the search results page to see the changes. Do it like that to try other themes. You can also customize the search results to see her on the option "Customize" in the "Look And Feel"

After making some changes in the menu "Look And Feel", you only need to "Save" does not have to do a "Save And Get Code" and then refresh the search results page to see the changes.

Here too there is often a case of see results percariannya into squares with a border. That's because there is the CSS code for a table with a border in your HTML template. Please set the conditional tag for the results page percariannya by eliminating border on the table like the following example to example conditionalnya tag:

<b:if cond='data:blog.url == "STATIC posting URL TO SEARCH RESULTS"'>

table {border:0}

</style>

</b:if>

In the conditional tag above you also can make CSS to widen the search results page to full page by eliminating some other elements eg a static page width sidebar if your blog is not full pages.

Just a suggestion for you

If you have an Adsense account, then you can integrate your adsense on Google Custom Search Engine on your blog menu Setup >> Making Money, please start your homework adsense how to connect you with your Search Engine blog on the link provided there. Or just read the post I link Adsense with the Google Custom Search blog HERE.