Tạo nút Xem thêm cho tiện ích bài đăng phổ biến

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn Tạo nút Xem thêm cho tiện ích bài đăng phổ biến. Thủ thuật này giúp giới hạn số bài cho tiện ích bài đăng phổ biến và khi bạn bấm xem thêm thì sẽ hiện đầy đủ số bài, sẽ giúp tiết kiệm được không gian sidebar hơn cho blog bạn.

Xem Demo:

Xem demo

Bước hướng dẫn:

Bước 1: Vào Blogger > Bố cục > Thêm tiện ích bài đăng phổ biến
Vào nhớ chọn số bài viết trên 5 bài nhé Bước 2 Vào Chủ đề > Chỉnh sửa HTML
Chèn đoạn CSS sau vào trước thẻ ]]>

#pp-show{
    display:block
}
#pp-hide{
    display:none
}
#pp-hide,#pp-show{
    text-align:center;
    padding:7px 0;
    margin:10px 0 3px;
    border:1px solid;
    width:50%;
    border-radius:50px;
    cursor:pointer;
    color:#2f8fca;
    margin-left:25%;
    box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3)
}
.PopularPosts ul li:nth-child(1n+6){
    display:none
}

Tiếp theo bạn bấm vào Chuyển đến tiện ích > PopularPost1 Dán đoạn code sau vào dưới thẻ ở trong đoạn như hình dưới.

<a id='pp-show'>Xem thêm</a>
<a id='pp-hide'>Rút gọn</a>

<script type='text/javascript'> //<![CDATA[
$("#pp-show").click(function()
{
$("body").append('<style id="pp1">#pp-show{display:none!important}.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:block!important}</style>');
$("#pp2").remove()
}
);
$("#pp-hide").click(function()
{
$("body").append('<style id="pp2">.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:none!important}#pp-show{display:block!important}</style>');
$("#pp1").remove()
}
);//]]> </script>

Đăng bởi: Nguyễn Trọng Trung Link Facebook Hoặc Blogger: https://www.bytrongtrung.com/