Template: Comment

    Social Items

Buy Now
Home Comment
Chào các bạn, chào mừng đã quay lại với Blog Bác Sĩ Windows.
Cũng lâu lắm rồi không có bài viết mới về thủ thuật blogspot do bận bịu nhiều công việc quá, với làm project sấp mặt nên không quản lý được blog. Sắp tới cũng có người khác cùng quản lý Blog này rồi do mình không có nhiều thời gian rảnh nữa nên tranh thủ viết được bài nào hay bài nấy! :D


Bài viết này mình sẽ hướng dẫn các bạn chèn số thứ tự vào từng nhận xét trong phần thread comment của Blogspot chỉ sử dụng CSS nên các bạn có thể tùy biến tùy chỉnh theo ý thích và không lo ảnh hưởng đến độ ổn định của blog.


Xem DEMO

Thủ thuật đánh số thứ tự cho từng nhận xét trong Blogspot sử dụng CSS

Chào các bạn, chào mừng các bạn trở lại với Blog Bác Sĩ Windows - bacsiwindows.com

Bài viết hôm nay tôi sẽ hướng dẫn các bạn nâng cấp khung bình luận của Blogspot lên phiên bản mới với thiết kế mới, giao diện mới cùng các tính năng mới. Thủ thuật này sẽ chỉnh sửa khá nhiều thứ trong template vì vậy tôi khuyên các bạn hãy sao lưu lại template trước khi thực hiện đề phòng lỗi xảy ra hay hư hỏng template.
Hướng dẫn nâng cấp và tùy biến khung nhận xét của Blogspot
BSW sẽ sử dụng mẫu khung nhận xét trong suốt của Theme Contempo (phiên bản mới). Nào cùng xem và thực hiện!!!

Hướng dẫn nâng cấp và tùy biến khung nhận xét của Blogspot phiên bản mới

Chào các bạn, như bài viết trước mình đã hướng dẫn các bạn nâng cấp thread comment mặc định của blogspot lên phiên bản mới (version 2). Điều đáng nói là khi nâng cấp comment lên phiên bản mới thì các thẻ dữ liệu mới hoàn toàn khác bản cũ nên đồng nghĩa chúng ta phải viết lại toàn bộ CSS cho thread comment mới này.
Style thiết kế đẹp cho Thread Comment Blogspot phiên bản mới
Bài viết hôm nay mình sẽ chia sẻ các bạn toàn bộ CSS mình đã thiết kế cho thread comment này.

Style thiết kế đẹp cho Thread Comment Blogspot phiên bản mới

Emoji (hay emoticon) còn gọi là biểu tượng cảm xúc, hay nói ngắn gọn là mặt cười đó. Nó góp phần làm cho cuộc trò chuyện Facebook hay Zalo bớt nhạt hơn, hoặc đơn giản không muốn rep tin nhắn chỉ việc quăng cái icon mặt cười cute :) vào là xong :v
Live Demo

Đề xuất: Chèn ảnh, video từ Youtube vào phần nhận xét của Blogspot
Bài viết hôm nay mình sẽ mang bộ emoji của Facebook Messenger vào thread comment của Blogspot, để phần bình luận bớt nhạt nhòa hơn, hơn thế nữa cũng thể hiện được tình cảm, cảm xúc của người bình luận. Chỉ bằng một đoạn javascript dùng hàm replace từ text thành ảnh, chúng ta có thể dễ dàng thêm biểu tượng cảm xúc emoji vào phần nhận xét của Blogger.

Mang bộ Emoji của Facebook Messenger vào Blogspot thật dễ dàng

Nếu bạn có theo dõi Blog của mình từ rất lâu thì lúc đó mình có cho phép đăng nhận xét bằng hình ảnh, video, mặt cười,... Bằng cách sử dụng javacsript hàm replace, thay link ảnh bằng đoạn mã HTML để hiển thị ra nội dung mình mong muốn.

Nếu như bình luận bằng chữ đơn thuần không đủ dẫn chứng và thuyết phục, vì vậy biện pháp tốt nhất là thêm cả hình ảnh minh họa kèm theo sẽ phần nào thuyết phục được người khác.
Tính năng này chỉ cho phép upload hình ảnh từ bên thứ 3 lên thôi chứ không upload ảnh trực tiếp từ máy tính lên như Facebook hay Zalo được, vì Blogspot không cho phép làm điều đó. Vì vậy khi sử dụng, bạn cần phải upload hình ảnh lên 1 host nào đó trước (khuyến khích dùng host Imgur), rồi copy link ảnh và chèn vào phần nhận xét thì ảnh mới hiện.
LIVE DEMO

Chèn ảnh, video từ Youtube vào phần nhận xét mặc định của Blogspot

Chào các bạn, theo yêu cầu của một bạn gửi đến Bác Sĩ Windows yêu cầu mình chia sẻ nhãn màu đỏ dưới phần bình luận có chữ "Admin". Cái này giúp người khác có thể phân biệt giữa tác giả bài viết/admin và người thường.

Tạo nhãn phân biệt nhận xét của admin và nhận xét của khách
Tips này khá đơn giản thôi, với vài dòng CSS là có ngay một nhãn Admin rồi :)

Cách 1. Dùng CSS

Thêm CSS bên dưới vào trước thẻ ]]></b:skin> trong Template.
.comments .blog-author a:after {
 content: "Admin";
 background: #f17a7a;
 color: #fff;
 padding: 0 10px;
 margin: 0 0 0 8px;
 font-weight: 400;
 border-radius: 4px;
 pointer-events: none
}

Cách 2. Dùng Javascript

Thêm đoạn js bên dưới vào trước thẻ </head> hoặc </body> trong template.
<script>
$(function() {
    function highlight() {
        $('.user.blog-author,.ssyby').closest('.comment-block').css('background', 'linear-gradient(50deg,#ffffff,#f4f4f4)').css('padding', '0');
    }
    $(document).bind('ready scroll click', highlight);
});
</script>

Chỉ với một đoạn mã CSS ngắn gọn thôi bạn đã dễ dàng tạo được nhãn phân biệt giữa admin và khách rồi đó, thủ thuật này sẽ không làm ảnh hưởng gì đến blog cả và nó cũng giúp phần bình luận của bạn trông "ngầu" hơn đó! Chúc bạn thành công.

Tạo nhãn phân biệt nhận xét của Admin và nhận xét của khách

Chào các bạn, chào mừng các bạn quay lại với Blog Bác Sĩ Windows - bacsiwindows.com/blog.
Hôm nay mình sẽ chia sẻ code widget Recent Comment (hay còn gọi là bình luận mới nhất, bình luận gần đây) do mình mod lại  từ một trang blog nước ngoài (không nhớ tên).
Widget sẽ liệt kê ra những nhận xét mới nhất trên Blog của bạn, giúp bạn cũng như khách ghé thăm dễ dàng quản lý được những ai đã nhận xét!
Xem demo

Tạo widget Recent Comment (bình luận mới) với thiết kế đẹp mắt cho Blogspot

Hello xin chào tất cả các bạn, chào mừng các bạn trở lại với blog Bác Sĩ Windows.
Tình hình là mới tìm được một widget Recent Comment (bình luận gần đây) trên mạng, và mang về chỉnh CSS để xài trong blog này. Thấy nhiều bạn chắc cũng thích, chưa gì đã "ăn trộm" về xài rồi, thôi thì viết bài chia sẻ luôn cho ai muốn xài thì xài. Chán, mỗi lần làm ra cái gì mới là cứ bị auto copy :v
Tạo widget Recent Comment với avatar bo tròn tuyệt đẹp cho Blogspot - Bác Sĩ Windows
Đây là một widget gọn nhẹ giúp hiện ra những bình luận mới nhất, giúp bạn dễ dàng quản lý được ai đã bình luận trên trang web của mình để tiện việc theo dõi & trả lời một cách nhanh chóng. Demo xem tại chân trang của blog mình.
Không linh tinh nữa, cùng xem cách thực hiện nhé.

Tạo widget Recent Comment với avatar bo tròn tuyệt đẹp cho Blogspot

Đăng ký: Bài đăng (Atom)