Tiện ích bài viết liên quan (Related posts) là tiện ích hiển thị những bài viết có cùng chủ đề (label), tiện ích này khá hữu ích trong việc tăng lượt xem (views) cho bài viết của bạn. Khi đọc một bài viết hữu ích, độc giả thường có xu hướng tìm kiếm những bài viết có cùng chủ đề để tìm hiểu thêm. Related posts là tiện ích có thể làm tốt công việc đó.
Hướng dẫn thực hiện
Bước 1: các bạn chèn đoạn code sau phía trên thẻ đóng </head><b:if cond='data:view.isPost'><style>.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}.related-simplify h4{text-transform: uppercase;background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:500;color:#000;top:-21px;left:2.5%} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#2FA1B3;} .related-simplify a{color:#333!important;font-size:16px;margin:0 0 0 30px;font-weight:400!important} .related-simplify a:hover{color:#2FA1B3;} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:16x;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}</style><b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>//<![CDATA[var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]></script></b:if></b:if>
Bước 2: Các bạn tìm đến thẻ <data:post.body/> và thay thế nó bằng đoạn code sau:
<div expr:id='"post1" + data:post.id'/><div class='related-simplify'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/></b:if></b:loop></b:if><h4>Bài viết cùng chuyên mục</h4><script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></div><div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div><script type='text/javascript'>var obj0=document.getElementById("post1<data:post.id/>");var obj1=document.getElementById("post2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf("<br>");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</script>
Lưu mẫu lại và xem kết quả.
Mình đã responsive nên các bạn cứ yên tâm. Code này mình tham khảo ở dxoan.blogspot.com và edit lại css. Chúc các bạn thành công.!
Bài viết thuộc bản quyền của quocbaoblog.xyz
