本文会在你的网站左右两侧增加上一篇和下一篇的悬浮箭头,便于浏览上文或者下文。
<nav class="nav-single-c"> <nav class="navigation post-navigation" role="navigation"> <div class="nav-links"> <div class="nav-previous"> <?php previous_post_link('%link','<span class="meta-nav-r" aria-hidden="true"><i class="fa fa-angle-left fa-3x" title="上一篇文章"></i></span>',true,'') > </div> <div class="nav-next"> <?php next_post_link('%link','<span class="meta-nav-l" aria-hidden="true"><i class="fa fa-angle-right fa-3x" title="下一篇文章"></i></span> ',true,'') > </div> </div> </nav> </nav>
/** 文章页左右翻页按钮 **/ .nav-single-c a { font-size: 50px; color: #b6b6b6; text-align: center } .nav-single-c a:hover { color: #555 } .meta-nav-l { position: fixed; right: 10%; top: 45%; width: 50px } .meta-nav-r { position: fixed; left: 10%; top: 45%; width: 50px } @media screen and (max-width:1300px) { .nav-single-c a { display: none } } .fa-angle-right{color: rgb(43, 181, 236);} .fa-angle-left{color: rgb(236, 60, 22);}
评论前必须登录!
注册