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




Previous
Next Post »