Chèn tiện ích bài viết liên quan cho Blogspot mẫu template mới 2019

XEM THÊM

Do nhu cầu sử dụng làm đa dạng và tăng lượt truy cập cho blog thì rất nhiều bạn đã tìm cách thêm nội dung bài viết liên quan vào blog của mình, tuy nhiên theo mình thấy thì các bài viết hướng dẫn chưa cụ thể nên mình làm bài viết này

Tiện ích bài viết liên quan thường xuất hiện ở cuối mỗi bài viết, giúp người đọc truy cập tới các bài viết khác cùng chuyên mục. Bài viết này sẽ hướng dẫn các bạn thêm tiện ích bài viết liên quan vào Blogspot, tuy nhiên vị trí xuất hiện sẽ thường là ở các ị trí cuối bài  viết, vì vậy hôm nay mình chia sẻ các bạn cách thay đổi vị trí vào giữa bài viết nhé cập nhật cho các template mới năm 2019

 Hướng dẫn Chèn tiện ích bài viết liên quan vào giữa bài viết Blogspot cho template mới 2019

Đăng nhập trang quản trị Blogger, chọn Template > Edit Template
- Thêm code vào trước thẻ </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <script type="text/javascript">

    //<![CDATA[

    var relatedTitles = new Array(); var relatedTitlesNum = 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]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; 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] = relatedTitles[i];}} relatedTitles = 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((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}

    //]]>

    </script>

    </b:if>

 Tìm và thay thế  <data:post.body/>  (Lưu ý trong template có thể có nhiều đoạn này, bạn phải tìm hiểu và chọn cho đúng, tuy nhiên với template mới thì nó thường nằm ở đoạn thứ 3 như hình) bằng đoạn:

Là đoạn đậm hơn trong hình nha mọi người

     <div expr:id='&quot;post1&quot; + data:post.id'/>

    <div class='post-terkait'>

    <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=3&quot;' type='text/javascript'/>

    </b:if>

    </b:loop>

    </b:if>

    <h4>Baca Juga</h4>

    <script type='text/javascript'>

    removeRelatedDuplicates();

    printRelatedLabels();

    </script>

    </div>

    <div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></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/3);

    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>

Thêm CSS trước ]]></b:skin> hoặc </style>: nhưng thường là thẻ skin nhé

     /* Related Post in Post */

    .post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}

    .post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}

    .post-terkait ul {margin:0;padding:0}

    .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}

    .post-terkait ul li:last-child{border:none !important}

    .post-terkait a {color:#1b71bc;font-size:13px !important}

    .post-terkait a:hover {text-decoration:underline}

Lưu Template và xem kết quả.