How to Add Custom Ad Code to Blogger Archive Pages

On
Custom layouts of blog entriesIt's a common perception that Google's Blogger platform is quite restrictive and doesn't offer much flexibility when compared with other blogging platforms. To some extent, it is true for technically challenged. But, if you're aware of the Blogger template system, you can do a lot more than what an average user is capable of. Today, we're going to learn about inserting custom code between Blogger archive page entries and that too based on different conditions. Most probably you're going to use this technique for inserting some kind of ad code between the entries, but, of course, you're free to insert just about any kind of custom code. The code snippets given below works with older templates. If you're using a new Blogger template system, these code snippets may not work. Try it on a demo blog before applying it to the real one. Apart from the conditions given here, you can create your own to insert custom code as per your requirements. Some of these snippets can be used on single post pages too.

Custom layouts of blog entries
Some of the techniques mentioned below apply to single post pages too which enables you to apply custom code based on multiple conditions to fine-tune the code insertion process as per your needs.

Read Also:
A Step-by-Step Guide to Configure HTTPS on a Custom Domain Blogger Blog


If you're not familiar with Blogger theme code editing, I'll suggest you skip this to avoid any mishap. I generally use this technique to display specific types of ads on posts related to a specific category.

Getting Started

The very first thing you need to find is the exact place in your theme where all this code insertion exercise will take place. Once you've found it, you can proceed with the actual custom code insertion process. Following is the code snippet you need to find in your theme.


<!-- posts -->
    <div class='blog-posts hfeed masonry'>
      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop index='count' values='data:posts' var='post'>

Note: You may not find this code in your template if it's a dynamic Blogger template.


All the custom code needs to be inserted right below this code snippet. You can target different types of archive pages based on the conditions supplied by you.

No matter which type of archive page you're targeting, there's a fixed number of posts that are displayed on these pages—in one go. The number of posts shown on these pages once at a time is governed by the following setting.

Blogger archive pages post settings
The example shown above displays up to 10 posts at a time on an archive page. You can change this number through the Settings → Posts → Max posts shown on main page option.

Another important thing to note—before we move ahead—is to see where the custom code is inserted around each entry in the list. The following illustration visualizes it.

Illustration of blog post listing
Two things need to be noticed in the image shown above.

✅ Custom code is always inserted before the post-entry—not after it!
✅ Indexing of post entries starts from 0 and not 1.

So, if you want to target 3rd post in a listing, you'll use the index number (count) 2 in your code. With these two pieces of important information at our hand, it's time to move ahead to the code.

Selecting Page Types

The very thing we'll pay attention to is to learn to select the type of archive pages we want to select for our custom code. Let's say we want our code to appear on index archive pages and every other type of archive page i.e., label pages, author pages, date-wise pages, and so on.

Index archive pages display the posts in reverse chronological order starting from the newest to the oldest one. To select these two types of archive pages, we'll use the following code condition.


<b:if cond='data:blog.pageType in {"index", "archive"}'>
/* Custom code here */
</b:if>

The condition format I've used enables me to apply multiple conditions easily in a shorter format. While testing the conditions, you can write simple text in place of custom code to view the placements where the results will appear on the page.

Applying Placement Conditions

Once you've selected the type of archive page to target, the placement conditions need to be supplied. These are the two most common placement conditions that fulfill most of the needs.

✅ The posts with a specific label. Labels are quite similar to WordPress categories.
✅ The posts at specific positions within the page listing.

So, let's get started and see how to target these two conditions.

#1 Targeting posts with a specific label

Let's suppose we want to insert custom code before posts having the label Blogger in the listing. To do so, use the following code snippet.


<b:if cond='data:post.labels all (l => l.name in {"Blogger"})'>
 /* Insert custom code here */
</b:if>

You can change the label value to whatever text you may want to target. You can also nest this condition inside the page type targeting condition to target both the page type as well as the post label at the same time. The revised code should look something like this.


<b:if cond='data:blog.pageType in {"index", "archive"}'>
<b:if cond='data:post.labels all (l => l.name in {"Blogger"})'>
 /* Insert custom code here */
</b:if>
</b:if>

Let's move on to the next targeting condition.

#2 Targeting posts at a specific position within the listing

Let's say you want to display a custom code above each entry in the post listing except the very first entry. To do so, you'll need the following code snippet.


<b:if cond='data:count > 0'>
 /* Insert custom code here */
</b:if>

Let's say you want to display custom code only on the 3rd, 4th, and 5th post entries within a listing of 10 or 20 or 30 posts. To do so, use the following code snippet.


<b:if cond='data:count >= 2 and data:count <= 4'>
 /* Insert custom code here */
</b:if>

If you want to display custom code before every even number post in the listing i.e., 2nd, 4th, 6th, 8th, and so on, use the following code snippet.


<b:if cond='data:count % 2 != 0'>
 /* Insert custom code here */
</b:if>

So, if we sum it up and combine multiple conditions to see how we can apply them to the archive listing, here's one more example which exactly showcases that.

For example, the condition is to target index page listing and within those pages, we only want to target entries having label WordPress associated with them. We also want to make sure if these two conditions are fulfilled, the code should only be inserted if it's an even number post.

To apply, all these three conditions, we can use the following code snippet.


<b:if cond='data:blog.pageType in {"index"}'>
<b:if cond='data:post.labels all (l => l.name in {"WordPress"})'>
<b:if cond='data:count % 2 != 0'>
 /* Insert custom code here */
</b:if>
</b:if>
</b:if>

I can group these multiple conditions in a single line, but for clarity, I've divided it into three separate lines so that everyone can understand it, easily.

You can see that the possibilities are endless and all you need is the knowledge to implement the conditions are per your needs. Make sure, you do not overdo it overwhelming the post listing with a lot of custom code which may degrade the browsing experience of the blog visitors.

So, go ahead and try these custom code insertion techniques on your Blogger blog's archive pages.