One, upload image materials

Save the following two images to your local, then upload them to your media library through multimedia, and get the corresponding URL address.

![right_64](http://cdn.xiaoz.top/wp-content/uploads/2015/06/right_64.png)
![left_64](http://cdn.xiaoz.top/wp-content/uploads/2015/06/left_64.png)

Two, add CSS style

Add the following CSS style to the style.css file in the theme directory. If you use Qiniu cloud storage, please delete the cache in Qiniu, otherwise it will not take effect. Alternatively, you can add it directly to the header.php file in the theme directory, and put the code before </head>.

<style>
#art_left{
position:fixed;
top:50%;
left:10px;
margin-top:-32px;
}
#art_right{
position:fixed;
top:50%;
right:10px;
margin-top:-32px;
}
</style>

Three, add js function

Add the following code to the single.php page in the theme directory at the appropriate location for calling. Replace the image address with your own URL, following the method in step one.

<div class="prev" id="prev" style="display:none;"><?php previous_post_link('« %link') ?></div>
<div class="next" id="next" style="display:none;"><?php next_post_link('%link »') ?></div>
<div id="art_left">
<a href="javascript:;" onclick="jump('p');">
<img src="your image material address" />
</a>
</div>
<div id="art_right">
<a href="javascript:;" onclick="jump('n');"><img src="your image material address" /></a>
</div>
<script>
// Declare global variables
var prev;
var next;
// Get the corresponding URL
$(document).ready(function(){
prev = $("#prev a").attr("href");
next = $("#next a").attr("href");
});
// Call the method for jump
function jump(re) {
if(re == 'p') {
window.location.href = prev;
}
if(re == 'n') {
if(next == null) {
alert('No more!');
return false;
}
else{
window.location.href = next;
}
}
}
</script>

With the above three steps, you can switch to the previous and next articles using the left and right fixed floating buttons. The effect can refer to the left and right sides of the articles on Xiaoz's blog. Adding the above code may require some basic knowledge of HTML, otherwise it is easy to add errors. If you encounter any problems, you can also contact Xiaoz for help.