How To Add Previous And Next Button In Blogger

Today i will show u in this article how to add previous and next button in blogger at the end of the every your blog post . So user can read immediately previous post and next post by clicking single click.

In this article u will find HTML and CSS code 

STEP :- 1

      Login Your Blogger Account To your Device.

STEP :- 2

   Go To The Theme And Backup your Code After That Click To Edit HTML.

STEP :- 3

   Click ctrl+f to find this code <data:post.body/>

STEP :- 4

   This code the paste this HTML code below.

<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

      U need to add CSS code just Above  ]]></b:skin> or </style>

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

      Save And see  your blog Previous and next page button automatically added to your every blog post .

Watch The video For Learn More In Hindi