Adsense, Amazon Within Blog Posts.

Ever since the debut of the New version of Blogger with the Layout Template, bloggers have been struggling to find ways of inserting Google Adsense and or Amazon Advertisements within blog posts.



The difficulty arose from the fact that most of the advertisements use Javascript code which needs to be pasted within the Blog Posts. In the New Blogger Layouts template Html/Javascript Page Elements were introduced so that Ads. could be put in them. These could then be added to the Header, Footer, Sidebar and the Main Posts column. However, the Blog Posts Page Element being a widget in it's own right does not accept another Html widget inside itself. Check out the Amazon Advertisement to the right --->. I have given it a title : "Amazon Ads." but that can be omitted to make it blend more with your post's content. You can see that it is not a picture/image by hovering your mouse cursor over the links. It will change to a hand icon and the amazon link to the product will be displayed in the status bar of your browser at the bottom.



Thus bloggers were able to add Google Adsense Ads. all round the blog posts and now in between ( Inline Adsense )the posts also. Some hacks were developed to incorporate Adsense within the blog post but most involved modifying the advertisement code which went against the Google Adsense TOS.



Here is a method to incorporate any advertisement within your blog post so as to fully blend in with your content without modifying the code..........

GETTING THE CODE

The first step is to get the code from the respective sites. For this login to your Google Adsense or Amazon account and navigate to the code generating section. Customize your advertisement to the size ( It should fit the width of your posts column. )and color you want and copy down the code provided. You can select the channels you want in Adsense and the Advanced Settings tab for Amazon Omakase Ads. allows you to set upto five keywords or phrases to target your Ads.

MAKE A GOOGLE GADGET

Paste the code obtained in a new Google Gadget. Follow the same steps as shown in "Increase Traffic | Create a Google Gadget". Load the sample "Hello World" Google Gadget and replace the "Hello World" with the code obtained from Adsense/Amazon. See picture below :




Delete "Hello World" and paste the code instead. Click on picture to enlarge it.
Save the Google Gadget and publish it to get the code. Copy the code for the Google Gadget which you have created.

PUT GOOGLE GADGET IN BLOG POSTS

Go to Blogger Home and login to the Blogger Dashboard. Click on 'Posts' link and it will open your list of Blog Posts. Click 'Edit' link next to the post you wish to insert the advertisement in. The post will open in Post Editor. Click on Edit Html tab in the top frame of Post Editor. Paste the Google Gadget code where you want it. If you wish to float it left use the following code :

<span style="float:left;">
GOOGLE GADGET CODE
</span>

To put it to the right of your text use 'right' instead of 'left'. Replace the CAPS with actual code for the Google Gadget. The gadget will not be seen on Preview. Publish the post and click on 'View Blog' to see your Advertisement. Check out my Google Gadget with Amazon Advertisements in this post. To blend it within the post content first make sure that you choose "No borders" while customizing the code for the advertisement in Step 1 above. Then when you generate the code for the Google Gadget you will get something like this :

<script src="http://gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/115706042431009629871/AmazonAd.xml&synd=open&amp;amp;amp;w=305&h=255&title=Amazon+Ads.&border=%23ffffff%7C1px%2C3px+solid+%23999999&output=js"></script>

Change the numbers for the borders to 0 px in the code above to delete the border for the gadget. This will make your advertisement blend in effectively within your posts.

ADVANTAGES OF THIS METHOD

1. The advertisement code need not be modified.

2. Advertisements blend in with the posts.

3. You can target each advertisement to the specific content of that post.

4. You can put Google Analytics within the Google Gadget to track it's statistics.

Monetize Your Google Gadget.

Inspired by the response to Increase Traffic | Create a Google Gadget ( Topping the popularity chart on this blog for the last month ) I researched methods to add advertisements to Google Gadgets.


Here is the method by which you can add any type of advertisement to your Google Gadget. Since you can put a Google Gadget within a post ( in contrast to Blogger Widgets ) this method also allows you to add Google Adsense Ads. within your post as demonstrated here ........





First create your Google Gadget. Looking for content to put in your Google Gadget? I have created one which shows the pictures from my picasa gallery as a sample. You can create a similar one based on your photo album collection. After creating the gadget and adding the Google Adsense or Amazon code as shown below submit it to the Google directory for syndication.






In the below code substitute the items in red with your own code :

1. Change the Module Preferences to those of your own.

2. Change the image URLs' to those from your Picasa gallery album.

3. Change the Amazon Ad. code to your own code.

4. Change the Google Analytics code to your own code.
























The code for the Picasa photo albums Google Gadget is shown below :

 <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Aishwarya Rai Photos"
title_url="http://betabloggerfordummies.blogspot.com"
author="Vin."
author_email="drbhatns+coolgadget@gmail.com"
author_affiliation="http://betabloggerfordummies.blogspot.com"
category="Fun & Games"
screenshot="http://i52.photobucket.com/albums/g7/vinayak06/ashgadget.jpg"
thumbnail="http://i52.photobucket.com/albums/g7/vinayak06/DummiesGuideBttn120.png"
render_inline="optional"
height="375"
width="175"
description="Aishwarya Rai Photos">
<Require feature="analytics"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<div id="ashcontainer"
style="text-align:center;">
</div>
<script type="text/javascript">

var counter = 0;

// Preload the images using _IG_GetImage().
var images = new Array();
images[0] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr19I/AAAAAAAAAic/xXD5IfB-_LY/s144/ash1.jpg");
images[1] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr1-I/AAAAAAAAAik/kYxo3nxP4Vg/s144/ash2.jpg");
images[2] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr1_I/AAAAAAAAAis/pL6I66h9h4I/s144/ash3.jpg");
images[3] = _IG_GetImage("http://lh4.google.com/drbhatns/RuUOIxWr2AI/AAAAAAAAAi0/Me2ac0M4gxo/s144/ash4.jpg");
images[4] = _IG_GetImage("http://lh5.google.com/drbhatns/RuUOJBWr2BI/AAAAAAAAAi8/RJXOS6p68ms/s144/ash5.jpg");


// Browse through photos sequentially. When you get to the end of the array, start over.
function browse(){
if (counter == images.length)
{
counter = 0;
}
_gel("ashcontainer").innerHTML = "";
_gel("ashcontainer").appendChild(images[counter]);
counter++;
}

browse();

</script>
<br />
<div style="text-align: center;">
<input type=submit value="Next ->" onClick="browse()">
<br/><br/>
<iframe src="http://rcm.amazon.com/e/cm?t=xxxxxxxxxx-20&o=1&p=21&l=ur1&category=beauty&banner=00AFNRTEE7XXVA2G6TG2&f=ifr" width="125" height="125" 

scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

<script type="text/javascript">
_IG_Analytics("UA-xxxxxx-xx", "/ash");
</script>
]]>
</Content>
</Module>

Then paste the whole code in Google gadget editor online scratchpad and save it as an xml file. Publish the Google Gadget and get free publicity for your blog.



Lastly in Google Gadget editor go to File--->Publish----->Add to a Webpage. Customize your gadget and click Get Code button. Copy and paste the code in the Edit Html tab of post editor when creating post and Publish.


See my Google gadget with Amazon Ads. on the left side of this post.

Make Money with Inline Adsense for Bloggers!

Blogger has now made it possible for you to make even more money! You can now add Inline Adsense advertisements between your blog posts.


As we have seen before you can add Adsense Ads. by selecting the Adsense Widget when adding widgets to your blog. If you want to include channel information also copy and paste the Adsense code into a Html Page Element.


Now with this method (Inside AdSense: Get inline) you can add Adsense Ads. between your blog posts inline with them. To do this login at Blogger.com and click on 'Layouts' link for your blog. In the Page Elements tab click on 'Edit' link in the Blog Posts widget. Scroll down in the popup window and check the box next to Show Ads Between Posts. You can then select how often you'd like your ads to appear, such as once after every post or once after every other post.


It also allows you to Customize your Adsense Ads. After customizing save the changes. At the moment search boxes and referral units cannot be added in this fashion. Since the optimum method is to have most of your Ads. above 'the fold' ( which is the viewable area of the screen when you open a site without having to scroll down ) use the Expandable Summaries hack to show only a summary of your posts on the Main Page with a 'Read More' link to the full post.


Using this method your posts on the Main Page will only contain a sentence or two and thus more posts and Adsense will be seen above the fold.

How to Add Adsense Ads. to beta blogs.

To add Adsense Ads. to beta blogs.............

FIRST BACKUP YOUR TEMPLATE USING METHODS OUTLINED IN : Change your Template.

Then login to your Adsense account and click on Adsense Setup. Click on type of Ad. you want to setup - Content, Link unit, Search unit or Referrals.

MOST IMPORTANT LINK IN YOUR TEMPLATE SETTINGS is Download Full Template on Edit Html subtab of Template Tab.

At present you are allowed to add three Content Ads., One Link Unit, two Search units and four different Referal units per page. You should try to add Ads. so that most of them appear 'above the fold'. This is the amount of web page visible to the viewer on loading the page without having to scroll down. The best place for the Link unit is in the header as a single line containing 4-5 ad units. The right hand sidebar can hold one 'skyscraper' content unit with another in the left sidebar. This is if you have a three column template structure like this web page. The one big rectangle of content unit can go above the posts in the main column. You can add the search unit either in the posts column or in the sidebar. The referrals units can go in the sidebars at the bottom.

Follow the procedure till you come to the code for pasting in your site. Then login to Dashboard click on Layout under the name of your blog. Click on 'Add Page Element' in the sidebar and choose Html/ javascript option in the popup window. Copy the code for the Ad. from Adsense setup page and paste it into the Content area. Save changes.

To add the code in the main column of your blog. Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the main column which is :

<div id="main-wrapper">
<b:section class="main" id="main" maxwidgets="1" showaddelement="no">
<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
</b:widget>
</b:section></div>

In the above code change maxwidgets="1" to maxwidgets="2"
Also change showaddelement="no" to showaddelement="yes"
Save Template.


Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that Blog posts section has a Add Element link. Click it to open the choices page. Choose Html/Javascript option.

CHOOSING HTML/JAVASCRIPT OPTION ENABLES YOU TO ADD CHANNEL INFO ALSO.

Copy and paste the Adsense code into the Content field. Save changes. This will place the Ad. on top of your posts. To place it below your posts go to Page Elements view and in the Blog Posts Section click and drag the Ad. to below the posts. To place one more Ad above the posts change maxwidgets="2" to maxwidgets="3" and repeat the above process. Refresh Cache. View Blog. Enjoy.


IMPORTANT ; Many readers have asked for a hack similar to Classic Blogger in which we could add Adsense Ads. within the body of the posts. louiss lim has a hack for this here. However this is done by altering part of the Adsense Ad. code which is against the TOS, so he has submitted it to Adsense for approval. Also it seems that only text Ads. can be added this way.

Technorati Tags:adsense, template, widgets

Add Content with RSS Feeds.

To Add Content to your blog with RSS feeds.........

First find the RSS Feed Icon. On many sites it is shown as "RSS" or "About Feeds". The icons are shown alongside.
Right click any one of these and select 'Copy Link Location'. Now you have to convert the feed into Javascript code. There are many such convertors online which you can find simply by searching Google. One such convertor is located at : http://itde.vccs.edu/rss2js/build.php. Go there and paste your feed url into the text box under 'Enter the web address of the RSS Feed'. Choose among the various options for the feed. Whether you want the title to be displayed etc... Then click 'Preview' to see if the feed is being generated. If the feed url is correct it will show items and content from the web page where you took the feed url from. If you are satisfied click 'Generate Javascript'. Javascript code is generated along with non javascript code which displays the feed on browsers without Javascript. Go back to your beta blog. Login to the Dashboard and click on Layouts under the name of your blog you want to add the feed to. The Page Elements page opens. Click on Add Page Element in the sidebar and choose HTML/Javascript in the popup window which opens. Paste the Javascript code in the content box and Save Changes. You can also add this to a Page Element in the Main Column of postings but then your feed will appear on all your posts. If you add it in the sidebar it will only appear once on the page.

WARNING :
1) Before taking content from other websites be sure to resd their Terms of Use for feeds. 2)You can fill your webpage with feeds but the Adsense bots are not able to read the content generated by them, so it is ineffective with Adsense. 3) You can use the Feed widget already present in the choices in the popup window which opens when you click on 'Add Page Element' in Page Elements page. However it will deliver only a maximum of five posts and titles whereas you can configure the feed in the above process to deliver all the posts.


You can also add a feed of your blog to your sidebar so that it shows all the posts titles. The URL of your beta blog's feed is :

http://yourblogname.blogspot.com/feeds/posts/full

Instead of 'yourblogname' type the name of your blog.

You can also add RECENT COMMENTS to the sidebar by using comment feeds URL which are

http://yourblogname.blogspot.com/feeds/comments/TYPE

Instead of 'yourblogname' type the name of your blog. Instead of TYPE use summary or full.

Technorati Tags:adsense, content, javascript, rss

How to put Adsense Link unit in your Header.

To put an Adsense Link Unit Ad. in the header..........

Log in to your Dashboard. Click on your 'Layout' link under your blog name. This takes you to Page Elements under the Template tab. Click on Edit Html. Scroll down in Edit Template field till you come to :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' preferred='yes' showaddelement='yes'>

Change the second line to be the same as the second and third lines above.
Save Template.
Go to Page Elements subtab.
Now you will see in the Header Section an 'Add Page Element' link.
Click on the link and in the popup window choose Html/Javascript.
Paste your Adsense 728 by 15 Ad. Javascript code in Content field.
Save. The Ad. unit is placed above the Title unit.
Click and drag this to below the Title unit.
Save.
View blog.

Technorati Tags:adsense, header, page element, template, widgets