How to Add Google Custom Search in AMP Blogger Template
How to Add and Setup Google Custom Search Box in AMP Blogger Template with amp-form. amp search box, amp form, submit form in amp
How to Add and Setup Google Custom Search Box in AMP Blogger Template
One important part of a dynamic website is the Search Box. This is important to make it easier for visitors to find articles or content in a website. Google also strongly recommends the Search Box in every website.
Now, I will explain how to create a search box on the AMP page. That can be integrated with Google Custom Search. One of the benefits of Google Custom Search Engine (Google CSE) itself is that it can be monetized. So you can earn income from everyone who searches keywords in your blog.
Here I explain how to create a Search Box on Google AMP Blogger template, which is integrated with Google Custom Search.
Setup Google Custom Search
Please create Google Custom Search for your blog HERE.
Create new search engine by click New Search Engine
Fill Site to search with your blog address. Name your search engine and click Create.
To create a search box with Google CSE, you should get the custom search script code first.
In the left sidebar, select the name of the search engine you created, then click Look and Feel. For layout, select result only. Click Save and Get Code. Then you will get the code like below:
<script>
(function() {
var cx = 'partner-pub-4026188032600094:2100710169';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);})();
</script>
<gcse:searchresults-only>
</gcse:searchresults-only>*The yellow mark is your Google CSE ID.
Next is setup search box by using amp-form in AMP Blogger.
Create Search Box with Google Custom Search in AMP Blogger Template
Copy and paste this
amp-form component just above </head> in the Blogger template editor. Ignore it if you have add that code.
<script async='async' custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Then we will put the google search custom search box using amp-form. Copy the following code, and place it in the body of template. Example: blogger sidebar.
<div id='searchamp'>
<form action='https://www.google.com/cse' class='p2' method='GET' target='_top'>
<div id='search-cse'>
<input name='cx' type='hidden' value='partner-pub-4026188032600094:2100710169'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input name='q' placeholder='Search...' required='' type='search'/>
<input class='search-links' type='submit' value='Go'/>
</div>
</form>
</div>*Replace Yellow mark with your Google CSE ID.
Copy this CSS and paste between
<style amp-custom='amp-custom'> and </style>:
/*amp search box by amp-blogger.com */
#searchamp {margin:auto;text-align:center;}
#search-cse {margin:5px;}
#search-cse input, button, select, textarea {
font-size: 100%;
line-height: normal;
vertical-align: /*amp search box by amp-blogger.com */
baseline;background-color: #b7bdb7
;color: #020202;padding: 14px 20px;
margin: 8px 0;border: none;
border-radius: 4px;
cursor: pointer;
}To finish setup Google Custom Search Engine in AMP Blogger, Click SAVE.
SEE RESULT IN CODEPEN
Please note that the search results will be viewed in Google's own page. Not on our blog directly. In the near future I will create an article on how to display Google CSE search results on a static blog page..
Read more: How to Enable Image Lightbox in AMP Blogger