How to add Google Adsense Custom Search on Blogger/Blogspot
In this post, I'm going to share how you can add Adsense Google Custom Search on Blogger/Blogspot. If you want to maximize your Google Adsense this step is a must .
Below is summary what we will be doing throughout this tutorial
Steps
1. Create Google Custom Search from your Adsense account
2. Create new empty landing page on your Blogger/Blogspot .
3. Generate Google html code from Adsense page and paste into your landing page
4. Add Google search box in your Blogger/Blogspot
5. Re adjust your Blogger/Blogspot layout width .
Steps
------
1. Create Google Custom Search from your Adsense account
1.1 Login to "Adsense account > My Ads > Search >New custom search engine"
Adding new custom search |
1.2 Fill in the form
Adding New Custom Search |
2. Create new empty landing page on your Blogger/Blogspot .
2.1 Create a new empty page as a landing page and name it as "search result" . Select an older date so that it will publish as an old post . I choose a date before I start post anything.
Creating a new post |
2.2 On the Options, click "Don't allow" for reader comments. and click "Publish" .
Disable Reader comment on your result page |
3.1 Fill in the box for your landing page URL on Adsense Google Custom page .
"Click Save and get code"
Saving landing page URL |
3.2 It will direct to the Search Box Code page. "Copy search result code and paste into your landing page HTML search result page".
Copy search result code |
paste into your page HTML code |
3.3 "Copy Popular Queries code and past it again in search result HTML page"
Copy Popular queries code |
Paste into your HTML search result |
3.4 Don't forget to save the page and "Publish" it :-)
4. Add Google search box in your Blogger/Blogspot .
4.1 Go to "Layout >Add Gadget>HTML/Javascript"
Adding Google Search box |
4.2 "Copy Search box code and paste it in the Blogger HTML/Javascript "
Copy HTML Search boxcode |
Paste in HTML/Javascript |
4.3 Test it . Go to your site and use the search box . Search for anything . See how does the return result page turn out . If you have overlay problem as below,continue reading . :-)
Return Result overlay on return result page |
5. Re adjust your Blogger/Blogspot template layout width .
5.1 Go to "Template >Customise "
Adjusting template width |
5.2 . Adjust and test until you satisfied with the result. My site
Final result |
Read Previous : How to make Adsense work with new Blogger/Blogspot custom domain