How to Adding Functionality Google Custom Search On Search Box Blog
It is my experience over the world know the blogger. After fro looking for an explanation on how to add the functionality of Google Custom Search search box on the blog. Finally I got it from his own experience after the try and error. Understandably I was not smart and do not quite understand about HTML code.
Why do I want to add
functionality to the Google Custom Search blog search box? Because in my
opinion, with the added functionality of Google Custom Search search box on the
blog we do not change the look of the search box that provided the template
creator that does not change from the look of the blog itself. Search box that
has been provided by the template creator must have been adapted in such a way
with the feel of the template, which I think is very dear to replace it with
the default search box on the Google Search Engine. But most just add the
template creator of default blogger search function that I think less than
optimal in the search for articles or postings on our blog. So I change the
default search function blogger with Google Custom Search but does not change
the look of search boxnya.
There are several ways of
working Google Custom Search, but I'll take one any way that I think is pretty
good, so even though we are not a professional, but the search results is quite
professional and relevant to the content of our blog. I took the workings of
Google Custom Search, the search results displayed in the posting area. To demo
to add functionality to the Google Custom Search blog search box you can try a
search box on my blog.
OK ... Now we start to add
the functionality of Google Custom Search search box on the blog of course we
have to create a Google Search Engine blog of our own first.
1.
Please enter HERE
if you have not registered yet, please register first.
2. Then press the Create a Custom Search Engine.
3.
Please fill in the name for the name of your blog Custom Search Engine,
Description to describe your blog, select the language, then enter the URL of
your blog on a column Site to Search. Check the small box on the I have read and
agree to the Terms of Service. Then Next.
4.
Then enter in a new window, leave the default view style, and then click Next.
5. At
this point you already have a Google
Custom Search blog of your own.
6.
Look down a bit, look for the words Change the look and feel. click on it, then
it will go to the window like below.
7.
Select Results Only the layout. Click Save
& Get Code. Then copy the HTML code provided on the notepad on your
desktop.
8.
Then look at the left panel of Google Search Custom page again, click on the Basic
menu. It was dated in your unique ID code we were given the Google Search
Engine, copy it to notepad. scroll down a bit and make sure the Search engine
encoding on West European Latin-1 (ISO-8859-1), then Save Change.
9.
Then please login to your blog. Create a new post, or if your blog template
support please create a static page static page posts. Please give it a Title
eg Search Result or Search Results. Now copy and paste the HTML code that had
been obtained from the Google search engine on the post HTML (not on Compose).
then publish your post it. And note the URL posting the Search Result.
10. Now
go to Template >> Edit HTML
>> Procces check Expand Widget
Templates. But it would be nice Backup first blog template as a precaution
in case of editing errors.
11.
Please find the HTML code of the Search Box. Here I demonstrated my blog from
Search Box, originally code like this:
<form
action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch'
style='display:none;' value='http://yourblogname.blogspot.com'/>
<input
id='search-box'
name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
style='width:170px;border:none;padding:4px
10px; font:normal 12px
Arial;color:#7a7a7a; text-shadow: 1px 1px 1px #000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMk0GSRteFYAsMVECY0brMFI5v_BTPcv66WtbOhLyzUiEVQ5PMT4XMHhJniDM6HHkqrBliOkwBo2iAfdWwKk4ALLWY0AVFhPX8Gwoyg3jWafzV3fTasBKZSjyc3HwRyY84OoC38yWUJ70/s1600/field.gif)
no-repeat;'
type='text' value='Search...'/><input align='top'
id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidI6VWsTFTuFCytkGEXlUCCqsGVBsNB9sCp-vYDGMSJJAPav0uMvkTFJlubvjbCIleO9Imjr06G8Lr-sCMaEPq1IMicGttGHvThUeqc6L_12k1aLC-8CxYwYlBl9TbmrWNrHav9i7k6uo/s1600/btn_search.gif'
type='image'
value='Search'/>
</form>
Now replace the words red
with code like the following:
<form action='URL posting
Search Results' id='cse-search-box'>
Posting
URL Search Results please replace the URL of the post search
results that had been made previously (step no. 9).
Then writing RED
replace it with code like the following:
<input type='hidden' name='cx'
value='partner-pub-006106396690849460662:gr5szgq8de'
/>
<input type='hidden' name='cof'
value='FORID:10' />
<input type='hidden' name='ie'
value='ISO-8859-1' />
Please replace the code that blocked RED with Search engine unique ID that we can from the Google Search Custom (step no. 8).
So
overall the code will be as follows:
<form action='URL posting
Search Results' id='cse-search-box'>
<input type='hidden'
name='cx' value='partner-pub-006106396690849460662:gr5szgq8de'
/>
<input type='hidden'
name='cof' value='FORID:10' />
<input type='hidden'
name='ie' value='ISO-8859-1' />
<input id='search-box'
name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
style='width:170px;border:none; padding:4px 10px; font:normal 12px
Arial;color:#7a7a7a; text-shadow: 1px 1px 1px #000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawivr2e4CSA9ewaK4S6b7eNSjcyUuhpuzuggSH-iJSmcA2eLzbZKyOWcG8VprJFkFOk6Azjcbr3pnUHMk_pXre89DyXZCSWPFzmwh7Op6VDRT_nBiNvIstcmxpvtw2hrgRZpdHIWxZF8/s350/field2.gif)
no-repeat;' type='text' value='Search...'/><input align='top'
id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidI6VWsTFTuFCytkGEXlUCCqsGVBsNB9sCp-vYDGMSJJAPav0uMvkTFJlubvjbCIleO9Imjr06G8Lr-sCMaEPq1IMicGttGHvThUeqc6L_12k1aLC-8CxYwYlBl9TbmrWNrHav9i7k6uo/s1600/btn_search.gif'
type='image' value='search'/>
</form>
12. Now Save your template.
Well up here you've finished
adding the functionality of Google Custom Search search box on the blog.
Something like that, hopefully useful.
UPDATE 2016
For how to add Google Search Engine is the blog search box in accordance with a new look in 2016 on Google Search Engine page, please go to his tutorial update: How to Add Google Custom Search Engine InBlog Update