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 == "item" '> <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: system-ui;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;}
a.next-btn:hover, a.pre-btn:hover {text-decoration: none!important;}
.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
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 🙂
I’m getting adsense error when I do this
Hi, this is so helpful! I wonder if you know how I can make the button only to navigate through posts within the same label. Just like how taxonomy or series in wordpress works?
Thank you so much. It is working!!!.