Tiện ích bài viết liên quan (Related posts) là tiện ích hiển thị những bài viết có cùng chủ đề (label), tiện ích này khá hữu ích trong việc tăng lượt xem (views) cho bài viết của bạn. Khi đọc một bài viết hữu ích, độc giả thường có xu hướng tìm kiếm những bài viết có cùng chủ đề để tìm hiểu thêm. Related posts là tiện ích có thể làm tốt công việc đó. Demo live nằm ngay trong bài viết này.
Hướng dẫn thực hiện
Bước 1: Để không ảnh hưởng tốc độ load nên mình đã "dồn" code lại thành một và sử dụng câu lệchifđể hạn chế code dư thừa ở trang chủ nên các bạn chỉ cần thêm đoạn code bên dưới vào trước thẻ
</head>là được.
<b:if cond='data:view.isPost'>
<style>
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}.related-simplify h4{text-transform: uppercase;background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:500;color:#000;top:-21px;left:2.5%} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#2FA1B3;} .related-simplify a{color:#333!important;font-size:16px;margin:0 0 0 30px;font-weight:400!important} .related-simplify a:hover{color:#2FA1B3;} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:16x;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
</style>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
</b:if>
Bước 2: Dùng Ctrl + Fđể tìm thẻ
<data:post.body/>và thay bằng đoạn code sau
<div expr:id='"post1" + 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 == "item"'>
<script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Bài viết cùng chuyên mục</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
Lưu mẫu lại để xem kết quả nhé.
e đã thêm nha , nhưng nó hơi lỗi ở phần cuối bài viết hay sao ý a , a qua blog e mà xem :(((
Trả lờiXóatuyên dương cmt đầu haha để anh qua xem
Xóanhớ vlick ads ủng hộ anh nha kkk
Xóahay đó bảo :v
Trả lờiXóachân thành, vô cùng, ngàn lời cảm ơn phú haha
Xóathanks bro Bảo
Trả lờiXóakhông có chi nè pro quý kkk
Xóaqua chơi nè bảo <3,hello
Trả lờiXóahóng ông qua giờ kk dùng thử i nh
Xóahello bảo nhá :D
Trả lờiXóachào :3 đem test xem có lỗi không báo tui fix nha
XóaLâu quá rồi mới đi thăm ông :) Post vẫn ngầu lòi và bổ ích
Trả lờiXóaơ , icon gì gắt dữ vậy trời
Xóahaha icon ngầu lòi :v blog ông khi nào come đây :))) tưởng quên tôi rồi
XóaMấy hôm bữa thi cộ tốt chứ em?
Trả lờiXóatốt lắm anh hihi :p lụi đúng all luôn
XóaHọc sinh loại gì anh ?
XóaNgày xưa a thi là vẽ A B C D 4 góc xong lấy viết quay trúng đáp án nào chọn đáp án đó - Học tài thi phận mà :))
Xóarep anh niệm: em thì không dám mạo hiểm như thế anh ạ -.-
Xóarep minh: loại khá nha em :v
Ngày xưa học tài thi phận, ngày nay học phận thi tài
Xóahaha :v khác chỗ mô
Xóahay nha :3
Trả lờiXóađem về xài i pro :p
Xóagood
Trả lờiXóacảm ơn nha tính dz :p
Xóađã đặt lk r nhá :P hóng đặt lại
Trả lờiXóaok đặt liền đây kk
XóaTuần nay tôi bận thi nên không quan chơi. Giờ thi xong qua chơi nè :v
Trả lờiXóatui cũng mới thi xong :))) biết kq hết chưa
XóaKhá ngon
Trả lờiXóađem dùng thử nha
Xóahay đó ông
Trả lờiXóathank you
XóaNhìn đẹp đó em
Trả lờiXóacảm ơn anh :p
XóaÔng ơi ,cho tôi xin 1 slot đặt lk blog với,tôi đã đặt trước cho ông rồi
Trả lờiXóaLink blog : https://nguyentrongvyit.blogspot.com/
Hóng ông rep+đặt lại nhé. Cảm ơn !
them đẹp rồi
Trả lờiXóacảm ơn bác hihi
Xóahiệu ứng load avt cmt chất vl
Trả lờiXóathích hông :v hôm nào share
XóaE tối ưu tem ntn mà load nhanh thế?
Trả lờiXóaghiền ham anh :p em tối ưu ads vs dùng lazy thôi à hihi
XóaQuaooo, hấp dẫn ghê nha anh !! Em phải xem nó hợp không rồi em áp dụng luôn... Cảm ơn anh.
Trả lờiXóaok em :p mai anh nâng liên kết lên cho nhé :3 ghi công người cmt có tâm nhất blog haha
XóaMình làm theo hướng dẫn, có " bài viết cùng chuyên mục" ok, nhưng ở dưới nó lại lập lại bài viết đó nữa, phải làm sao ad, cảm ơn nhiều
Trả lờiXóaMÌnh fix được rồi, bỏ đi trong code là được, giờ lại không biết làm sao để hiển thì nhiều hơn 3 bài, ad giúp nhé, cảm ỏn
Trả lờiXóabạn chỉ cần thay số 3 ngay đoạn max-results=3 thành con số bạn mong muốn là ok nha
XóaAd và mọi người có thể hướng dẫn mình cách sửa code để hiển thị nhiều bài liên quan hơn không, xin cảm ơn
Trả lờiXóamình nói ở trên rồi nhe
XóaĐổi thành 5 mà vẫn 3 ad ơi
Trả lờiXóamình đổi bình thường mà nhỉ ? bạn xem lại thử đi
XóaLook at the way my colleague Wesley Virgin's autobiography starts with this shocking and controversial video.
Trả lờiXóaAs a matter of fact, Wesley was in the military-and shortly after leaving-he unveiled hidden, "SELF MIND CONTROL" tactics that the government and others used to get whatever they want.
As it turns out, these are the exact same methods many famous people (notably those who "come out of nowhere") and top business people used to become rich and famous.
You've heard that you only use 10% of your brain.
Really, that's because most of your brainpower is UNCONSCIOUS.
Perhaps that conversation has even occurred INSIDE your very own head... as it did in my good friend Wesley Virgin's head about 7 years ago, while riding an unregistered, trash bucket of a car without a driver's license and $3 on his bank card.
"I'm so frustrated with going through life payroll to payroll! When will I become successful?"
You took part in those types of thoughts, isn't it right?
Your very own success story is waiting to be written. Go and take a leap of faith in YOURSELF.
Learn How To Become A MILLIONAIRE Fast
Strange "water hack" burns 2 lbs in your sleep
Trả lờiXóaMore than 160 thousand women and men are utilizing a easy and SECRET "water hack" to burn 1-2lbs each and every night in their sleep.
It is painless and works every time.
This is how to do it yourself:
1) Go get a glass and fill it up with water half glass
2) And then learn this crazy HACK
and you'll be 1-2lbs lighter when you wake up!