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
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é
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
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 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%;
}
}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>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'><b:if cond='data:blog.pageType == "index"'>
<div class="nx-moi">
<script>document.write("<script src=\"/feeds/<data:post.id/>/comments/default?max-results=4&amp;alt=json-in-script&amp;callback=showrecentcomments\"><\/script>");</script>
</div>
</b:if>
lúc 20:37 4 tháng 12, 2014
Chất đấy, nhưng tốn trang chủ quá.
lúc 20:40 4 tháng 12, 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.
lúc 18:40 5 tháng 12, 2014
Dùng mình Blogger XML cũng làm được mà, không phải đụng đến js
lúc 20:19 5 tháng 12, 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
lúc 21:37 5 tháng 12, 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 !
lúc 22:43 5 tháng 12, 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
lúc 06:52 6 tháng 12, 2014
Cái này chưa thấy bao giờ, độc-hay :d
lúc 06:56 6 tháng 12, 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?
lúc 14:07 6 tháng 12, 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
lúc 14:07 6 tháng 12, 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
lúc 14:13 6 tháng 12, 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
lúc 14:17 6 tháng 12, 2014
Ok, cảm ơn bác Duy sẽ cố gắng test thử.
lúc 16:18 6 tháng 12, 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.
lúc 17:20 6 tháng 12, 2014
Cảm ơn rất nhiều :d
lúc 19:50 8 tháng 12, 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 ạ.
lúc 20:19 8 tháng 12, 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?
lúc 20:44 8 tháng 12, 2014
Em thử rồi và hiện URL đó chưa có ai sử dụng anh ạ.
lúc 20:03 10 tháng 12, 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.
lúc 21:32 10 tháng 12, 2014
Có vẻ bạn tự khắc phục được rồi nhỉ.
lúc 08:20 23 tháng 12, 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 :))
lúc 10:53 28 tháng 12, 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/
lúc 16:00 9 tháng 2, 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
lúc 20:28 9 tháng 2, 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
lúc 08:53 6 tháng 7, 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
lúc 09:29 6 tháng 7, 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;
}
lúc 10:04 6 tháng 7, 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.
lúc 10:08 6 tháng 7, 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.
lúc 11:02 6 tháng 7, 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?
lúc 11:03 6 tháng 7, 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
lúc 11:12 6 tháng 7, 2015
Đã cho cả trên thẻ head và dưới body nhưng vẫn không được. :((
lúc 11:16 6 tháng 7, 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;
}
lúc 15:58 6 tháng 7, 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é!
lúc 16:33 6 tháng 7, 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!
lúc 18:35 6 tháng 7, 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
lúc 18:55 6 tháng 7, 2015
Hoàn hảo rồi bác à! Không còn gì phàn nàn được nữa \m/
lúc 18:56 6 tháng 7, 2015
Suýt quên, cảm ơn bác nhiều!
lúc 20:55 27 tháng 2, 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?