How to Adding Functionality Google Custom Search On Search Box Blog
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 HEREif 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/AVvXsEgr79C0xXdSPNWgHzTOTmxWFe31oefiOeOWbHP_YK5j72hjLAJlcbafy5uvjkjiDBrz8jYZsnImbl3clyJHA0EeHDUquhP8uGzYfxA94OlUD_bv8acFnMAAVoJWXnw5P9tnKtaWEHUIhoA/s1600/field.gif) no-repeat;' type='text' value='Search...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTSXMj5H5sBOINEEY2uXTlWqGUui1CCrh6bh8QKiEQ96O26ys53Tm67v37WUJ1tAEMnbV4LCKMt3dskC92ZTDBnMMd_h-a5wN9qG3IdDagfmd7rzL1vKfLwS6STg2T9U7bHNFl44NIag/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 REDreplace 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/AVvXsEgy4u9g1NELmEW0wsTvHbHVjoZYA5hTsAtuV8cuYaUZICyz4apzDIbCpIDOM0podj9lmQqik73s3u8bs4KT1WEbUgWdYcZQg9gB9FGZ077wakvWwoJH8QGbQ7mcObLVEkKZOuPdMhDKgXQ/s350/field2.gif) no-repeat;' type='text' value='Search...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTSXMj5H5sBOINEEY2uXTlWqGUui1CCrh6bh8QKiEQ96O26ys53Tm67v37WUJ1tAEMnbV4LCKMt3dskC92ZTDBnMMd_h-a5wN9qG3IdDagfmd7rzL1vKfLwS6STg2T9U7bHNFl44NIag/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
0 Response to "How to Adding Functionality Google Custom Search On Search Box Blog"
Post a Comment