Adding Ads to Tumblr (Cargo Theme)

I started a picture blog using Tumblr.com to post random images taken from my Nokia E72 (I know this is an old phone but it still works great). Tumblr is a great tool – it so easy – just shoot, email and there it is on my photoblog. In order to keep things simple, Tumblr does not have plugins like WordPress to help with customisation, which is totally understandable.

Tumblr does, however, allow its user to edit the HTML. But for people like me who have no knowledge of HTML, it’s a challenge. But a challenge I will accept.

I wanted to add and advertisement on my photoblog (who knows – maybe my pictures are so good that people will visit my photoblog and …. and ….. ok I think I better stop dreaming now). Anyway, I got the codes from the ad website (similar to how Google’s AdSense generates codes). The next step was placing the ad, which requires placing the codes at the correct line within the HTML.

I tried to google ‘adding adsense to tumblr’ – it gave me some ideas on how it works. Some sites suggested that you find the location on your website where you want your add to be, for example, if you want to place it below the ‘About’ section, look for the ‘About’ word in the HTML and place the codes right below it.

It was good advice but with the many themes available in Tumblr, it was difficult to fit the advice with the theme I was using (I am using the Cargo Theme by Jarred Bishop).

“There is no failure except in no longer trying.”  Elbert Hubbard

But I wanted to try anyway and this is what I did:-

1. Create Backup

First I made a backup of the existing HTML – I just copied the whole page under ‘Customize Appearance > Edit HTML’ and pasted it in a Notepad file. Just in case I mess up the whole page, I can revert back to this backup.

2. Find The Location And Paste Away

I wanted to place the codes under ‘Display as list’ on the Cargo theme. I looked for anything on the HTML which showed ‘Display as list’.

I didn’t find it and so I tried looking for ‘About’ – there was a few of them. I just tried pasting the ad codes near the ‘About’ word. The ad did appear but it wasn’t below the ‘Display as list’ where I wanted it to be.

Then I came to the <div id=”nav_list”> section in the HTML. The words ‘About’, ‘Search’ and ‘Archive’ appearing on the website was here. Cut and pasted around this section and finally got it exactly where I wanted it – amazing! Screenshot below – grey highlights are the codes I added.

3. Some Minor Adjustments

It was awesome to see it work. But I am sort of a perfectionist and didn’t like that the ad was immediately below the ‘Display as list’. I wanted to add a space in between. I goolged again – this time for “add a blank line in HTML” and found the answer the here. I added ‘<BR>&nbsp;<BR>’ just above the ad codes and there space appeared!

And that’s how I got the ad on my photoblog. I’m not sure it this is the best way to do this – but it worked for me and I’m happy with that :).

Caution: Please be careful when editing the HTML and make back-ups before you do – edit at your own risk.