Trang trí ô nhận xét trên Blogger

 Ở dưới mỗi bài viết đều có một ô comment để khách tham quan gởi lại những thắc mắc, những lời góp ý, những lời tâm sự...

Mặc định các ô comment này rất đơn điệu và để thu hút hơn sự chú ý của khách tham quan các bạn có thể trang trí ô này thêm sinh động hơn, đẹp hơn...
(Thủ thuật này chỉ thích hợp với các giao diện được tải trên mạng về, còn đối với giao diện sẳn có của Blogspot thì không được như ý lắm...là khi comment thì "nó" mới xuất hiện)

Hôm nay dunghennessy chia sẻ với các bạn thủ thuật này.

Mời các bạn xem hình minh hoạ phía dưới

 

VÀ

 Thủ thuật này cũng khá đơn giản, đầu tiên bạn đăng nhập vào Blog > Chọn Mẫu > Chọn Chỉnh sửa HTML.

Một bảng mã nguồn HTML hiện ra, bạn đánh dấu chọn vào ô MỞ RỘNG MẪU TIỆN ÍCH nằm phía trên góc trái của bảng mã nguồn, tiếp tục bạn bấm cặp phím Ctrl+F để mở hộp tìm kiếm ở phía dưới (nếu bạn dùng trình duyệt Google Chrome thì hộp tìm kiếm này sẽ nằm phía trên) và gõ vào hộp này dòng lệnh ]]></b:skin> và Enter thì bạn sẽ thấy dòng lệnh này xuất hiện ở bảng mã nguồn và được đánh dấu highlight

Bây giờ bạn copy đoạn code phía dưới và dán trên dòng lệnh ]]></b:skin>

#mbt-form iframe{

background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCE-gzHE7dAgFtYlIlGw2EQR_4V6CPpZVG87SA0EHVxYVu5tuyDQgxf7AKNR_3fQGQeF5PWoA-ffODOdJLPRjqqScRORkhLMaMTeXnJAZd58xRakbdDuULjX-dg7brZxw8TewwxjNSE38k/s1600/picture.jpg) repeat-x;

border:1px solid #ddd;

-moz-border-radius:2px;

-webkit-border-radius:2px;

box-shadow: 2px 2px 2px #CCCCCC;

padding:2px;

font:normal 12pt &quot;ms sans serif&quot;, Arial;

color:#2F97FF;

width:636px; height:250px !important;

}

#mbt-form a{
color:#2F97FF;
} 

 

Bạn thay đổi các dòng màu đỏ (link ảnh nền) và các dòng màu xanh, trong đó color là màu chữ của ô comments, width (chiều rộng) và height (chiều cao) của ô comment.
 
Tiếp tục bạn gõ vào hộp tìm kiếm dòng lệnh <div class='comment-form'> và enter, bạn sẽ thấy dòng lệnh này xuất hiện ở bảng mã nguồn và được đánh dấu highlight

Bạn thay thế dòng lệnh <div class='comment-form'> bằng dòng lệnh <div id='mbt-form'>
Đối với giao diện sẳn có của Blogspot (không phải giao diện tải trên mạng về thì sẽ có 2 dòng lệnh <div class='comment-form'>, vì vậy bạn phải thay 2 lần cho dòng lệnh này và khi xong bạn comment thử nó sẽ xuất hiện).
 
Cuối cùng bấm Lưu mẫu để hoàn tất.

Bạn trở lại vào Blog xem thành quả nha.

* Mở rộng thêm:
Bạn nên Resize ảnh nền cho đúng kích thước của ô comments ở code phía trên (Width và height màu xanh) thì sẽ đẹp hơn.