How to add an affiliate banner to blogger header

Follow @unziptech

Hello Readers, this is our next post in the blogging tips category. Almost every Webmaster uses their blogs to generate revenue from ads or affiliate marketing. Many people use blogspot or Google blogger service for hosting their blogs to cut off their hosting and domain name costs. Blogspot is the most widely used free blog hosting service but as compare to Wordpress’s inbuilt plug-ins and widgets it is fairly difficult to monetize your blog in blogger. I got many emails regarding how I added a banner to my blog header. No doubt there are many other places where you can insert a banner in blog’s body but the most targeted position as far as the CTR is concern it’s the header section. So I decided to post a detailed process that explains every thing about adding an affiliate banner to the header section of your Blog.

You need not to have a custom template to add a banner in your blog’s header; you can use any standard blog template to do this. You need to copy your affiliate banner code into a notepad file, so that we can easily use it later. If you know a little bit of HTML and XML it is not going to be difficult, though we will take precautions by taking the backup of current template code.

How to Insert an Affiliate Banner into a Blogger’s Header

• Login to your account first and go to Layout and then Edit HTML from your dashboard.
• There will be an option to backup your blog’s template on Edit HTML window. Click on that option and download the backup XML file.
• Now that you have backed up your template, click on Expand Widget Template checkbox.
  Use Ctrl+F to search from the template and locate these lines from the code <b:if cond='data:useImage'>
• Now add a division by using <div> tag right before this line by writing these lines of code: <div class=’mybanner’></div>
• You just created the container for your banner, insert the HTML code that we copied in a notepad file for your affiliate banner in between the <div> tag you just created.
• Now comes the styling part, you can do it with an embedded style tag directly into the div or you can define a CSS rule for the mybanner class in the header section for height, width and float attributes. The standard height is 60 pixels and width is 468pixles. You can also adjust the alignment by defining it in float attribute (right or left).
• For testing purpose click on preview to make sure you do not have any problem left in the code before saving it.
• If every thing is good click on the Save Template option, to make these changes permanent.

You just inserted an affiliate banner to your blog by editing a standard blogger template. If you have any problem regarding this procedure you can comment here so that I can help you better.

You may also check out our Blogging and Seo section for more cool tutorials like this.

If you like my work support the Blog by liking it on Facebook, following it on Google+, Linking back or Stumbling our posts via the buttons below. Stay tuned for more Blogging tips.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: http://unziptech.blogspot.com/2013/03/how-to-add-affiliate-banner-to-blogger.html HTML link code: <a href="http://unziptech.blogspot.com/2013/03/how-to-add-affiliate-banner-to-blogger.html">How to add an affiliate banner to blogger header</a> BB link code: [url=http://unziptech.blogspot.com/2013/03/how-to-add-affiliate-banner-to-blogger.html]How to add an affiliate banner to blogger header[/url]

Author: Mohammad Zafar Ahmad

Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+