WebDiggin.com: An Adventure to Make Money Online

As a general rule, we’ve moved away from Blogger. Been there, done that, moved on to WordPress and Bluehost.

But. We’ve recently gone back to Blogger because we wanted to try to make a money-making site off of a free blogger account.

Of all the free blogging platforms (WordPress.com, LiveJournal.com, xanga.com, etc), Blogger is your best choice if you want to make money. The other free blogging accounts won’t let you monetize your site with Google Ads or affiliate links. Blogger will.

Even though Blogger is owned by Google, it’s not easy to display google search results inside your blog. (They try to make it as easy as possible to slap in some Google Ads into your blog by supplying you with widgets to do the dirty coding part, but so far adding a Google Search box is still a pain.)

We searched the internet, but couldn’t find instructions on how to have your google search results display inside of your blogger blog. Sure you can cut and paste the google search bar into a widget, but most people simply have their google results show up on a separate page. We wanted the results to be inside of our blogger blog so we could keep the traffic and entince them with our links in the sidebar.

Here’s how to have your cake and eat it too. Hopefully these instructions help you to get your google search results inside of your blogger blog and not outside on a separate results page. (Yes, you supply your own google account number so if someone clicks on those sponsored ads, you get the cash.)

How to open Google Search results inside of your own Blogger account.

Step 1. Login to your Blogger account and create a post called Search.

• Create a new post and title it Search. Leave the body of the post empty.

• Publish the post and then view the post. Copy the address of the post.

Step 2. Go get the Adsense for Search code from Google.

• Login to your adsense account and under adsense setup, create an AdSense for Search.
• Set the colours and layout for your blog. The search results should be 500px wide. (That’s the smallest that you can get.) 
• Choose to display the google search results in your blog (Open Results within my own site) and paste in the address from Step 1.

• Copy and paste the search box code and the search results code into a text editor like notepad.

Step 3. Insert the Google Search Box Code as a widget

• Log into your blogger account. From the layout menu, select page elements and Add a Page Element.
• Pick the HTML/Javascript element and paste in your Google Search Box Code into the content.
• You don’t need a title if you don’t want one. Save the widget.

Step 4a. Modify the Google Search Results Code so we can insert it into our template.

• If you try to insert your Google AdSense code directly into your Blogger template, it won’t work. (It also won’t work for any other javascript code for other ads, including Commission Junction ads, and AdBrite) 
• My Digital Life has a great trick to get the code to work. The problem is that Blogger’s XML template system doesn’t parse read the code correctly because of the way blogger reads some of the characters.
• All you need to do is search and replace the following characters and your adsense code will work in Blogger’s template:

• You may also need to replace the following characters to make your CJ code work correctly

• You don’t have to change your Google Search box code because if you plan on putting it inside a sidebar widget. (You only have to change the code if you are putting it into your HTML template directly.)
• Don’t worry. You’re not violating Google’s terms of service when you are changing the code because when the webpage loads properly, all of the < and > symbols are there.

Step 4b. Insert the Google Search Results Code in your template

• Open up your template by clicking on layout and then edit html. Click the box that says expand widget templates.  
• Find the code that says <data:post.body/>. That’s the code for displaying your post.

• We’re going to put our Google Search Results page directly above the post body (and just underneath the post title.)
• The basic code we use is this. Just replace the red <!– google search result code–> with your modified google search result code from Step 4a. Replace the green Search with whatever you put as your title for your search page in Step 1. (It should have been Search, but maybe you changed it.)  

<b:if cond='data:post.title == "Search"'>
<!– google search result code–>
</b:if>  

<p><data:post.body/></p>

• We actually use the following code because we wanted to show our Google Ad box directly underneath our post title. (Blogger doesn’t have a widget that lets you do that. You can only show ad boxes in between posts, not inside of posts.)

<b:if cond='data:post.title == "Search"'>
     <!– google search result code–>
<b:else/>
     <!– google ads–>
</b:if>      

<p><data:post.body/></p>

• We just replace the red lines with our modified google code from Step 4a. (Don’t forget to search and replace for those characters in your Google AdSense textbox or it won’t work.)

Step 5. Modify your Google Ads so that they don’t show up on the same page as your Google Search Results

• Google AdSense Program Policies state in their ad placement section that you can’t display other google ads on a google search results page: AdSense for search results pages may show only a single ad link unit in addition to the ads Google serves with the search results. No other ads may be displayed on your search results page.
• The problem with the adsense widget is that it will always display your ads, even on your search results page.
• You need to modify your template code to turn off the google ad widget on your search page.  The Dummies Guide to Google Blogger Beta had some great code to help us turn off our google ad widget.
• Make sure the Expand Widget Templates box is checked. Look for a line of code that says widget id=’AdSense1′  (It might be AdSense2 or AdSense3 depending on how many adsense widgets you have) 

• Add the following lines of code in red. (Replace the green URL with the website address of your search page from step 1)

<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<b:if cond=’data:blog.url != “http://www.discount-domain-names.info/2008/04/search.html"'>
<div class=’widget-content’>
     <data:adCode/>
</div>
</b:if>
</b:includable>
</b:widget>

• Repeat this step for all of your adsense widgets. (If you have inserted adsense code directly into your template, add the red lines before and after your adsense code to turn them off on your Google search results page.)
• Save your template.

Bottom Line: We’re not code monkeys. I’m sure the pros out there can think of a more elegant solution. We wanted a way to add a Google Search Box to a free blogger account and have the search results show up inside of the blog.

Question: Do you use Blogger or WordPress? Do you use the Google Search bar to make some cash on the side? How’s that going for ya?

(1 votes, Rating: 4 out of 5)

 Loading ...