How to add advertisement blocks between posts using Jquery? [Video]

Monetizing blog requires you to add advertisement banners above the fold ,to complete this requirement blog posts can create hindrance for you.This post will show you how can you add advertising banners between posts using Jquery.

Secondly, for Blogger users their is an option available to add adsense ads between posts,but personally I found that the custom made templates or even official templates doesn't shows hat ad.Simply try this Jquery method you will find it helpful.

See the Pen Implement ad block between posts by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

If you will look at the above pen you will find that the div with class ad-code is display none,where as after implementing the Jquery the block is set after second post.So how does it happen?

Let me first clear something: I've used a div to implement code,it is because sometimes (almost) that it is not possible to add code via Jquery directly because they both override,that is why this method is used.

The use of Jquery is not a big deal,variable adcode takes the html of div and the code is implemented via .after() function of Jquery.The selector will use nth-child() ,it is to select the number of post after which the ad will show up.

What if you want to show multiple ads?

The selector is second post but in place of 2 you can write even or odd too to repeat the code after every even number or odd number respectively like this one:

$('.post:nth-child(even)').after('<div class="ad-block">'+adcode+'</div>');

By using the code below the ad will be displayed after every even number post like 2,4,6 and so on.

Video

How to add advertisement block between posts... by hamzadhamiya

Anything not clear? Comment please.....