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