Nhận xét mới của bài viết ngay tại trang chủ Blogger

Lâu rồi không có thủ thuật gì hot này share luôn cái này nhận xét mới nhất của bài viết hiện ở trang chủ. Thủ thuật này thì mình áp dụng lâu rồi, những quên bén mất và nay bỗng nhiên thấy em nó nên chia sẽ luôn cho nóng với bà con. Bạn có thể xem trực tiếp demo và test thủ thuật này tại template này tại trang này
http://kslcomputer.blogspot.com/
Đôi nét về cái thủ thuật này, đây là thủ thuật sử dụng Javascript. Hình thức là nó đọc JSON của comment vẫn sử dụng vòng lặp bình thường để lấy ra nhận xét và link nhận xét một cách bình thường như mấy thủ thuật "Bài viết mới nhất cho Blogger" hoặc những thủ thuật tương tự.

Nhận xét mới của bài viết ngay tại trang chủ Blogger
Nhận xét mới của bài viết ngay trang chủ Blogger

Chèn nhận xét mới nhất của bài viết ra trang chủ

Bắt đầu thêm nó vào Blogger thôi, đầu tiên bạn truy cập vào trang tổng quan của blog, và chỉnh sửa HTML template hiện tại. Sau đó chèn đoạn Javascript này lên trên thẻ ]]></b:skin>
.nx-moi li {width:46.717948717948715%;float: left;margin-left: 2.564102564102564%;overflow:hidden;height:95px;border-bottom: 1px dashed #ddd;margin-bottom: 17px;}
@media only screen and (max-width: 800px) {
    .nx-moi li {
        width: 100%;
    }
}
đây là đoạn css do mình viết nó có vẻ phù hợp với cái template hiện tại còn với của bạn thì mình không chắc nhé.

Rồi sau khi xong cái trên chèn tiếp tục đoạn này lên trên thẻ </head> nhé
<script type='text/javascript'>//<![CDATA[ 
//Recent Comments
function showrecentcomments(l){for(var f=0;f<5;f++){var h=l.feed.entry[f];var b;if(f==l.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){b=h.link[d].href;break}}b=b.replace("#","#");var m=b.split("#");m=m[0];var e=m.split("/");e=e[5];e=e.split(".html");e=e[0];var a=e.replace(/-/g," ");a=a.link(m);if("content" in h){var g=h.content.$t}else{if("summary" in h){var g=h.summary.$t}else{var g=""}}var j=/<\S[^>]*>>/g;g=g.replace(j,"");if(f==0){document.write("<li>")}else{document.write("<li>")}document.write('<div class="com-auth"><img width="50" height="50" src="'+h.author[0].gd$image.src+'"/></div><a href="'+b+'" rel="nofollow"><b>'+h.author[0].name.$t+"</b></a> <i>nói:</i>");if(g.length<70){document.write('<p style="font-size:14px;">'+g+' <a href="'+b+'" rel="nofollow"><b>xem</b></a></p>')}else{g=g.substring(0,70);var c=g.lastIndexOf(" ");g=g.substring(0,c);document.write('<p style="font-size:14px;">'+g+'... <a href="'+b+'"><b>xem</b></a></p>')}}document.write("</li>")};
//]]></script>
đây chính là đoạn Javascript mình dùng để lấy nhận xét ra, tương đối dễ hiểu nếu bạn nào biết chút về việc sử dụng Javascript để đọc JSON.

Cuối cùng bạn chèn đoạn mã này vào nơi mà bạn muốn xuất hiện ở trang chủ, ví dụ đoạn thông dụng ở chân trang bài viết
<div class='post-footer-line post-footer-line-1'>
chèn xuống dưới đoạn trên đoạn này
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class="nx-moi"> 
<script>document.write(&quot;&lt;script src=\&quot;/feeds/<data:post.id/>/comments/default?max-results=4&amp;amp;alt=json-in-script&amp;amp;callback=showrecentcomments\&quot;&gt;&lt;\/script&gt;&quot;);</script>
</div> 
</b:if>
lâu lại là hoàn tất, kiểm thử và có lỗi thì report nhanh với mình ở đây nhé.

37 bình luận

  1. avatar says

    20:37 Ngày 04 tháng 12 năm 2014

    Chất đấy, nhưng tốn trang chủ quá.

  2. avatar says

    20:40 Ngày 04 tháng 12 năm 2014

    Chà mới đang được vài giây có người comment rồi @@

    Tại template này nó tương đối hơi bự một tý nên nhìn không được tốt cho lắm :D. Đẹp không là do người sáng tạo ra phối trí nó thế nào thôi (mình làm hơi khoai). Những website nào về mua bán template hàng hóa mà show được review thế này thì lợi ích cũng nhiều lắm.

  3. avatar says

    18:40 Ngày 05 tháng 12 năm 2014

    Dùng mình Blogger XML cũng làm được mà, không phải đụng đến js

  4. avatar says

    20:19 Ngày 05 tháng 12 năm 2014

    Chắc thiếu xót chỗ nào chứ Blogger XML mình có thử mà thấy có vẻ nó không ra gì cả :D

  5. avatar says

    21:37 Ngày 05 tháng 12 năm 2014

    /<\S[^>]*>>/g; - bạn có thể giải thích hộ mình cái này không ?
    mình mới học js ... mình biết là
    \S là kí tự không phỉa kí tự khoảng trắng
    [^>] là những kí tự không phải là >
    ...còn lại mấy cái kia mình không biết nó để làm gì ... cám ơn bạn !

  6. avatar says

    22:43 Ngày 05 tháng 12 năm 2014

    chỉ hiển thị những comment gần với tổng số comments. 1 b:if trong b:loop. Lý thuyết là vậy, mình chưa thử nhưng chắc chắn dc

  7. avatar says

    06:52 Ngày 06 tháng 12 năm 2014

    Cái này chưa thấy bao giờ, độc-hay :d

  8. avatar says

    06:56 Ngày 06 tháng 12 năm 2014

    Lâm có cách nào để links trong bài đăng có màu hoặc hiển thị dạng khác so với links của các thành phần khác trong blog ko?

  9. avatar says

    14:07 Ngày 06 tháng 12 năm 2014

    Mình tính loại bỏ các tag html có trong nhận xét trước khi lấy ra mà sai rồi, và lâu rồi cũng không sửa, bạn không cần quan tâm đến nó đâu xóa đi cũng được vì nó cũng chã ra cái gì :D

  10. avatar says

    14:07 Ngày 06 tháng 12 năm 2014

    3 cái Regex này bạn có thể test ở đây là hiểu hết http://rick.measham.id.au/paste/explain.pl

  11. avatar says

    14:13 Ngày 06 tháng 12 năm 2014

    Nếu là trang DuyBlog.Com thì bác chèn đoạn css này lên trên thẻ b:skin nhé
    .post-body a { color: mã màu!important; }
    thử nhé :D

  12. avatar says

    14:17 Ngày 06 tháng 12 năm 2014

    Ok, cảm ơn bác Duy sẽ cố gắng test thử.

  13. avatar says

    16:18 Ngày 06 tháng 12 năm 2014

    Tại vô tình theo dõi BLog KSL nên có là đọc luôn. Nói chung thì tuyệt đấy. Quan trọng là dùng vào site nào cho phù hợp thôi.

  14. avatar says

    17:20 Ngày 06 tháng 12 năm 2014

    Cảm ơn rất nhiều :d

  15. avatar says

    19:50 Ngày 08 tháng 12 năm 2014

    Anh ơi cho em hỏi là làm sao để có thể đặt đc URL Google+ chỉ có tên của mình, của em bắt yêu cầu thêm hâu tố anh ạ.

  16. avatar says

    20:19 Ngày 08 tháng 12 năm 2014

    Cũng lâu rồi anh không đụng 3 cái đó nhưng anh nghĩ URL đó có người lụm rồi, em có thử url đó vào trình duyệt chưa?

  17. avatar says

    20:44 Ngày 08 tháng 12 năm 2014

    Em thử rồi và hiện URL đó chưa có ai sử dụng anh ạ.

  18. avatar says

    20:03 Ngày 10 tháng 12 năm 2014

    Bạn giúp mình về comment không hiển thị hình avatar với
    www.dakhoaquangnam.com/2014/09/moi-braunwald-giao-trinh-noi-tim-mach.html
    Thanks bạn nhiều.

  19. avatar says

    21:32 Ngày 10 tháng 12 năm 2014

    Có vẻ bạn tự khắc phục được rồi nhỉ.

  20. avatar Nặc danh says

    08:20 Ngày 23 tháng 12 năm 2014

    nếu nói chưa thấy bao giờ thì bác lười tìm...em thấy bên uong jowo lâu rồi :))

  21. avatar says

    10:53 Ngày 28 tháng 12 năm 2014

    Hiện tại mình cũng đang sử dụng blogger nhưng việc tối ưu ở mã code mà mình được biết hiện chỉ có vài code là dùng được, giao diện mới thì hình như là bị báo lỗi không nhưng những giao diện lúc trước mình xài. Mình cũng đang tối ưu thêm một số cái nữa. Mà mình muốn tích hợp nút facebook + trông blogspot thì bằng cách nào bạn, mình tích hợp nhưng không được
    http://thuthuatmarketingz.blogspot.com/

  22. avatar says

    16:00 Ngày 09 tháng 02 năm 2015

    Bạn ơi cho mình hỏi cái này tí được ko? Mình mới áp dụng template cho blogspot bán quần áo, trên trang chủ hiện dạng lưới mỗi dòng 5 mẫu. Làm sao để chỉ 3 mẫu thôi nhỉ? Thanks bạn nhìu lắm <3 <3

  23. avatar says

    20:28 Ngày 09 tháng 02 năm 2015

    Mình chưa hiểu nó ra sao, nhưng nếu là số lượng nhận xét thị bạn thay f<5 giảm xuống cho phù hợp. Mà mặc định đoạn mã này lấy ra 4 cái mà bạn chạy ra 5 cũng lạ quá :D

  24. avatar says

    08:53 Ngày 06 tháng 07 năm 2015

    AD Có thể hướng dẫn cụ thể hơn cách làm không, tớ đã làm y như trên nhưng mà nó hiển thị lung tung quá! Có gì bạn ghé qua chỉnh sửa giúp với: http://tienganhcuatui.blogspot.com

  25. avatar says

    09:29 Ngày 06 tháng 07 năm 2015

    Bây giờ bác thêm vào trước
    <div class='nx-moi'>
    đoạn này
    <div style="clear:both"></div>
    và chỉnh thêm css nhỏ nữa là
    .nx-moi {
    margin-top:20px;
    }

  26. avatar says

    10:04 Ngày 06 tháng 07 năm 2015

    Đã làm như bác bảo nhưng vẫn không ăn thua!

    À tớ còn thấy cái phần avatar comment và tên nó không hiện cùng một dòng như trong demo.

  27. avatar says

    10:08 Ngày 06 tháng 07 năm 2015

    Sao bên này kiểm tra chưa có ta =.= chưa thấy thêm thẻ div style là clear:both. CSS có vẻ cũng không nhận luôn chắc bác phải tách ra một thẻ style riêng và bỏ trên thẻ head hoặc dưới thẻ body thử rồi.

  28. avatar says

    11:02 Ngày 06 tháng 07 năm 2015

    Đúng là thiếu thẻ đó thật! Đã thêm vào và hiện gần giống của bác! Cái quan trọng là tên và avatar nhận xét nó không hiện cùng một dòng nên phần nhận xét bị ẩn mất. Khắc phục điều này thế nào đây ad?

  29. avatar says

    11:03 Ngày 06 tháng 07 năm 2015

    Như em có nói trước đó rồi đấy, CSS nó không nhận, anh thử bỏ đoạn css ở bài hướng dẫn trên vào cặp thẻ style và máng nó xuống dưới the body hoặc trên the head nhé :D

  30. avatar says

    11:12 Ngày 06 tháng 07 năm 2015

    Đã cho cả trên thẻ head và dưới body nhưng vẫn không được. :((

  31. avatar says

    11:16 Ngày 06 tháng 07 năm 2015

    Chết thật lỗi bên này rồi ^^ thiếu để tối về thêm lại bài viết, anh thêm vào css đoạn này nhé
    .com-auth {
    width: 55px;
    float: left;
    height: 55px;
    overflow: hidden;
    background: #EEE none repeat scroll 0% 0%;
    margin-right: 15px;
    }

  32. avatar says

    15:58 Ngày 06 tháng 07 năm 2015

    Đã thêm trông khá ổn. Nhưng phần nội dung nhận xét cách hơi xa phần tên bên trên nên trông không cân xứng. Ad xem chỉnh thế nào cho nó nhích lên như trong Demo và cỡ chữ nhỏ hơn bình thường với nhé!

  33. avatar says

    16:33 Ngày 06 tháng 07 năm 2015

    Phần trên tớ đã giải quyết được rồi. Nhưng Ad xem thiết kế thêm cái avatar cho comment nặc danh được không? Để một màu xanh xanh như vậy hơi trống và mất cân đối!

  34. avatar says

    18:35 Ngày 06 tháng 07 năm 2015

    Ok cũng ko khó lắm thử css luôn nhé
    .com-auth img[src="http://img1.blogblog.com/img/blank.gif"] {
    content: url(địa chỉ hình ảnh thay thế);
    }
    test hồi âm nhé :D

  35. avatar says

    18:55 Ngày 06 tháng 07 năm 2015

    Hoàn hảo rồi bác à! Không còn gì phàn nàn được nữa \m/

  36. avatar says

    18:56 Ngày 06 tháng 07 năm 2015

    Suýt quên, cảm ơn bác nhiều!

  37. avatar says

    20:55 Ngày 27 tháng 02 năm 2016

    Bác Lâm cho hỏi có làm thế nào để recentcomment này hiện theo thứ từ 1-4 chứ không phải ngược lại như hướng dẫn trên được không?

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.