I have already posted many posts about Blogger. By following them you can customize your Blogger site very nicely. You can easily create many tools with the scripts of tools which I have shared for Blogger. Solve all problems related to Blogger, Blogger Templates, Blogger Widgets. You can check the posts from my profile for details.
In today's post, I will discuss how to add Previous and Next buttons to blogger . With the help of this widget, your blog visitors can easily view one post and then view another post. You can also call it another process to retain visitors on our website. This makes our blog bounce . Rates will come down a lot.
Visitors to our blog come from the Google search engine. If they visit our website by Google search, they leave the website after reading the post. But if we add this next and previous button widget to our blog, the visitors willof the websiteOther posts can be easily visited.
To add this previous and next post button to blogger, you just need to find the right code inside the theme and paste the codes that I will give below before and after it and save the theme. So let's start.
Steps to Add Previous & Next buttons in Blogger
- Go firstBlogger DashboardA.
- Now go to Theme and take a backup of your current theme. So that you can easily change the theme later in case of any problem.
- Now click on Edit HTML from the drop-down menu and redirect inside the theme, search for <data:post.body/> this code.
- If you find it , paste the following codes after this <data:post.body/> 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 paste the following CSS codes above the ]]></b:skin> or </style> tag.
/* 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);}}- Save the theme.
