Ông Tuấn Trần
Bà Mai Hồ
Bài liên quan ở đây có thể tùy chọn ví trí theo lần xuống dòng <br/> trong bài viết.
Hướng dẫn cài đặt bài viết liên quan trong bài viết tùy chỉnh vị trí cho blogspot
Bước 1 Thêm CSS
#related-custom{display:none;position:relative}
#related-custom h2{background:#fff;color:#3565a2;position:absolute;top:-30px;left:40px;padding:0 12px;font-size:14px;font-weight:600;z-index:1}
#related-custom a{font-weight:500;font-size:14px;display:block;padding:0}
#related-custom ul{max-width:90%;margin:30px auto 10px;padding:10px 20px 0px 30px;position:relative;border:1px solid #ddd}
#related-custom li{padding:0;margin:.6em 0;list-style-type:disc}
.post-body #related-custom{display:block}
@media (max-width:500px){#related-custom{max-width:100%}
#related-custom li{padding:0;margin:.3em 0}
}
Bước 2 Tạo một b:includable cho tiện ích này bằng cách vào phần bài đăng trên blog "main" trong chỉnh sửa HTML dán đoạn code bên dưới vào chỗ mũi tên trong ảnh.
<b:includable id='post-related-custom' var='post'>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function relatedcustom(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicate(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabel(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(relatedTitles.length>1){for(document.write("<h2>Xem thêm</h2>"),document.write("<ul>");l<relatedTitles.length&&l<20&&l<jumlahbacajuga;)document.write('<li><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<div id='related-custom'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relatedcustom&max-results=5"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var jumlahbacajuga=3;
removeRelatedDuplicate();
printRelatedLabel("<data:post.url/>");
</script>
</div>
</b:includable>
Bước 3 Thêm javascript vào trước </body><b:if cond='data:blog.pageType in {"item"}'>
<script type='text/javascript'>
function insertAfter(addition, konten) {
var parent = konten.parentNode;
if (parent.lastChild == konten) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition, konten.nextSibling);
}
}
function insertAbove(addition, konten) {
var parent = konten.parentNode;
parent.insertBefore(addition, konten);
}
function insertBellow(addition) {
var parent = konten;
parent.appendChild(addition);
}
var relatedcustom = document.getElementById("related-custom");
var konten = document.getElementById("body-post-it");
var lokasi = konten.getElementsByTagName("br");
if (lokasi.length > 1) {
insertAfter(relatedcustom,lokasi[1]);
}
else {
relatedcustom.innerHTML = "";
}
</script>
</b:if>
Chỉ số 1 trong code là quy định bài liên quan ở vị trí lần xuống dòng thứ nhất.Bạn tùy chọn theo ý mình.Bước 4 Gọi tiện ích với việc đặt html sau vào trước:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<!-- Xem thêm Start -->
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post-related-custom'/>
</b:if>
<!-- Xem thêm End -->
Bước 5 Kích hoạt tiện íchThay <data:post.body/> thành:
<div id='body-post-it'> <data:post.body/> </div>
