Hướng dẫn phân trang bài viết trên blogspot
Phân trang bài viết thường áp dụng cho blog có xu hướng có các bài đăng dài như blog tin tức, chức năng chia bài viết thành nhiều trang và chỉ hiển thị khi người dùng nhấp vào nút số tiếp theo hoặc tiếp theo. giống như phân trang của blog
Đối với những bạn không muốn viết bài viết dài, bài đăng chia tách này sẽ rất hữu ích, ngoài một blog trông gọn gàng hơn cũng có thể cung cấp trải nghiệm đọc tốt hơn.
Hướng dẫn phân trang bài viết trên blogspot
Truy cập vào Blogger.com -> Chủ đề -> Chỉnh sửa HTML sao chép mã CSS dưới đây đặt trên thẻ đóng ]]></b:skin>
.postNav{display:flex;flex-wrap:wrap;justify-content:center; font-size:90%;line-height:20px; color:#fefefe; margin-top:30px;margin-bottom:0}
.postNav > *{display:flex;align-items:center; padding:10px 13px;margin-bottom:10px; color:inherit;background-color:#f09800; border-radius:2px;text-decoration:none} .postNav > *:hover{opacity:.8}
.postNav .current{background-color:rgba(0,0,0,.03); color:#989b9f}
.postNav{font-size:13px; margin:50px 0} .postNav > *{padding:8px 15px;border-radius:2px;margin-bottom:8px} .postNav > *:not(:last-child){margin-right:8px}
Sao chép mã javascript dưới đây đặt trên thẻ đóng ]]></body>
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.post-body').children; var splitdong = checkChildren(nodes, 'postSplit').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('postSplit').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('postSplit').innerHTML += "<div class='postNav' id='postPager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('postPager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('postPager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('postPager').innerHTML += "<a href='"+url+"?page="+nn+"'>Next</a>";} }); /*]]>*/</script>
</b:if>
Khi viết bài, bạn nên đặt tất cả vào trong thẻ dưới đây
<div id='postSplit'>
<h2>Page 1</h2>
<p>Lorem ipsum dolor sit amet</p>
<!--nextpage-->
<h2>Page 2</h2>
<p>Lorem ipsum dolor sit amet</p>
<!--nextpage-->
<h2>Page 3</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
