How To Install Valid HTML5 CSE Google Search Engine

Do you have Validate HTML5 google search engine? Today in this article we are going to share How to install customized Valid HTML5 google search engine in blogger template.This is not a simple google search engine widget/gadget.And Might be you will not find this trick over the internet, there are some blogger websites who all are using this plugin but no one have ever shared.I don't know why no one has shared custom search engine embed in blogspot template.But Bloggersstand is totally different from all the blogs we love our readers and we are trying to serve best to our loyal visitors.Creating HTML5 Valid google search engine is quite difficult and not everyone knows but we have tried our best to make it as much simple as possible.We are going to make custom Validate HTML5 Cse google search engine however you can create from your adsense account but that just make widget which is most common.
We highly recommend to use HTML5 cse search engine in your blogger website or template.you can also monetize from cse google search engine after adding your adsense publisher id your ads will displayed above the search result like in google search result page.However lot's of tutorial available for custom google search engine you can find easily over the internet but they all are old and it's not that much good and you will never find much relevant search in google search gadget.For the demo of the custom HTML5 google search engine you can use our search button in navigation menu bar.Let's skip the tutorial and head towards the installation steps,So to grab Validated HTML5 Custom google search engine trick follow the steps mentioned below.

How to Create HTML5 Valid Customized Google Search Engine

Installation Steps:

Step 1. First Go to https://cse.google.com/cse/ 

Step 2. Now Login with your google id to create Custom google search engine,look below for example:

Step 3.Now Click on "New Search Engine"

Step 4. Now After Selecting new search engine ,now add which sites have to be search,Add language of your search engine and give name to your search engine and after click on create button.

Now you have successfully created custom search engine.

Step 5. Now Click On Get Code Button and copy the code snippet.

Step 6. Now go to your blogger account and Create->New Page after that copy the above code and paste in the static post page and give title example Bloggersstand Search Engine etc, you can choose title name for your search engine and publish the post and remember to copy the url of your static publish post.

Step 7. if you want to make HTML 5 valid CSE google search engine then add the following code snippet just above the code look for example below:

<div id="gcsengine"></div>
<script>
var gcseDiv = document.getElementById('gcsengine');
gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'
</script>
<script>
(function() {
var cx = 'your publisher id';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>

you can see above highlighted code we have added for HTML 5 validation, you can remove it whenever you want.so when you want to add HTML5 valid code just cope the above code and paste your published id in this code and publish it.

Step 8. Now go to your Template->Edit HTML

Step 9. Now Search for the search box in your template by using CTRL+F or CMD+F (MAC) keys.it will look like this but...

<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here..'>
<input id='searchsubmit' type='submit' value=''><span class='ico ico-mglass'/></input>
</input>
</form>

Remember it might be different in your template,you can easily find it.if not then contact us.

Step 10. Now Add the following below code snippet in the above code,You need to add in your code.

<form action='your Search page url' class='searchform'><input name='cx' type='hidden' value='partner-pub-XXXXX(Publisher Id)'/><input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari artikel...'><input id='searchsubmit' type='submit' value=''><span class='ico ico-mglass'/></input></input></form>

you can see we have added two more lines in the search box code,so add in your search form to..

Customization:

• Replace publisher id with your id
• Replace Page url with your static page url of search engine which you have made earlier in the tutorial.

How to know your publisher unique id of google cse search engine, look below for example:

Step 11. Now Save your Template..Done !