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.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.
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.
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>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><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>#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><b:if cond='data:count >= 2 and data:count <= 4'>
/* Insert custom code here */
</b:if><b:if cond='data:count % 2 != 0'>
/* Insert custom code here */
</b:if>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>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.