How to Add Google AdSense to Your Tumblr Blog

By Matthew Guay on July 20th, 2010

Would you like to make a bit of revenue from your blog?  Here’s how you can make your content work for you by adding Google AdSense to your Tumblr blog.

Blogging can be serious work, and with your easy-to-use Tumblr blog, you might be posting more than ever.  You may be writing about your beautiful vacation, sharing the newest wallpaper you designed in Photoshop, or explaining how to get your dog to quit barking at frogs.

Either way, your blog takes real time, and it might be nice to make a little money from it.  Google AdSense has enabled bloggers around the world to get ad revenue from their content.  The Tumblr Terms of Service require that your blog be used primarily for blogging, but they do allow you to use AdSense or other ad systems as long as that’s not the primary focus of your site.  It’s fairly easy, so let’s see how to add it to your blog, no matter what theme you’re using.

Please note: This article is designed for users who don’t know how to edit HTML, and so may seem overly simplified if you’re already a code ninja.  But that’s no problem; just skip over the parts you already understand, and use the parts you do need!

Signing up For AdSense

Before you can add AdSense to your site, you’ll need to register for an AdSense account with Google.  If you already have an account, skip to the next section; otherwise, browse to the AdSense site (link below), and click the Sign up now button.

sshot-2010-07-20-[12-06-11]

Fill out the form as usual, with information about your site as well as some personal contact information.  Make sure to check the boxes at the top with guidelines about ads, and make sure your site follows them or your AdSense account could be suspended.

image

Accept the additional policies at the bottom of the form, and then click Submit Information.

image

Make sure your information is correct, then select if you have a Google account and either enter your account info or create a new account.

image

Once you’re finished, you’ll have to wait between 1 and 3 days for your account to be approved.  Once you receive your conformation email, head back to the AdSense site, but this time, log in with your Google account info.

image

If you have problems with AdSense, or need more info about your account, check out Google’s AdSense Help Site (link below).

Create an AdSense Unit for Your Tumblr

Once you’ve got an AdSense account and are logged in, click on the AdSense Setup tab to create a new ad for your site.

image

Select the AdSense for Content link.

image

Choose if you’d like an Ad unit with text or image ads, or a link unit that only has links to sponsored terms on Google.  Ad units are often a good choice for a sidebar, which link units may look better in a header or footer of a theme.

image

Select the size you want from the drop-down menu beside Format.  Pick something that would fit good on your site; if you’re unsure, click the Ad Formats link to see examples.

image

From the Colors section, select the colors that would match your site, or chose one of the preconfigured Palettes.

image

Finally choose the font family and size for your ads, and select if you’d like square or rounded corners.

image

Once you’re finished, click Continue at the bottom.

image

You’ll now be presented with a textbox showing your AdSense unit’s code.  Select the text and copy it, as we’ll need this to add the AdSense to our blog.

image

Note that you can always access your ad units in the future and edit them from the Manage Ads link in AdSense.

image

Adding AdSense to Your Theme

Now that you’ve got your AdSense code, it’s time to add it to your theme.  Browse to the Customize page on Tumblr by clicking Customize in your Tumblr dashboard or by following the link below.

image

Select the Theme tab in the Customize page,

image

Scroll down, and then select Use custom HTML at the bottom of the tab.

image

After the code loads, you should see the HTML and CSS code that makes up your site’s theme.  There are endless potentials for customization here, but if you’ve never designed a website from scratch or even edited HTML, it can look intimidating.  Don’t worry; it’s easy to add the code!

Note that if you’ve already edited your theme’s code in the past, you may see this by default without having to press the custom HTML button.

image

You’ll now need to find where to place your AdSense code in your theme.  If you’re a website designer, you can look around the code and place it anywhere you want: inside <head>, <body>, or more.  If you’ve never used HTML code before, though, there’s another trick you can use.  Spot some text near the place on your theme where you want to place your ads.  For instance, if you want to place it near on a sidebar under the About this blog description, look at your theme preview to see what default wording it uses.  Pick something that’s a title or other default text, as your page description itself will not be in the code.

image

Now, press Ctrl+F in your browser to open the search dialog, and enter the term you want to find.  The search box will look different, depending on your browser, but will work the same.

image

Look for the highlighted text in your code.  We want to post our content right after this section.  Note that the next line is still describing the profile, so it goes with the About box still.  We’ll want to paste our ad code right after this.

image

In this theme, we searched for About, and pasted the code right below the code for the about box, just like we showed above.

image

Once you’ve entered the code, click the Update preview button on the bottom of the tab.

image

You can now see your changes on the sample blog preview.

image

If it looks good, click Save in the top right corner, and then visit your site in a different tab or window.

image

Here’s our AdSense right in my Tumblr sidebar.  The colors blend in with my theme, and the ads are at least somewhat related to what I’m writing about.

Remember: Don’t click on your own ads, or your AdSense account may be suspended!

image

If the ads look too close to the next item in the sidebar, as they did in this theme, you can easily add some space by entering <p> </p> right after your </script>.

image

This works great on many themes, including the default Redux theme.  We added the same ad panel to the sidebar in this theme, and it worked great.  No extra spacing required for this theme.

image

To get the ads where we wanted this time, we opened the code, searched for Follow on Tumblr, and pasted the code right above it as below.  This is one of the best ways to get your add right where you want it, even if you’re not a web designer; just find something you want your ads near, search for it, and paste it above.  It may take a little trial and error, but you might be surprised how quickly you’ll get the hang of it!

image

You can even add ads to the footer of your theme.  Paste your ad code inside the <footer> of your theme, or if it doesn’t have one, you can just post it right before the </HTML> at the end of the theme code.  Here we added the <div id=”footer”> of the Neue theme.

image

Remember that AdSense allows you to show up to 3 AdSense and 3 link units on a page, but again, Tumblr doesn’t want blogs to be ridiculously covered with advertisements.  So, perhaps you may want to put one in your sidebar and one in the footer, or some other configuration that you think looks good and still focuses mainly on your blog’s content.  Sometimes less is more; people won’t like your site as much if it’s plastered with ads from top to bottom!  Feel free to play with it and get the ads looking great with your theme.

Undoing Mistakes

If you somehow accidently delete something or mess your theme up, you can revert your changes by pressing the Disable custom HTML button on the bottom of the editor window.

image

Tumblr will remind you that this will remove your theme customizations.  Press Ok, and then press Save in the top right corner.

image

Now your theme will revert to its default settings, and you can come back and try editing the theme again if you want.  One thing to note, though, is that changing your theme around may remove some of your customizations such as Disqus comments.  Click the Appearance tab and make sure all of your settings are correct, or add them back if you need to after restoring your theme.

image

Conclusion

No matter what theme you’re using, it’s fairly easy to add AdSense to your Tumblr blog.  Try out the different places you can place the blog, find something that works good for your blog, and see how it works.  Don’t expect to make much in AdSense revenue, especially if your blog doesn’t get much traffic, but you may at least make enough to justify a premium theme for your blog or an occasional new program for your computer.  Above all, write and post the content that you love, and you’ll enjoy your blog!

If you don’t already have a Tumblr blog setup, don’t forget to check out our articles on how to Start a Tumblr Blog, Add Your Own Domain, and Add Traditional Comments with Disqus.

Links

Signup for Google AdSense

AdSense’s Help Site from Google

Customize Your Tumblr Blog

Matthew digs up tasty bytes about Windows, Virtualization, and the cloud, and serves them up for all to enjoy!

  • Published 07/20/10
More Articles You Might Like

Enter Your Email Here to Get Access for Free:

Go check your email!