Chèn Tiện Ích Bài Viết Liên Quan (Related posts) Vào Giữa Bài Viết - Quốc Bảo Blog | Thủ Thuật Blogspot | Thủ Thuật Facebook | PSD Bìa

Chèn Tiện Ích Bài Viết Liên Quan (Related posts) Vào Giữa Bài Viết

Share:

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ệch
if
để 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:&#39;\f0c8&#39;;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:&#39;\f0c8&#39;;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 == &quot;item&quot;'>
<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='&quot;post1&quot; + 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 == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/summary/-/&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>Bài viết cùng chuyên mục</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></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/2);
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>
Lưu mẫu lại để xem kết quả nhé.

lời kết

Mình đã responsive nên các bạn cứ yên tâm. Code này mình tham khảo ở dxoan.blogspot.com và edit lại css. Chúc các bạn thành công.

44 comments:

  1. 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 :(((

    ReplyDelete
  2. Replies
    1. chân thành, vô cùng, ngàn lời cảm ơn phú haha

      Delete
  3. Replies
    1. chào :3 đem test xem có lỗi không báo tui fix nha

      Delete
  4. Lâu quá rồi mới đi thăm ông :) Post vẫn ngầu lòi và bổ ích

    ReplyDelete
    Replies
    1. ơ , icon gì gắt dữ vậy trời

      Delete
    2. haha icon ngầu lòi :v blog ông khi nào come đây :))) tưởng quên tôi rồi

      Delete
  5. Mấy hôm bữa thi cộ tốt chứ em?

    ReplyDelete
    Replies
    1. tốt lắm anh hihi :p lụi đúng all luôn

      Delete
    2. Ngà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à :))

      Delete
    3. rep anh niệm: em thì không dám mạo hiểm như thế anh ạ -.-
      rep minh: loại khá nha em :v

      Delete
    4. Ngày xưa học tài thi phận, ngày nay học phận thi tài

      Delete
  6. đã đặt lk r nhá :P hóng đặt lại

    ReplyDelete
  7. Tuần nay tôi bận thi nên không quan chơi. Giờ thi xong qua chơi nè :v

    ReplyDelete
  8. Ông ơi ,cho tôi xin 1 slot đặt lk blog với,tôi đã đặt trước cho ông rồi
    Link blog : https://nguyentrongvyit.blogspot.com/
    Hóng ông rep+đặt lại nhé. Cảm ơn !

    ReplyDelete
  9. hiệu ứng load avt cmt chất vl

    ReplyDelete
  10. E tối ưu tem ntn mà load nhanh thế?

    ReplyDelete
    Replies
    1. ghiền ham anh :p em tối ưu ads vs dùng lazy thôi à hihi

      Delete
  11. Quaooo, 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.

    ReplyDelete
    Replies
    1. ok 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

      Delete