Code thêm bài viết liên quan cho blogspot

Code thêm bài viết liên quan cho blogspot

Giới thiệu

Bài viết liên quan là danh sách các bài viết có nội dung tương tự hoặc liên quan đến bài viết bạn đang xem, được chia nhỏ theo danh mục, thẻ hoặc tiêu đề bài viết. Bài viết liên quan còn được gọi là Related Post trong tiếng Anh. 

Như bạn thấy, các bài viết liên quan không chỉ làm cho bài viết của chúng ta đẹp hơn, chuyên nghiệp hơn mà còn có thể giúp chúng ta điều hướng người dùng tốt hơn và giúp họ dễ dàng tìm thấy các bài viết có cùng nội dung hoặc chủ đề hơn.

Demo Code thêm bài viết liên quan cho blogspot

Cách thực hiện:

• Bước 1: Đăng nhập vào Blogger
• Bước 2: Ấn vào Chủ đề ➤ Chỉnh sửa HTML
• Bước 3: Ấn Ctrl + F để hiển thị thanh tìm kiếm ➤ nhập dòng chữ <b:defaultmarkup type='Common'>
• Bước 4: Copy toàn bộ đoạn code bên dưới dán vào dưới dòng chữ ở bước 3

<b:includable id='postTextRelated'>
        <div class='postRelated' id='postRelated'>
          <script>/*<![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 cond='data:post.labels'>
            <b:loop index='i' values='data:post.labels' var='label'>
              <b:if cond='data:i&lt;1'>
                <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;' rel='preload'/>
              </b:if>
            </b:loop>
          </b:if>
          <b>Bài viết liên quan: </b>
          <script>removeRelatedDuplicates(); printRelatedLabels();</script>
        </div>
      </b:includable>

Phần mình đã tô màu đỏ là có thể thay đổi được, max-result = 3. Số 3 là số dòng post liên quan muốn hiển thị, bạn có thể điều chỉnh nó khi bạn muốn.

• Bước 5: Ấn Ctrl + F để hiển thị thanh tìm kiếm ➤ nhập dòng chữ  <data:post.body/> và dán đoạn code bên dưới vào thẻ <data:post.body/>

  <b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd3 = document.getElementById("postRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>

(midAd3,showAd3[5] đã được đánh dấu số 5 có nghĩa là bài liên quan sẽ xuất hiện sau đoạn thứ 5 các bạn có thể tự điều chỉnh lại. Nếu các bạn để 50 hoặc cao hơn thì nó sẽ cố định ở cuối bài viết.

Lời kết

Như vậy trong bài viết này mình đã chia sẻ cho các bạn Code thêm bài viết liên quan cho blogspot. Bài viết được tham khảo từ Quang Linh Pro. Nếu các bạn có thắc mắc gì hay khiếu nại về bản quyền thì comment bên dưới nhé! Chúc các bạn thành công.

Copyright © ReLub.Net