Tạo một bài viết liên quan ở giữa một bài viết trong blogspot

Bài đăng liên quan là một tính năng thú vị trên Blogger để hiển thị danh sách các liên kết bài viết liên quan đến nội dung của bài viết được đọc theo tên nhãn

Làm thế nào để tạo một bài viết liên quan ở giữa một bài viết

Mở trang Blogger > Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML > Thêm mã bên dưới trước khi mã </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;position:relative;padding:0;border-radius:20px;margin:40px auto 30px auto;width:100%;box-shadow:0 0 8px -5px rgba(0,0,0,0.4)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:6.8%;border-radius:99em;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .1s}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all .1s}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 20px auto;}.related-simplify ul li:first-child a{margin:25px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:35px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if>

Xem hình!

Hình 2

Hoặc CSS này:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Related Post Inline
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>

Sau đó, tìm và thay thế mã  <data:post.body/> trong mẫu bằng mã này

<div expr:id='&quot;post1&quot; + 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 == &quot;item&quot;'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
               </b:if>
               </b:loop>
               </b:if>
               <h4>Also Read</h4>
               <script type='text/javascript'>
               removeRelatedDuplicates();
               printRelatedLabels();
            </script>
      </div>
      <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
      <script type='text/javascript'>
         var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
         var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
         var s=obj1.innerHTML;
         var t=s.substr(0,s.length/2);
         var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
         if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Lưu ý: Nếu trong mẫu của bạn có một số mã <data: post.body/>, thì chỉ cần thay thế mã được bọc trong thẻ điều kiện của trang bài viết.

Sau đó nhấp vào nút Lưu chủ đề và xem kết quả trên blog của bạn. Với bài tạo một bài viết liên quan ở giữa một bài viết trong blogspot hy vọng sẽ giúp ích được đến các bạn. Chúc các bạn thành công