Wednesday, April 19, 2017

Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot

Hướng dẫn tạo Bài viết liên quan (Related Post) cho Blogspot

Giúp đọc giả thuận tiện theo dõi và xem thêm được nhiều bài viết khác của bạn có liên quan đến chủ đề của bải viết hiện tại của bạn



Có nhiều mẫu Template Blogger có tích hợp sẵn phần Related Post, và có 1 số mẫu thì ko. Hôm nay Sơn Nguyễn sẽ hướng dẫn các bạn cách tạo Bài viết liên quan cho Blogspot của bạn (hay còn gọi là tạo Related Post cho Blogspot)


Tạo Bài viết liên quan (Related Post) hiển thị Bài mới nhất (Recent Post)

Bước 1: Đăng nhập vào Blogspot cần tạo Related Post --> Chủ đề (trước kia là Mẫu) --> Chỉnh sửa HTML



Bước 2: đặt con trở soạn thảo trong ô code, bấm Ctrl + F để tìm thẻ đóng </head>

Bước 3: Copy đoạn code 1 bên dưới và dán (paste) vào trước thẻ </head> (phía trên thẻ)

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript">//<![CDATA[var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};//]]></script></b:if>

Paste đoạn code vào trên thẻ đóng </head>

Bước 4: Tiếp tục bấm Ctrl + F để tìm dòng <div class='post-footer'>

Bước 5: Copy đoạn code 2 bên dưới và dán (paste) vào sau dòng <div class='post-footer'> (phía dưới dòng)

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b>Bài viết liên quan:</b><b:loop values='data:post.labels' var='label'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script></div></b:if>

Paste đoạn code phía dưới dòng <div class='post-footer'>

Bước 6: Lưu mẫu và kiểm tra kết quả ^^

Chú ý:

- Thông số var maxresults = 5; Số bài viết hiển thị ở mục Bài viết liên quan (Related Post) bên dưới bài đăng của Blogspot

- Nếu kết quả ko thấy gì thì các bạn xóa đoạn code 2 vừa paste đi và tìm 1 trong 3 dòng dưới đây (bấm Ctrl + F để tìm)
  1. <div class='post-footer-line post-footer-line-1'>
  2. <div class='post-footer-line post-footer-line-2'>
  3. <div class='post-footer-line post-footer-line-3'>
Sau đó dán (paste) lần lượt đoạn code 2 vào sau dòng vừa tìm được (paste vào phía dưới dòng vừa tìm được). Nếu kiểm tra kết quả ok rồi thì thôi, còn ko thì làm lại với dòng khác (nhớ phải xóa đoạn code 2 vừa paste đi nhé, rồi mới tìm dòng khác để paste lại đoạn code 2 vào)

Trang Blogspot làm demo phải paste vào dòng thứ 3 mới ra kết quả đấy ^^


Chúc các bạn thành công!
Nhớ bấm g+ chia sẽ nhé ^^
*Các đoạn code được sưu tầm trên mạng

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 36: 10 lý do bạn nên chọn Hosting trên DreamHost
Bài 37: DreamHost giảm giá Hosting 40% + Free Domain
Bài sau >>>