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 HERE and 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
<div id='search'>
<form id='searchform'
action='/search' method='get' target='_blank'>
<input id='search-form'
name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='''
type='text' value='Search here ...'/>
<button type='submit'
class='search-button' title='Search'><img alt='search button' height='21'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbuSKvxFftqqIO83A6RhgISPHG0hXuJyxnjdpJtn0mfO3k1hVi-wssKrOH7DuqpHtsEX-pyo_0KaVWTH5Jd-PUH8uthHM5-LvxRuWQjaLYWrcpXAJqhWgn6YvU48fX-pFgy1Pe87Azp-W/s1600/search.png'
title='Search' width='21'/>
</button>
</form>
</div>
Note the code below
<form id='searchform'
action='/search' method='get' target='_blank'>
Please replace the code
above to be like below
<form id='searchform'
action=' Url
posting STATIC IN STEP SEVEN ' target='_blank'>
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
<input type='hidden'
name='cx' value='partner-pub-SEARCH
ENGINE ID CODE OF STEP FIVE ' />
<input type='hidden'
name='cof' value='FORID:10' />
<input type='hidden'
name='ie' value='ISO-8859-1' />
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.
<div id='search'>
<form id='searchform'
action=' Url
posting STATIC IN STEP SEVEN ' target='_blank'>
<input type='hidden'
name='cx' value='partner-pub-SEARCH
ENGINE ID CODE OF STEP FIVE ' />
<input type='hidden'
name='cof' value='FORID:10' />
<input type='hidden'
name='ie' value='ISO-8859-1' />
<input id='search-form'
name='q' onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='''
type='text' value='Search here ...'/>
<button type='submit'
class='search-button' title='Search'><img alt='search button' height='21'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbuSKvxFftqqIO83A6RhgISPHG0hXuJyxnjdpJtn0mfO3k1hVi-wssKrOH7DuqpHtsEX-pyo_0KaVWTH5Jd-PUH8uthHM5-LvxRuWQjaLYWrcpXAJqhWgn6YvU48fX-pFgy1Pe87Azp-W/s1600/search.png'
title='Search' width='21'/>
</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"'>
<style
type='text/css'>
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.