Someone who uses this blog template has tried to put Google AdSense For Search into the search box at the head of this template and come seriously unstuck. So this article is to try to provide an answer to the question posed in the comments section of eBlog Templates.
Obviously this will be mostly of interest to those of you who use Blogging Pro, but parts may be useful for other bloggers.
When I first looked at this I found that the answer was quite straightforward and it looked quite good in Firefox, which is my main browser. Then I tried it in Internet Explorer 8, and it broke the layout. IE 7 did the same by adding five more characters to the search input box. I have not been able to test it in IE versions earlier than 7 as I do not have access to them.
I chose the default 31 characters and the fit in Firefox was perfect. IE decided to up the number to 36 which immediately dropped the search button below the input box and broke out of the light blue box. So compromises had to be made and it ended up looking a little better in IE, which is what most of your readers will probably be using anyway.
For everyone the usual warning is to save your template first to protect against disasters. Go to Layout>EditHTML and click Download Full Template.
1: Fixing the Broken Search
This section is specific to the commenter with the broken search problem so, if you don’t have this problem you can skip to section 2.
From looking at the blog source it looks as if the AdSense code has been added in the wrong place and is causing this problem. I obviously can’t see your original template but I suspect that you have done this and added the code I have marked in red.
<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'><legend><data:title/></legend></b:if>
<div id='search'>
<input class='keyword' id='s' name='q' type='text'/>
<div id='buttonsearch'><input alt='Search' class='search' name='submit' src='dhttp://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/transparent.gif' title='Search' type='image'/>
</div>
<data:content/>
</div>
</form>
</fieldset>
</div>
<div class='SearchCorner'/>
<form action="http://www.google.co.uk/cse" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-4xxxxxxxxxxxxx3:nx**xxx**xa" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="35" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.co.uk/coop/cse/brand?form=cse-search-box&lang=en"></script>
</b:includable>
</b:widget>
</b:section>
</div><!-- header-wrapper -->
Before you do anything you need to delete all of the code in red so that you are back to the original search widget, like this:
<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'><legend><data:title/></legend></b:if>
<div id='search'>
<input class='keyword' id='s' name='q' type='text'/>
<div id='buttonsearch'><input alt='Search' class='search' name='submit' src='http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/transparent.gif' title='Search' type='image'/>
</div>
<data:content/>
</div>
</form>
</fieldset>
</div>
<div class='SearchCorner'/>
</b:includable>
</b:widget>
</b:section>
</div><!-- header-wrapper -->
Before saving, click preview to make sure there are no error messages. If there are check the above code again and when everything is alright go on to the next section.
2: Decision Time
First of all you have to decide if you want to keep the built in blog search or replace it with Google’s AdSense for Search.
If you want to replace the built in search then go on to section 3.
This article was designed to show how to place Google’s search box in the header instead of the original search. You cannot put both in the space provided in the header as it is a graphic and cannot expand. It was trying to do that which caused the original disaster and led to the first call for help.
If you want both, the best bet is to keep the original search where it is and place your Google search code into one of the sidebars by using Add a Gadget to add an HTML/JavaScript widget. You can call it something like “Search The Web”.
When you log in to your AdSense account you may have to experiment a little to see which settings work best for you.
Another alternative is to place the Google search in the header and move the original site search to the sidebar. That is outside the scope of this article.
3: Get the AdSense Code
Once you have logged in to your AdSense account select the AdSense Setup tab and then select AdSense for search.
On the next page you have several choices to make. The important ones are the “Site Language”, the “Country or territory for Google domain” and “Your site encoding”.
The first two are entirely your choice but as for the site encoding I suggest that you scroll to the bottom of the list and select Unicode (UTF-8) as this is the encoding used by Blogger as you will see from the first line of the template.
The “Search Type” selection is up to you but The entire web is probably better than limiting your readers to a few sites unless this is better for you.
“Keywords,” “Safe Search” and “Custom channel” are up to you.
On the next page, in “Look and Feel” it is important that you choose the top selection with the watermark as none of the others will fit into the search box in the header.
If you decided on placing it in a sidebar then the style is your choice.
In “Text Box Length” choose 35 characters then proceed to the next page.
In “Opening of search results page” the choice is yours again depending on your setup but my favourite is to open the results in a new window as it does not drive the reader away from your blog. Once they have finished their search and closed the window they are back with you.
If you have another site you would like to take your readers to then remember to enter the URL.
I suggest that you do not make any changes to the palette and just leave the default Seaside selected. That is what has been used for the test blog. You can always come back later and edit your choices.
On the final page you submit your choices and then copy the code from the window. Save the code in a text file so that you always come back to it again if necessary.
4: Placing the Code
Now you need to go back to Edit HTML and, with Expand Widget Templates selected find the search widget as below:
<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'><legend><data:title/></legend></b:if>
<div id='search'>
<input class='keyword' id='s' name='q' type='text'/>
<div id='buttonsearch'><input alt='Search' class='search' name='submit' src='http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/transparent.gif'title='Search' type='image'/>
</div>
<data:content/>
</div>
</form>
</fieldset>
</div>
<div class='SearchCorner'/>
</b:includable>
</b:widget>
</b:section>
</div><!-- header-wrapper –>
Delete the entire fieldset, shown in red. In case you want to revert to the site search it is a good idea to cut the code and paste it into a suitably titled text file for safekeeping.
Copy the Google code from wherever you saved it and paste it as shown in blue. Don’t copy this code as it is for my account and I have blanked the personal identifiers.
<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<div class='GoogleSearch'>
<form action='http://www.google.co.uk/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-4**************3:nxxxxxxxxxa'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input name='q' size='35' type='text'/>
<input name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.uk/coop/cse/brand?form=cse-search-box&lang=en' type='text/javascript'/>
</div>
</div>
<div class='SearchCorner'/>
</b:includable>
</b:widget>
</b:section>
</div><!-- header-wrapper -->
Finally for the widget code add the two lines shown in red to create a new class for some extra CSS.
5: And Finally a Little Style
Enter .SearchCorner in your browser’s search/find to locate the following section of the style sheet in the template head, and enter the code in red as shown.
.Search input.keyword{border:none; background:#fff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/SearchKeyword.png) no-repeat; padding:4px 0px 5px 8px; width:291px; border:none}
.GoogleSearch{margin:0; padding:15px 0 0 0; text-align:center}
.SearchCorner{position:absolute; background:#fff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/SearchBkgNone.png) no-repeat; width:9px; height:8px; margin:0px; top:34px; right:-9px}
Last of all; scroll up a few lines until you find this line:
.Search input{color:#6db6ff; font-size:14px; font-family:'Arial'; letter-spacing:-1px; font-weight:bold}
And change the font-size to 13px as shown in red.
.Search input{color:#6db6ff; font-size:13px; font-family:'Arial'; letter-spacing:-1px; font-weight:bold}
If you do not change the font size it will break the display in Internet Explorer.
Use preview to check that all is working as expected and if everything works save the template.
I hope that this has been useful and that it solves the problem for the original commenter.
The other day I was reading Creating a Web Site: The Missing Manual by Matthew MacDonald to remind myself just how much I had forgotten. As I read the chapter on blogs I saw a screen shot of a blog with post summaries which showed the title of the post in the “Continue Reading” link.
