How To Add Previous And Next Navigation 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 below 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
/* 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 button is added
automatically to each of your blogger blog posts.
WATCH THE VIDEO TO LEARN MORE
Comments
Post a Comment