How To Add Previous And Next Buttons To Your Blogger Blog Post

How To Add Previous And Next Buttons To Your Blogger Blog Post

 In this article, I will show you how you can add a previous and next button at the end of every Blog post. So, users can easily jump to the immediate next and previous article with a single click. 

For, this you need to find the right place to add the HTML and CSS code that i am going to share in this article. 

This will help you increase engagement on your blog post and increase the overall page views on your website. So, the bounce rate will reduce and it helps in Search engine Optimization (SEO) also. It helps you boost 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 section. 

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='K2_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 below CSS code just above the ]]></b:skin> or </style> and save the theme code.

/* CSS code for previous-Next button */
.K2_Pre_Next .icon {width: 20px;height: 20px;}
.K2_Pre_Next {display: flex;position: relative;margin-top: 24px;}
.K2_Pre_Next .pre-btn,.K2_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;}
.K2_Pre_Next .pre-btn:hover,.K2_Pre_Next .next-btn:hover{background: #3a8f7b;}
.K2_Pre_Next .next-btn {position: absolute;right: 0;}
.K2_Pre_Next .pre-btn:hover .icon {animation: nav-prev-anim 300ms alternate infinite;}
.K2_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 will be added automatically to each of your blogger blog posts.

Video Tutorial

YouTube video

Conclusion

I hope this article helps you add the previous and next buttons to your blogger website. If you face any problems during this process then you can ask me in the comment section or social handles like Twitter, Telegram, etc.

You can also share the article on social media and tag us. Thank you 🙂

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

One Comment