Chào các bạn cũng đã lâu rồi mình chưa post bài hướng dẫn về Blogger nên nay mình sẽ hướng dẫn các bạn cách tạo phân trang trong bài viết dành cho Blogger / Blogspot.Đây cũng chỉ mọt Thủ Thuật Blogger nhỏ cho các bạn mới chơi blogspot thôi ạ. :)
ƯU ĐIỂM:
Artikel Terkait
- Hướng Dẫn Tạo Link Động Ở Trang Chủ Chuyên Nghiệp Trên Blogspot
- Trang trí Tết 2019 cho Blogspot bằng hình ảnh câu đối, cành mai treo hai bên
- Hướng dẫn cài đặt comment của DISQUS cho Blogger
- Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp
- Get Link Video Google Drive Đơn Giãn Mới Nhất 2019
- Nhẹ
- Đẹp
- Đẹp
HƯỚNG DẪN CÁCH LÀM:
Bước 1: Bạn đăng nhập vào Blogger -> Chủ đề -> Chỉnh sửa HTML bạn nhấn tổ hợp phím Ctrl F và tìm kiếm thẻ ]]></b:skin> và dán đoạn css sau lên phía trên để làm đẹp cho nó
ul.post-pager{margin-top:15px} .post-pager li{padding:0;display:inline-block;width:50%} .post-pager li strong{display:block;padding:0 0 10px} ul.post-pager{background-color:#FFF;display:block;width:100%;overflow:hidden} .post-pager li a{color:#555;display:block;padding:20px 35px} .post-pager li:hover{background-color:#FFC000} .post-pager li:hover a{color:#888;background:#f8f8f8} ul.post-pager *{transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease} .post-pager .previous{float:left} .post-pager .next{text-align:right} .post-pager span{text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;overflow:hidden;-webkit-box-orient:vertical} @media screen and (max-width: 420px) { ul.post-pager{display:none} }Bước 2: Bạn chú ý đặc biệt bước này, bạn tìm đến thẻ<data:post.body/> tuy nhiên kết quả sẽ cho nhiều hơn 1, vì vậy bạn cần thử từng cái (nên backup template nếu có lỗi thì còn mẫu để cập nhật lại)
Sau đó bạn dán code sau phía dưới <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <ul class='post-pager'> <li class='next'> <b:if cond='data:newerPageUrl'> <a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'/><b:else/> <a><strong>Kế tiếp</strong> <span>Bạn đang xem bài đăng gần đây nhất</span></a> </b:if> </li> <li class='previous'> <b:if cond='data:olderPageUrl'><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'/><b:else/><a><strong>Trước đó</strong> <span>Bạn đang xem bài cuối</span></a> </b:if> </li> </ul> <script type='text/javascript'> //<![CDATA[ !function(t){var n=t("a.newer-link"),e=t("a.older-link");t.get(n.attr("href"), function(e){n.html("<strong>Kế tiếp <i class='fas fa-angle-double-right'></i></strong> <span>"+t(e).find(".post h1.post-title").text()+"</span>")},"html"),t.get(e.attr("href"), function(n){e.html("<strong><i class='fas fa-angle-double-left'></i> Trước đó</strong> <span>"+t(n).find(".post h1.post-title").text()+"</span>")},"html")}(jQuery); //]]> </script> </b:if>Lưu mẫu lại và vào bài viết để xem kết quả. Chúc bạn thành công!
Subscribe Our Newsletter
0 Response to "Tạo phân trang nền đen cực chất cho blogger"
Đăng nhận xét