One of my readers asked me how to add a Google Adsense ad unit above
the header of a Blogger Blogspot blog. Rather than post a long reply I
decided to write an article about it so that others looking for help to
place an affiliate banner or Google Adsense banner at the top of their
blog will find the solution more easily.
To set up Blogger so
that ad units can be placed above the header requires the addition of a
snippet of code to your Blogger Template. I have aimed this tutorial at
beginners and newbies to Blogger. The tweak can be performed in less
than 5 minutes.
How to Add a Google Adsense Ad Unit or an Affiliate Banner Above the Blogger Header
1.
Login to Blogger if not already logged in
2. Navigate to
Layout > Edit HTML
3. As a precaution
back up your template by downloading the full template to your computer
4. Tick the
Expand Widget Templates box
5. Using
CTRL + F to bring up the search box find this line which in most templates will be directly after <body> tag
<div id='outer-wrapper'>
6.
Paste this block of code after this line to create a new section
<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>
7.
Next we need to add some CSS styling to the new section. Please note
that the banner will be centered by default. If you want to change the
alignment for some reason you just need to change the CSS styling.
Place the following code in the head section of your template before these lines:
]]></b:skin>
</head>
/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
#topads {margin: 0; padding: 0;}
#topads .widget {margin: 0; padding: 5px 0;}
8. Click the
Save Template button
9. Go to
Layout > Page Elements
10. You will now see that you can add a gadget to a new section above your header and directly below the navbar.
11.
To Add a Google Adsense Ad Unit
Click on
Add a Gadget and
choose your desired Google Adsense ad unit. If you are uncertain how
to add a Google Adsense ad unit to Blogger read my article
Google Adsense Tips for Blogger Blogs
To Add an Affiliate Banner
Or if you want to add an affiliate banner then you would click on
Add a Gadget and choose a
HTML/Javascript widget from the list of gadgets available in the menu. You would then
paste the affiliate banner code into the content box in the popup window and save your changes. Click on
View Blog and
you will see your new banner displayed above your blog's header. For
more detailed instructions about adding affiliate banners to a Blogger
Blogspot blog please refer to my article
Add an Affiliate Banner to the Blogger Sidebar
Tips and Troubleshooting
- If you wish to add more than one widget to the section you will need to change the template code:
from
<b:section class='topads' id='topads' preferred='yes'/>
to:
<b:section class='topads' id='topads' maxwidgets='3'>
This change to the template will allow you to add up to 3 widgets above the Blogger header.
- If
you wish to display your Google Adsense ad unit only on the post page
and not the home page then you need to add an if statement. For
instance go to Layout > Edit HTML after you have created your ad unit
and you will see that the code you inserted is now different. That is
because the Adsense widget code has been added. You are likely to have
something that looks like this:
<b:section class='topads' id='topads' preferred='yes'/>
<b:widget id='AdSense7' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:includable>
</b:widget>
</b:section>
By
inserting the code within an if statement we can control where it
appears. To have the Google Adsense ad unit only display on the post
page add these lines of code:
<b:section class='topads' id='topads' preferred='yes'/>
<b:widget id='AdSense7' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:adCode/>
</b:if>
</div>
</b:includable>
</b:widget>
</b:section>
In
today's tutorial you have learned how to create a new section above the
Blogger Blogspot header and how to add a Google Adsense ad unit to that
spot or an affiliate banner. You have also learned how to place that
Google Adsense unit or banner only on the post page rather than on every
page on your blog. Any questions please ask.
Guide to Blogger Blogspot FAQs. When you are looking for help with
Blogger Blogspot you want to get that help as fast as possible that's
why I have created a list of the most commonly asked questions by
visitors to my blog. Use this post as a ready resource for all your
frequently asked questions about blogging using the Blogger Blogspot
blogging platform.
Banners and Advertising
Building Site Traffic
Common Blogger Problems Fixes
Customize Blogger
Gadgetize Blogger
Google Adsense
Monetize Blogger
Posting and Commenting
Publicize Blogger
Search Engine Optimisation
Social Media
Tracking Site Visitors
Banners and Advertising FAQ
Where can I post a banner on Blogger Blogspot?
It
is possible to add an affiliate banner to Blogger in a number of
places. You can add a banner to the Blogger, above the header, above
the first post, within a post, below a post, in a sidebar, and in a
footer.
How do I place an advertising banner in a Blogger header?
Add an Affiliate Banner to the Blogger Header
How do I place an advertising banner in a Blogger sidebar?
Add an Affiliate Banner to Blogger Sidebar
How do I place an advertising banner above the Blogger header?
Add Google Adsense or banner above the Blogger header
Build Site Traffic
How do I encourage more visitors to my blog?
Find 10 hot tips to help you get visitors to your Blogger Blogspot blog
10 Tips to Build Traffic to a Blogspot Blog
Why do I need to add my blog to blog directories?
It
is not essential to add your Blogger blog to blog direcories but it is a
good idea since they are a valuable link and a ready source of traffic
for your blog and Submit a Blogger Blog to Blog Directories
What blog directories should I add my blog to?
There
are many blog directories on the net and more springing up all the
time. For some recommended blog directories check out this article:
Submit a Blogger Blog to Blog Directories
Common Blogger Problem Fixes
How do I remove the navbar from Blogger?
You can't actually remove the Blogger navbar but there is a trick to hide it.
Hide Remove Blogger Navbar
How do I reinstate a deleted Blogger navbar?
I am often asked how to fix a deleted Blogger navbar. Find the solution in:
Hide Remove Blogger Navbar
How do I fix the missing comments form below posts?
Many
custom templates were created prior to Blogger embedding the comments
form below posts. For details on how to upgrade your Blogger template
to include an embedded comments form below posts on the single post page
please refer to:
Add Missing Embedded Comments Form to Blogger
How do I fix the missing add a gadget in the layout screen?
If
you can no longer see Add a Gadget in Layout > Page Elements then
there is very likely a problem with your browser cache. Check out:
Missing Add a Gadget Solution in Blogger
Customize Blogger
How do I add categories to Blogger?
Blogger
doesn't have categories only labels. If you want to add a categories
section you can using a linked list but you will need to update it
manually.
Add a Categories Section to Blogger
How do I add a list of recent posts to Blogger?
By making use of your blog's feed you can display the 5 most recent posts on your blog.
Add a Recent Posts Feed to Blogger
How do I display a list of recent comments on Blogger?
By making use of your blog's feed you can display the 5 most recent comments on your blog.
Add a Recent Comments Feed to Blogger
Gadgetize Blogger
How do I add a Live Traffic feed to my blogger Blogspot blog?
If
you insert a free live traffic feed like Feedjit on your blog you will
be able to watch visitors arrive at your blog in real time and gather
information about where they came from, where they exited to, eearch
engine keywords and keyword phrases used to access your blog.
Add Feedjit Live Traffic Feed to Blogger
How do I add a ratings widget to Blogger?
If
you've seen star ratings on blogs you've visited lately and you would
like to add one to your blog check out my article on the Outbrain
ratings widget:
Add Outbrain Ratings Widget to Blogger
How do I add a bookmarking button to my blog?
Your visitors can share your posts with friends and add an online bookmark with an Add This Social Bookmarking button
Add a Social Bookmarking Button to Blogger
How can visitors subscribe to my blog?
You can encourage readers to sign up to regular updates of your blog by adding a subscribe button or link to your blog.
Add an Email Subscription Form and Links to Blogger Blogspot Blog
Google Adsense FAQ
Can I put Google Adsense on my Blogger Blogspot blog?
Yes
you most certainly can. Unlike other online blogging platforms like
Wordpress Blogger permits Blogger publishers to add Google Adsense to
any Blogger blog. However be aware that spam blogs - that is blogs
specifically set up to make money from Google Adsense are prohibited by
Blogger.
How much money can I make from Google Adsense?
If
your blog receives enough traffic (75+ visitors per day) you will be
well placed to earn revenue from your Blogger Blogspot blog. Want to
know more refer to:
Google Adsense Myths for Blogger Blogs
How Many Google Adsense Ad Units Can I Place on a Blogger Blog?
Google
allows 3 content ads, 3 link ads and 2 search boxes on any given page.
These rules are subject to change so if in doubt check Google Adsense
FAQ.
How do I add Google Adsense to Blogger?
You will find many tips on the basics of adding Google Adsense to Blogger in this article:
Google Adsense Tips for Blogger
Where should I place Google Adsense on Blogger?
Better Placement of Google Adsense on Blogger
Blogger Guide to Google Adsense Placement
Monetize Blogger
How do I add a donate button?
Adding a Paypal donate button to a Blogger Blogspot blog will encourage satisfied visitors to say thanks.
Add a Paypal Donate Button to Blogger
How do I make money from my Blogger blog?
5 Easy Ways to Make Money from a Blogger blog
Posting and Commenting in Blogger
Why do the links to my post titles get shortened?
When
you publish an article in Blogger a permalink gets created. If the
title of your post is longer than about 35-40 characters Blogger
shortens it. Check out this article for ideas on how to work around
this issue
How to Create Search Engine Friendly Permalinks
How do I post date my posts?
Blogger
allows publishers to post date their posts. Read the following article
to find out more about how to set a future publishing date for a post
Choose Your Own Blogger Post Date
How do I date my posts with a date that has already passed?
Blogger will let you set a date for a post in the past, present or future. Find out more by reading the following article:
Choose Your Own Blogger Post Date
Publicize Blogger
Why is it important to burn my Blogger feed?
there
are quite a few reasons reasons why it is a good idea to burn your
Blogger Blogspot feed at Feedburner check out this article to find out
more:
Blogger RSS Feeds and Feedburner
How do I burn my Blogger feed at Feedburner?
If
you would like to burn your Blogger feed at Feedburner to build
readership of your blog then this indepth article will show you how:
Burn Blogger RSS Feeds at Feedburner
How do I add a FeedFlare to a Blogger feed?
Not
only will a Feedburner FeedFlare encourage your visitors to share your
posts on various social media sites it will also copyright your material
if you add this notice to the bottom of your posts. Learn more about
Feedburner FeedFlares:
Add a Feedburner FeedFlare to a Blogger Feed
Search Engine Optimization
How do I get my Blogger Blogspot blog listed by major search engines?
If
you wait for search engines to crawl your blog it may take a long time
to appear in search engine results. You can speed up this process by
submitting your blog and a sitemap to major search engines. Find out
more:
Add Your Blog to Major Search Engines
How do I get listed by Yahoo?
For instructions on how to let Yahoo know about your blog and add a Blogger sitemap to Yahoo follow this guide:
Submit Your Blogspot Blog to Yahoo
Social Media
How do I add bookmarking button to my blog?
There
are a number of ways to add social media to your blog. One easy way is
add an all in one social bookmarking button by Add This.
Add a Social Bookmarking Button to Blogger
How do I add Twitter Links to Blogger?
How to Add a Twitter badge to Blogger
How to Add a Twitter Followers Counter to Blogger
Tracking Site Visitors
How do I know who is viewing my Blogger Blogspot blog?
There
are a number of programs that can help you track visitors to your blog.
One of the best, Google Analytics is provided free by Google. For more
about Adding Google Analytics to a Blogger Blog
What gadget lets me watch visitors as they arrive?
If
you want to see visitors arrive at your Blogger Blogspot blog you can
put a free Feedjit live traffic feed widget on your Blogger sidebar.
Add Feedjit Live Traffic Feed to Blogger.
0 comments:
Post a Comment