Add Google AdSense Banner On Weebly Blog Section

If you are reading this post, you already know about Weebly. A free web builder to create beautiful website and blog. I posted some useful tips not too long ago about Weebly. You can read them here.

Now you may already know that Weebly allows you to post Google AdSense code and share 50/50 profit with Weebly. I would say, it's still a good deal. However, adding Google AdSenee on Weebly's blog section isn't straight forward. You can add an Ad banner in individual blog post or on the side bar, but you can't add them in the blog loop. You can't even change the layout or color easily.

So the only way to add Google AdSense banner in Weebly blog section is to hack the CSS and HTML DOM object.


So it will look like this on one of the website I build for generating passive income.

As you can see, I have one tall banner on the side bar and one wide 728x90 banner below the first post in the post loop. I actually have an other wide banner below the 3rd post. 

So here is how it works. There is an DIV element in the loop that seperate the blog post. It looks like this. 

<div class="blog-post-separator"></div>

So I want to insert my Google AdSense code within the <div>  section.

Here is how the code looks like.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async>
// Define Google Adsense
var AdSenseCode = '<ins ' +
' style="display:inline-block;width:728px;height:90px"' +
' data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"' +
' data-ad-slot="xxxxxxxxxx"></ins>';

function AdLoop(className, AdSenseCode) {
var elements = document.getElementsByClassName(className);
n = elements.length;
for (var i = 0; i < n; i++) {
if (i== 0 || i == 2) {
var e = elements[i];
e.innerHTML = AdSenseCode;
(adsbygoogle = window.adsbygoogle || []).push({});
}
}}
window.onload = AdLoop('blog-post-separator', AdSenseCode);
</script>

Done. Isn't that easy? Now you just need to replace the Google Adsense ID and Ad Slot with your own ID.

You then copy the Javascript code and paste that into the Blog Page Setting's Footer section.

If you want to show the banner after the first and third post, you change the i== 0 || i == 2 to i== 0 || i == 3

By the way, If you are US citizen, you may want to check out SolarDollar.net's solar energy ambassador program. You can build the same type of website on Weebly for little money and earn $250 on every solar panel subscription you sign-up in the entire USA.

Or you can just signup yourself to save monthly electric bill for the next 20+ years!

Leave your comment and let me know what you think.