How To Add Previous/Next Button in Blogger 2023

In this post, I will explain to you how to add previous and next buttons on the blogger website. We all know that there is no plugin available in blogger so we need to add HTML code manually in the blogger theme How to add previous and next buttons in blogger?

This button helps the users to move to the next page or article and improves the user experience and also gives a professional look to the blogger theme.

It will increase traffic to your blog, reduce bounce rate and improve your website ranking and improve the overall SEO of your site.

Some free themes of bloggers do not have previous and next buttons, then we have to add previous and next buttons in the blogger theme by ourselves.

And I know you must be thinking that if you do not have any knowledge of coding, then how will you add the previous or next button, so then you do not have to take any tension? you don't need to know coding to apply it.

How To Add Previous/Next Button in Blogger

In this post, I am going to tell you a very easy method, by following which you will be able to add previous and next buttons in your blogger theme.

So let's follow every step given below:

Add previous and Next Buttons in the blogger 

Step 1- Login to the blogger dashboard and click on the theme option.

Note: Before making any changes to the theme, don't forget to take a backup of the theme.

Step 2- Click on Edit Theme- After that there will be some coding shown in front of you then you have to click ctrl+F. Then you will see the search box on the top. 

 

Step 3-  In that search box you have to search <data:post.body/>

Step 4- Then you have to copy the below code and paste it below the <data:post.body/>

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

   

Step 5- After adding this Html code you need to paste the CSS code. Search In theme ]]></b:skin> or </style> after found just copy and past CSS code which is given below 👇

CSS 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);}}

      

Step 6- After adding both HTML and CSS code to the theme click on the save button. And refresh the page. 

Now view your blog and check your blog post. previous and next buttons added to your blog.  

Conclusion:

We hope you liked our post and found it helpful for you to add previous and next buttons in blogger blog.  If you face any problem while adding these codes then you can ask your question in the comment section.