Cách tạo bài viết liên quan ở giữa một bài viết

Cách tạo bài viết liên quan ở giữa một bài viết: Xin lưu ý bài đăng liên quan là một trong tính năng hay 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 tạo theo tên của 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 của bạn lên -> Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML, sau đó thêm mã dưới trước thẻ </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>

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>

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>Bài đăng liên quan</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.

Xem thêm: Cách tạo chế độ ban đêm trên Blogger bằng Cookie

Nếu bạn muốn đặt vị trí của danh sachs bai đăng liên quan song song với nội dung của bài đăng, thì hãy sử dụng mã 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:32px 20px 20px auto;width:50%;float:left;box-shadow:0 0 10px -5px rgba(0,0,0,0.6);border-radius:0}.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%;border-radius:0;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}
@media screen and (max-width:768px){.related-simplify{margin:36px auto 26px auto;width:100%}}
</style>
</b:if>

Sau đó nhấp vào nút lưu chủ đề và xem kết quả của bạn.