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.

Turn Tumblr Blog Into AdSense Income Stream

Tumblr is one of the most popular blog platform on the planet. It already pass WordPress as the #1 most used blogging platform. Tumblr is so easy to use and can easily adding new content through their API or mobile app. However, there are many people doing it wrong.

What I want is to insert the 468x60 AdSense banner into my second post on the home page and on the single post page. I also want to add 300x350 square banner on the right side bar. The most important think is to skip the loop by inserting the following two tags. See attached image. 

{block:PermalinkPage} - Insert code on the single post page

{block:Post2} - Insert content only on the second post on the home page.