给网站添加文章翻页按钮

科学软件(梯子)

本文会在你的网站左右两侧增加上一篇和下一篇的悬浮箭头,便于浏览上文或者下文。

 <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);}

 

赞(0)
分享到: 更多 (0)
广告位招租了啦!!!快来联系
此处应有广告

评论 抢沙发

评论前必须登录!

 



歪主题WordPress建站
售前解惑答疑 售后技术支持

很高兴本文可以为您带来灵感和帮助!

支付宝扫一扫打赏

微信扫一扫打赏

QQ扫一扫打赏