Nội dung

Thêm nút next và previous vào trang single web WordPress

4 năm trước, Code theme wordpress, Plugin netweb, 655 Lượt xem

Code thêm bao gồm cả css

	<style>
		.nav-single {
			width: 100%;
			border-top: 1px solid #e3e3e3;
			padding-top: 20px;
			margin-top: 10px;
			border-bottom: 1px solid #e3e3e3;
			padding-bottom: 18px;
		}
		.nav-single:after{
		 display: table;
		 content: "";
		 clear: both;
		}
		.nav-single .nav-previous,
		.nav-single .nav-next{
		 width: 50%;
		 float: left;
		 position: relative;
		 padding-right: 15px;
		}
		.nav-single .nav-next{
		 text-align: right;
		 float: right;
		 padding:0 0 0 15px;
		}
		.nav-single span,
		.nav-single a{
		 display: block;
		}
		.nav-single a{
		 color: #0b1c5f;
		}
		.nav-single a:hover{
		 color: #610808;
		}
		.nav-single a span{
		 font-weight: 700;
		}
	</style>
	
	
	
	<nav class="nav-single">
	 <span class="nav-previous">
	 <?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr; Bài trước', 'Previous post link', '' ) . '</span> %title' ); ?>
	 </span>
	 <span class="nav-next">
	 <?php next_post_link( '%link', '<span class="meta-nav">' . _x( 'Bài kế tiếp &rarr;', 'Next post link', '' ) . '</span> %title' ); ?>
	 </span>
	 </nav><!-- .nav-single -->

Thêm nút với plugin netweb

netweb-next-previous-single giúp các bạn thêm 1 cách dễ dàng

[netweb_next_previous_single_shortcode]

//code php
<?php echo do_shortcode('[netweb_next_previous_single_shortcode]'); ?>

file css style

.blog__details__btns__item {
    display: block;
    border: 1px solid #ebebeb;
    padding: 25px 30px 30px;
    margin-bottom: 30px;
    background: #f5f5f5;
}

.blog__details__btns {
    margin-bottom: 40px;
}
Hình sau khi hoàn thành

Bài viết mới cập nhập

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
, , , ,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)