How to Add Previous and Next Buttons in Blogger Post

Adding previous and next button in Blog post 

In this article you will get to know how you can add previous and next button at the end of every Blog post. It makes users to jump to next or previous article of your blog. This is can be done by a single click of them. It is also one of the method of SEO.

A to Z of Blog (Net Career)

To add previous and next button to your blog there has a which has to be placed in HTML and CSS which. The code will be genuinely working as I myself have tested this code on my blog and if code is changed then you will be informed if you subscribe to our newsletter. 

Adding these buttons to a post help in increasing engagement to one blog, it also helps to boost traffic website.

Steps to add previous and next post button:⬇️ 

1. Login to your Blogger dashboard and select the theme option. Then take a backup of your present theme and then click the edit HTML section.

2. Now first of all we will find the blog widget and under that we will find this code: <data:post.body/>

3. Then we will paste the code which is provided below:

<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> 

4. Now we have to paste a code in the CSS Section for which we will first of all search for "]]></b:skin> or </style>". Now we have to paste the CSS code below this code.

5. The CSS Code which have to be pasted above this 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);}} 

6. Now the previous and next button will be added automatically to each of your blog post.

Conclusion: 🍃

I hope this article helps you in adding the previous and next buttons to your blogger website. The above codes has been tried and tested on my another website (https://readaths,blogspot.com) or (Hanuman STUDIES). 

The credit for the Code goes to Techyleaf (This link will open in New Tab). If you face of problems during this process then you can ask me on social handles like Facebook, Instagram.

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

🔴Warning🔴

Beware of Cyber Fraudulent.