How to Place Google Ad below First Post on Blogger Blog Homepage

Placement of Ads is one of the factors that needs to be considered when setting up an income-generating blog. Blogs have different layouts and with this, different approaches are required when it comes to placement of Ads to achieve a better result. What's working for your friend's or colleague's blog might not work for you which is why testing all Ad spaces on your blog is very important; the sidebar, the below post title, below post, header or the footer. Is any of these ad spaces giving you a high CPC (Cost Per Click) rate or a high CTR? If yes, then you need no one to tell to put more concentration on those ad spaces.

below first post ad placement on homepage


With this being said, experimenting the kinds of Ads that will work in those spaces is another factor that needs to be considered. According to the google adsense help, the 338 x 280 ad works well in the "content area" and the "below post", the Skyscraper works well on the "sidebar" while the "leaderboard" works well below the main navigation menu, the header.

To learn about other placement of ads, click the below link on how to place Google ads


For this tutorial, we will be testing another ad space entirely, "the below first post on homepage". This location is catchy as audience tend to see the advertisement upon visitation. Google has this already as a recommended position on the earnings tab on blogger dashboard when the below post and sidebar radio button is being checked but this option does not only display the ads below the first post only but also, above the footer of the blog which might not go well with what we want.

When setting up ads, the total number of ads displayed should be checked so as not to make the blog too clumsy and not to violate the Google adsense policy.

How to Place Google Ad below First Post on Blogger Blog Homepage

  • Below are the steps on how Google Ads can be placed below the first post on homepage.
  • Login to Blogger dashboard
  • Navigate to Template >> Click Edit Template
  • Click anywhere on the code page and press Ctrl+F to find the line of codes
<b:include data='post' name='post'/>
  • Copy the below line of codes and paste it after the searched codes
<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin-top:0px; margin-bottom:10px;">
Insert Parsed AdSense Code
</div>
</b:if>

You can now preview your blogger template to see if you are on track or not. If you are, then proceed to saving the template.

NB: To parse / encode your adsense code, click here

 I hope the tutorial is self explanatory!!! Should you need further assistance, do not hesitate to contact me or use the comment section

Read More »

How to Add CSS to blogger blog

CSS is an abbreviation for Cascading Style Sheet that gives the required design, layout to a blog or website using lines of codes. In comparison to man, I will say it's like a clothing to the body or working out in the gym to give the body the desired figure. Gone are the days when plenty codes of HTML do the job but now, with just a little line of CSS code, you get your desired result. Not saying the HTML is useless, without it, no blog and no websites.They both have their roles, HTML provides the framework while the CSS gives the design and layout of the website without taking much time.

adding css to blogger blog

How to Add CSS to blogger blog?

Since our main concern is adding the CSS code to blogger blog, I will be sharing two ways on how this can be done.

  • The Manual Method
  • The Template Design Method
The Manual Method

What do I mean by the Manual Method? Here, the template of the blog is being tampered with. the template is edited before the lines of CSS code is being inserted. This method is not recommended for newbies that are afraid of the codes but notwithstanding, how the codes will be inserted manually will be talked about here.

NOTE: Always BACKUP your template before editing!!!

To do this,

  • Login to your blogger dashboard
  • Navigate to Template and click on ""Edit HTML"" just below your blog desktop preview
  • Search for the below line of code 
]]></b:skin>
  • Paste the CSS codes above the searched code then SAVE.
The Template Design Method

This is the easiest and recommended means of adding a CSS code to blogger blog as the template is not in any way tampered with.

To do this,
  • Login to your blogger dashboard
  • Navigate to Layout
  • Click on the Template Design just above the layout area
  • Click Advance from the left-side panel
  • Input the CSS Code
  • The Click Apply to blog on the top right corner of the page
The Template Design page also has a preview section that allows you see the effect of the CSS code you are about to apply even before it is save. Use the preview page to adjust the CSS codes until your desired target is accomplished.

Now that you have learnt the two(2) ways on how the CSS code can be added to blogger blog, Try it and send your feedback should you need further assistance.
Read More »