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ẻ ]]></b:skin>

#pp-more{
    display:block
}
#pp-less{
    display:none
}
#pp-less,#pp-more{
    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ẻ <b:include name='quickedit'/> ở trong đoạn <b:widget id='PopularPosts1'... </b:widget> như hình dưới.

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

Cuối cùng chèn đoạn javascirpt này trước thẻ </body>

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

Bước 3: Bấm lưu chủ đề và xem kết quả. Chúc các bạn thành công!