Almost all blogger templates have a default search forum embedded on them. Now, google has implemented a feature where you can add a google search engine on your blogger blog and display ads on the search results within your blog. A problem I encountered before is how to implement it on blogspot blog. I did some searching and found nothing so I decided to do trial and error. Luckily, I was able to implement it on this blog.
And now, I will teach you guys how to do it.
Before starting, I would like to emphasize that this method is for blogger templates that has a default search engine only! Also note that if you are using custom comments like disqus, the search results will appear twice.
Preparations
1. Sign in to Blogger.
2. Choose a blog and create a New Post
3. Title the post Search Results and click Publish. This is where your search results will be displayed.
Making The Google Custom Search Engine
1. Sign in to your google adsense account.
2. Click Adsense Setup
3. Click on Adsense for Search
4. Now, fill the forms.
Tip: On the search type, choose Only sites I select and on the Selected sites, type in your blog url. This tip is useful so that the search engine will only search the topics that belongs to your blog.
5. When you fill out the necessary informations, click Continue
6. Choose the style of your search form.
Type in the length of your search form. You can leave it to just 31 though.
7. Click Continue
8. Choose open results within my own site then enter the URL of the Search Results blog post you created earlier. Then change the 800px to 500px so that the results' width is not too big..
9. Change the Ad Location to Top and Bottom
10. Change the palette of your ads.
11. Click Continue.
12. Name your search engine and click Submit and Get Code. You can put any name you want as it won't appear on the search results.
13. Follow the next step below.
Implementing The Search Engine
1. Copy the codes below the Search Box Code
2. On the blogger window, go to Layout >> Edit HTML and check Expand Widget Templates
3. Find(CTRL+F) form action
Usually, on almost custom blogger templates you will these codes:
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
4. Now, change the code above with the codes on number 1.
5. Click Save Template
6. Now, go to your dashboard and click Edit Posts
7. Edit the "Search Results" post you made earlier.
8. Go to Edit HTML tab.
9. Go to the google adsense window, copy the Search Results Code
10. Click on the blogger window and paste the code on Edit HTML tab where you are editing the Search Results post.
11. Click Publish Post.
And you're done, view your blow, test the search and adjust the designs of your search engine.
