A search box was mandatory for any website in this age which help visitor to easily explore the website for their favorable content. Every blog provider like WordPress and Blogger know this exact where they put a search box widget for their blogger.
In the blog monetization era, where blogger may find Google AdSense is one of the best way to monetize blog for any bloggers one can easily add Text Ads, Link Ads, Images Ads or Search Box Ads.
Why we want to put AdSense for Search in our blog? There is two good reason for doing this:
To achieve the goal, we require to setup AdSense for Search to blend our web themes or template and to show its search result within our webpage.
Below I will show the step by step on how to setup Google AdSense for Search to blend your website template and show its search result within your own webpage.
 |
| Step 1. Setup custom search engine in your AdSense account |
 |
| Step 2. Give your custom search engine its information, if you use this search engine in your web, you need to make sure that you select " Only site I select" and add your web address in the text field available, including the http:// |
 |
| Step 3. Make a channels for your AdSense for Search. This channel will help AdWord Advertiser to find and exact and targeted Ads. This will give your Search Box a chance to show more relevant Ads for targeted visitor. |
 |
| Step 4. In order to blend your AdSense for Search Ads, you need to find out your web coloring style. Few thing require for this step is to find exact hex color code for post title, link url and visited url. You can find this in your stylesheet or directly in your browser by right click in an article title with link using inspect element module where available in Mozilla Firefox and Google Chrome. |
 |
| Step 5. Blend your Search Box text style to match your web theme color scheme |
 |
| Step 6. Choose where your search box will display its result to "on my website usng an iframe" then write down your search result page url in your blog where you want it to show. Then press save and get code. Copying each code to notepad might be help. |
 |
| Step 7. Create a page in your blog dashboard which refer to the settings in previous step. Paste the search box code and search result iframe code we get from the AdSense for Search setup. |
 |
| Step 8. Test your search box and result. Open your search reult page and type anything in your search box to test it to make sure its work. |
Customize your theme search box to use Google AdSense for Search
To customize your present blog search box, you need to edit your theme source code. I apply the technics below in blogspot, however it seems to be also work in any web templates, WordPress for sure.
- The first step is to access your site template source code. In blogger you can find it in the left navigation panel and choose Template then edit HTML. In WordPress, you cand find it in your Cpanel file manager or in WordPress dashbord in Appearance submenu then edit your theme.
- Find your search box code. The easiest step is to inspect your search box element and find its div id. In my theme it was <div id='header-search'>.
- Implement your AdSense for Search code to your theme like this:
My current theme search box using ajax where the search box was hidden inside navigation menu. It is triggered by the search logo in the right side of the panel. The original code is:
<div id='header-search'>
<form action='/search' class='searchform clearfix' method='get' role='search'>
<a class='search-icon' href='#'/>
<input class='searchbox' name='q' placeholder='Type and hit enter to search...' style='display: none;' type='text'/>
</form>
</div>
Then, I add my AdSense for Search code to it:
<div id='header-search'>
<form action='http://www.dailynesia.com/p/search.html' id='cse-search-box' class='searchform clearfix' method='get' role='search'>
<a class='search-icon' href='#'/>
<input type="hidden" name="cx" value="partner-pub-8485375193763385:4509492959" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input class='searchbox' name='q' placeholder='Type and hit enter to search...' style='display: none;' type='text'/>
</form>
</div>
See the different? The image below will show you the result, where I did not broke the theme structure and its responsiveness.
What do you thing?
Incoming search terms:
- how to setup adsense for blogger
- how to set up adsense on blogger
EmoticonEmoticon