Adsense Revisited

Old Blogger + Adsense Screen, 2014

By far the most visited and commented-upon post on this blog is one of the earliest: Adsense, Blogger and YouTube from November 2014. It’s one of several off-topic, technical pieces written out of an interest in how the web works behind the scenes, using some of the skills I learned writing user manuals for a software company around nineteen-ninety. 

The post describes a way of setting up Adsense ads on both Blogger and YouTube together, something Google used to make difficult. It was easy enough easy to have ads either on one or the other, but not both. From the comments, it appears some found the post helpful, although, from a technical point of view, the original post is now redundant. It became so some time ago when Google changed the criteria for YouTube ads. It also never applied to WordPress where you have no choice: with a free WordPress blog, you get ads, like it or lump it.

To test things out at the time, I set up ads on this blog where they still appear on the right and below (unless your browser blocks them). I set them up as a demonstration, not to make money – I would need to produce far more interesting content and get thousands more hits and clicks to make it financially worthwhile. In the month just ended, it generated the exhilarating sum of 10p, which is typical. Often it’s less, but just occasionally, it will be more if someone shows interest in an ad. In the unlikely event of me still being here if and when it reaches the £60 payout threshold, I’ll donate it to a worthy cause, perhaps by asking long-suffering readers for nominations. 

Unfortunately for me, some readers detest blogs that carry ads and shun them. Some have actually said so as if I’m unclean. It’s a pity because many of them write rather interesting blogs.

Actually, I quite like the attractive blocks of colour that, by means of some impenetrable algorithm, Adsense places on the page. I wonder about them. I can see why the original post about Adsense attracts ads from computing businesses, and why posts about stamps and coins pull in ads for philately or numismatics, and why posts about school and college get ads for educational services. I feel miffed that some posts are apparently unworthy of ads. I’m disappointed when a post gets one of those ads that crop up indiscriminately almost anywhere, such as the ones for genealogy or PDF converters. And sometimes, there is the delight of an absurdly misplaced ad – the ones Private Eye call “malgorithms”.

I can’t match Private Eye’s quality of malgorithms: e.g. reports of overseas terrorist incidents accompanied by ads for holidays in those countries, or articles about paedophiles attracting ads claiming child models have never been so much in demand, but the other day I did notice that one of my posts about hi-fi stereo was adorned by an ad for hearing aids. Or was I just targeted because of my age?

Ads may be putting off some readers, but I am going to keep them, at least for now. It’s my party and I’ll cry if I want to.

Side By Side Images in Blogger

(An off-topic post)

This post shows how to change the default layout of multiple photographs or other images in Google Blogger so that they appear side by side on the page instead of sequentially underneath each other. It works for two, three or more images. It can also be used for videos.

There are different ways to do this. Some people suggest using HTML tables, others using an image editor to combine several images into one. I have used both these techniques elsewhere in my blog, but the following is simpler. As well as being simple it has the advantage of keeping the images separate so that if desired any one could be changed later.

First upload your images in the normal way by means of the Insert Image button on the toolbar. Let us assume for now that you have just two images. By default, Blogger displays them consecutively on the page, one above the other as shown below. The issue with this is that readers might have to scroll quite a long way down before they come to the next piece of text.

To put the images side by side, go to the HTML part of the editor. At the top left click the HTML tab as indicated and you will see the underlying code for the page, like this:

You now need to find the code for the images. The file names for mine are Image01.jpg and Image02.jpg and you can see these names each inside the middle of some complicated looking chunks of code. But in between these chunks you can see the following which begins at the end of one line and continues on two more lines (as highlighted above):

                                                                                </div>
           <br />
           <div class="separator" style="clear">; both; text-align: center;">

All you then need to do is to delete this section of code. Be aware that, depending on how you have uploaded your images, the <br /> line might appear more than once or might be completely absent. If there is more than one then delete them all. If it is absent then don't worry. Basically you should just delete everything from </div> to .... center;">.

Be very careful not to delete anything else. Do not delete anything other than </div> at the end of the first line. You might want to make a copy* of your blog post first so you can recover if you make a mistake.

After deleting the code, your images will be positioned like this:

Technically, what this achieves is to place both images inside the same <div> section of the page, rather than in separate divisions as occurs by default. 

You might have problems if your images are too wide for the page layout you are using. You will have to resize them. For example, my images are portrait orientation and set to the Blogger Medium size, but if they were in landscape orientation then they would not fit across the page. The second image would overflow to the next line so they would still appear one above the other. I could get round this by using the default Blogger Small size instead of Medium. 

You can use this technique to place three or more images side by side by deleting the two lots of intervening code. For three images I do need to resize them to Small to get them side by side across the page as shown. This works when viewed on a computer. It might not always work when viewed on smaller-screen devices such as phones and tablets.

To display a greater number of images side by side, even the default Blogger Small size might overflow to the next line. I can get round this by specifying the size of the displayed images directly, but this requires more detailed editing of the HTML code which needs greater care.

The code for each image will look something like the following. It specifies the image size, in this case height="200" and width="133".

<img border="0" height="200" src="https://2.bp.blogspot.com/-TJEO39VZl8E/V5Oi1wKVaPI/AAAAAAAABtU/ByOUJE8oCs4PHsHiWcVW6yKL9E74tXKigCEw/s200/Image01.jpg" width="133" />

If I reduce these dimensions by a scale of 0.7 so that height="140" and width="93" then it is possible to place more images across the page.

Readers can always click on the images to look at them full size.

In the above I have also removed the code style="margin-left: 1em; margin-right: 1em;" associated with each image (i.e I have had to remove five instances of this) to reduce the margin spacing and pack them closer together.

The remaining frames and shadows around the images are defined at a higher level - the css level - and will appear on all images on all posts on your blog. It is possible to remove these too, but to do so for a single image is beyond the scope of this post. However, if you want to remove the frames (but not the shadows) from all images on a single page, then insert the following code in the HTML editor at the very beginning of the blog post.

     <style type="text/css">
     .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
     .BlogList .item-thumbnail img {padding: 0; border: none; background: none;}
     </style>

Be very careful when editing HTML. It is so easy to wreck the whole page or lose it irrecoverably. When you have a lot of content it is usually best to play safe and make a backup copy.*

To see another example, I have used this technique for the cigarette card album at the end of my post Cartophilic Concerns. However, the first composite image in that post was put together using an image editor.

Finally, you can also use these techniques to place videos side by side. In the following, the video thumbnail images have been resized and placed within a single division rather than the default two. Again, this has the proviso that it works when viewed on a computer but not necessarily on phones or tablets, or in email feeds.

  

* One way to make an exact copy of a blog post is to go into the HTML code editor, place your cursor anywhere within the content, press CONTROL-A to select all the content, then CONTROL-C to take a copy. Close the window (do not save if prompted), begin a new blog post and give it a name such as 'Backup', go into the HTML editor and place your cursor in the empty window, press CONTROL-V to retrieve the copied content. Save but do not publish the post, then close the window. If you then make a mess of editing the original blog post you can always delete it and rename the Backup with the name of the original.

Adsense, Blogger and YouTube

(An off-topic post) The trials and tribulations of enabling Adsense ads on both YouTube and Blogger.

Summary: This describes how I enabled my blog for AdSense when already showing ads on YouTube - something others seem to have had difficulty with. It required registering my own top level domain because you can't use an AdSense account created with YouTube for hosted Blogger blogs. The post is off-topic as far as the blog goes, but the tale may be helpful to other bloggers. Apologies to regular Yorkshire Memories readers, but at least the ads might earn me a bit of pocket money.

*                   *                  *

I enabled AdSense on my two YouTube channels in August 2014. I wish I’d enabled it sooner considering I’ve had nearly 400,000 views over several years.

I also started this Blogger blog in August 2014 with the aim of linking it to AdSense. However, for the first three months the “Sign up for AdSense” button in the Earnings section was greyed out. Reading various forums, it seemed I might need to wait until the blog was 6 months old with perhaps as many as 40 posts before my blog would be eligible (I found Get Google Adsense Approval! 7 Things to Do That Really Work very helpful, despite it being more oriented to WordPress than Blogger).

I was therefore pleased to find the “Sign up for AdSense” button became active after just 3 months (exactly to the day) and only 12 posts. This may surprise some people who have been waiting for longer. It may be significant that (1) I am in the UK and (2) all my posts are very nearly text-only with between 1000 and 2000 words per post. 

Another problem was that when the “Sign up for AdSense” button first seemed to be active, it actually wasn’t. All that happened on clicking it was that a “Loading” message appeared briefly and then nothing else. Forums indicated this was a fault that was being corrected. After a few days it worked properly, and took me to the next screen.

 

As I already had an AdSense account created from YouTube, I used my Google account sign in. After this my Blogger Earnings page provided a link to my AdSense dashboard.

 

When “Show ads on blog” was set to “Yes”, then the “About Me” panel on my blog moved down to leave a blank space where the sidebar ad would go, and there was another space between the first two posts for another ad.

I thought I’d succeeded but the ads remained blank. I thought I just had to wait for them to activate but after a week they were still blank.

Again referring to the forums, it seems you can no longer place ads on Blogger using an Adsense account that was initially set up with YouTube. This was confirmed by a banner on my AdSense dashboard: 

“Your AdSense account is enabled only to show ads on YouTube. If you want to show ads on a different site, you’ll need to provide us with the URL of the site you want to monetise. You can do this via a one-time application form.”

 

In other words, if the AdSense account was accepted through YouTube you can only use it with YouTube. To use it anywhere else you have to apply for an upgrade but this can only be done with a top level domain name.

Again, looking around the forums, there seemed to be two possible things I could do.

(1) set up a second AdSense account just for Blogger. I have not tried this. It would involve creating a second Google ID, and would mean that any ad earnings from Blogger would go into a different AdSense account from the earnings from YouTube. A second ID would also violate the AdSense terms and conditions. As my earnings will be little enough as it is I want them all to go to the same AdSense account. In fact it’s hardly worth my while at all except for a sense of satisfaction. To be precise, my YouTube channels have earned just £1.41 over three months!

(2) register my own top level domain and assign this to the blog so that instead of a blogspot.co.uk address my blog would have its own address, and then I could apply to upgrade AdSense using the one-time application form.  This is what I decided to do.

I wanted a private domain registration to protect my name and address details. After looking at various options I decided to register www.taskerdunham.com through Namecheap.com with their free WhoisGuard subscription. It cost me $10.87 (£6.90) for one year’s private registration. It was very easy and became active immediately. If I had not wanted anonymity I could have done it elsewhere for much less than that. I know others have done it for free using a .tk domain.

The next step was to alter my custom domain www.taskerdunham.com to redirect to my Blogger blog. This means in effect that my blog has two addresses, (i) taskerdunham.com and (ii) taskerdunham.blogspot.co.uk – it will still be found at both URLs so I don’t have to worry about telling any existing readers of the change.

So in Blogger I went to Settings Basic and select  “Set Up A Third Party URL” and entered www.taskerdunham.com under Blog Address.

I clicked “Set up a third party URL” which produced a field to enter my new domain name www.taskerdunham.com and then clicked the Save button.

DONT PANIC! -this immediately produces the following Error 12 message which lists two CNAMES (canonical names used in domain registration): [DO NOT CLICK SAVE AGAIN JUST YET]

 

All this means is that you have to redirect your custom domain name so that it points at your Blogger blog. You have to go to your domain registrar's website and alter the settings by entering the two CNAMES

                                        www                          ghs.google.com
                                        cfo5........                   gv-ii ......dv.googlehoosted.com

Different domain registrars will have different procedures and you may have to search around for instructions and examples. Blogger has a help page for the common ones. In my case I signed in to my Namecheap account and found their useful help page “How do I use my domain with my Blogger account?” showing exactly how to do this and where to enter the two CNAMES (there is a video as well, but not specific to setting up Blogger blogs). In case anyone else opts for Namecheap, here is my completed screen accessed by the “All Host Records” link:

I only entered the CNAMES - I did not touch the '1800' field or the other fields underneath this section.

Having done this at Namecheap, I returned to Blogger and clicked Save on the screen shown above, which produced the following screen listing the two URLs for my blog. Here I also clicked Edit next to www.taskerdunham.com and checked a box which seems to cover the possibility of someone missing the www from the front and typing just taskerdunham.com. I don’t know whether that’s essential because most browsers seem to handle that anyway.

Success! All seems to work. My blog can be seen at www.taskerdunham.com and www.taskerdunham.blogspot.co.uk and www.taskerdunham.blogspot.com and it still works if the www. is omitted as well.  I can also still edit my blog and make new posts by signing in to Blogger with my Google ID in the usual way.

But I'm not finished yet. Now I have to apply to AdSense for approval for my top level domain using the one-time application form. Actually it's just a field you fill in.

 

You then get a Thanks for applying screen and have to wait. It also says that “In order for your application to be approved, you must place your ad code on one or more webpages at the URL you entered in your upgrade application. Note that blank ads will be shown until your application is approved.”

Well, ad codes and blank ads were already on my blog because the “Show ads on blog” box on the third screen above was still ticked and there were still blank spaces on the page. I could see these had been set up in the My Ads section of my AdSense account as below. I don’t think you need to do anything else at this point other than wait. However, just to make sure, I did click the +New Ad Unit button and created some new code, which I placed at the end of my blog using Layout – Add a Gadget – HTML/JavaScript on the Blogger menu and copying and pasting the new code into the box that appears. But I doubt you have to do this.

 

Some forums say it can take a few days or even a month for the AdSense upgrade to be approved. In fact mine happened within two or three hours. I got the following email, and WOW! as you can see, the ads are on the blog!

I suspect that if I do not want to maintain my custom domain, then after a year I can revert my blog back to being a hosted account, and ads will continue to appear. I have yet to find out.

LATER

1. I find that on the AdSense website, the ads for the blog sidebar and between-posts are now listed as status Idle. I think this is because no on has clicked them for a week - well they couldn’t could they because they haven’t been displaying. This is nothing to worry about. They become active again if and when someone clicks them .... later still - they are now showing as active again.

2. I also now find I can generate AdSense code and put it on my free Weebly site. That is now displaying ads too. I just have to wait a few days now to check whether they are showing as impressions on AdSense.