Today, I'm share New Exclusive Previous / Next Navigation Button for WordPress Blog. Previously I was already post on this topic for blogger - New cool Left-Right Sliding Arrow Floating Next - Prev Button For Blogger. So let's check out and enjoy this article -
How to Add Previous / Next Navigation Button
Open your WordPress theme’s style.css file and paste below code:
.arrowLeft a {
position: fixed;
z-index: 100;
left: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
.arrowLeft a:hover {
left: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
.arrowRight a {
position: fixed;
z-index: 100;
right: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
.arrowRight a:hover {
right: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}
.arrowNav a {
background: #225773;
color: #fff;
text-decoration: none;
font-size: 16px;
}
Open Single.php file and put below code at the end of post:
<div class="arrowNav">After this clean your cache and you should be able to see navigation arrows on single post page.
<div class="arrowLeft">
<?php previous_post('%','←', 'no'); ?>
</div>
<div class="arrowRight">
<?php next_post('%','→', 'no'); ?>
</div>
</div>
We hope all of you enjoy this post and share it. Please drop your valuable comment.
See more tutorials on:
