How To Add Previous And Next Buttons To Blogger Blog Post

In this article, I will demonstrate how to add previous and next buttons at the end of each blog post. This will allow users to navigate to the immediate next and previous article with a single click.

It is important to add the HTML and CSS code in the correct place, and this article will guide you on where to do so.

This tip can assist you in improving the engagement on your blog post, resulting in increased page views on your website. Consequently, the bounce rate will decrease, which also benefits your website's Search Engine Optimization (SEO). Additionally, it can aid in boosting your website traffic.

So, let's follow the steps as shown below. 

Steps to Add Previous / Next buttons in Blogger

Log in to your Blogger dashboard and select the theme option. 

Now take a backup of your theme and click on the edit HTML.

Now you need to find the blog widget and under that, you need to find this code <data:post.body/>

Now paste the HTML code just below the code

<b:if cond='data:blog.pageType == &quot;item&quot; '>
<div class='T4_Pre_Next'>
<b:if cond='data:olderPageUrl'>
<a class='pre-btn' expr:href='data:olderPageUrl'>
<div class='icon'><svg class='h-6 w-6' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M11 19l-7-7 7-7m8 14l-7-7 7-7' stroke-linecap='round' stroke-linejoin='round'/></svg></div><div class='label'>Previous</div></a>
</b:if>

<b:if cond='data:newerPageUrl'>
 <a class='next-btn' expr:href='data:newerPageUrl'>
 <div class='label'>Next</div>
 <div class='icon'><svg class='h-6 w-6' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M13 5l7 7-7 7M5 5l7 7-7 7' stroke-linecap='round' stroke-linejoin='round'/></svg></div></a>
</b:if>    
</div>
</b:if> 

Now you need to add the CSS code below just above the ]]></b:skin> or </style> and save the theme code.

.T4_Pre_Next .icon {width: 20px;height: 20px;}
.T4_Pre_Next {display: flex;position: relative;margin-top: 24px;}
.T4_Pre_Next .pre-btn,.T4_Pre_Next .next-btn {display: flex;align-items: center;justify-content: center; gap: 8px;font-family: "Inter", sans-serif;background: #ff1a75; color: #fff;text-decoration: none;padding: 8px 24px;font-size: 16px;min-width: 150px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;width: 50%;border-left:1px solid; border-right:1px solid;}
.T4_Pre_Next .pre-btn:hover,.T4_Pre_Next .next-btn:hover{background: #3a8f7b;}
.T4_Pre_Next .next-btn {position: absolute;right: 0;}
.T4_Pre_Next .pre-btn:hover .icon {animation: nav-prev-anim 300ms alternate infinite;}
.T4_Pre_Next .next-btn:hover .icon {animation: nav-next-anim 300ms alternate infinite;}
@keyframes nav-prev-anim { to {transform: translateX(4px);}}
@keyframes nav-next-anim {to {transform: translateX(-4px);}} 

Now the Previous and Next buttons are added automatically to your blogger blog posts.

Conclusion

This article helps you add the previous and next buttons to your blogger website. If you face any problems Comment Down!