Tùy biến khung comment của blog

Đăng bởi Admin | 4/7/13 | 0 nhận xét

Đối với một số nhà thiết kế tùy biến khung comment Blogger là bình thường, trong khi đối với những người khác nó khá khó khăn, nhưng từ nay trở đi tất cả các blogger thực sự sẽ có thể tùy chỉnh khung comment một cách tốt nhất có thể! Sau một số thử nghiệm và sai sót, chúng tôi thực sự thành công trong việc thay đổi hình thức khung comment của Blogger Với hướng dẫn này sẽ cho phép bạn có một khung commnet tùy biến tốt hơn nhiều so với Wordpress, Typad v.v...

View Demo

Hãy xem ảnh minh họa dưới đây! Hãy dê chuột vào hình để xem nha.

Namkna hy vọng bạn thích thủ thuật mới này! Bây giờ chúng ta hãy tìm hiểu làm thế nào để tùy chỉnh các khung comment blogger để phù hợp với sở thích của bạn.

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Ttải về (Download Template Full Version).

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed)
4- Chọn  Mở rộng tiện ích mẫu (  Expand Template Widgets) => Xem vdeo:

5- Tìm (Bấm Ctrl +F) để tìm đoạn code dưới đây:

<div class='comment-form'>

- Thay thế nó thành đoạn code dưới đây.

<div id='namkna-form'> 

6- thêm đoạn code sau trước thẻ ]]></b:skin>

#namkna-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG1yy0YJ3LR0Z2drTFalqxgXN44DoHx0I6zUIzYWRV22abxt6dNWu-6vbLZI-goGcMxM1PH_0JDslKhtJZc-oJqUc9_wAhPraekD_0kz7O4WVrtTdjNc88Ni-h6-sIKdUBqQedUoqBzrQ/s1600/plz-do-not-spam-namkna-blogspot-com.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; }
#namkna-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7r1fcsHUDEXD_M1ANgn4535jbeP-kBrPtCUcFoAIzwebFqrturxBHnUQq9bzC8sP3qphrfAieSSXrJ_OCuvfhJ7_Ho4juZbPYSSB6r4CbLEo3AJqMvd9HUiz7voZ1rY21chxlAPpuHpk/s1600/plz-do-not-spam-namkna-blogspot-com-2.gif) no-repeat bottom right; border:7px solid #7EB2AC;
}
#namkna-form a{
color:#7EB2AC;
}

7- Lưu mẫu lại.

---

Tùy chỉnh khung commnet của bạn.

Bây giờ bạn hãy chú ý các thuộc tính quan trọng trong mã CSS trên để giúp bạn tùy chỉnh hình thức khung bình luận Blogger của bạn theo sở thích của bạn. Có ba thuộc tính quan trọng, đó là:

• #namkna-form iframe
• #namkna-form iframe:hover
• #namkna-form a

Dưới đây là mô tả chi tiết cho từng thuộc tính.

1. Tùy biến khung commnet khi chưa dê chuột vào.

#namkna-form iframe

- Phần này là quy định sự xuất hiện, hoạt động của hộp bình luận khi con trỏ chuột chưa dê vào khung commnet. Nó bao gồm các thuộc tính sau đây:

background: Thuộc tính này quy định màu nền, hình nền và vị trí nền của hình ảnh ở đâu trong khung commment. Trong đó bao gồm:

• # ffffff: Đây là màu nền. Bạn có thể thay đổi nó bằng cách sử dụng bảng mã màu của Namkna Tại đây
• url: Đây là URL để tạo hình nền. Namkna sử dụng các em bé trong trường hợp này. Bạn có thể thay đổi hình ảnh này với bất cứ hình nào bạn bạn muốn.
• bottom right: vị trí hình ảnh nền. Namkna đặt vị trí em bé ở góc dưới bên phải. Bạn có thể định vị hình ảnh ở góc dưới bên phải (bottom right) thành phía dưới bên trái (bottom left) hoặc phía trên bên phải (top right) hoặc trên cùng bên trái (top left).

border: Thuộc tính CSS này xác định kích thước đường viền, chiều rộng, phong cách và màu sắc của đường viền hộp bình luận. Tôi đã thiết lập các giá trị cho hình thức khung commnet trong chế độ hoạt động (khi chưa dê chuột lên).

• border kích thước là 7px,
• border thuộc tính đường liền (solid). Bạn có thể chọn đường liền (solid), chấm (dotted), gạch rời (dashed)vv Xem trang này về thuộc tính boder.
• border thuộc tính màu sắc #C7C7C7. Chọn mã màu khác Tại đây.

padding: CSS này quy định khoảng cách giữa đường viền (border) và khu vực văn bản của nó. Bạn có thể tăng giá trị này nếu bạn muốn chèn một hình ảnh ở góc trên bên phải hoặc góc trên bên trái của khung commnet.

font: quy định phông chữ và kích thước của văn bản. Tôi đã đặt các thuộc tính cho dòng chữ "Nhận xét với tư cách" (Comment as).

• kích thước 12pt
• phông chữ "ms sans serif". Nếu trong trường hợp trình duyệt không có "ms sans serif" font hãy sửa thành Arial.

color: màu sắc của chữ "Nhận xét với tư cách" (Comment as) bạn hãy xem mã màu khác Tại đây.

width: Thuộc tính này quy định chiều rộng của khung nhận xét. Thiết lập độ rộng của khung bình luận của bạn nhỏ hơn một chút so với chiều rộng bài viết của bạn. Bạn có thể tìm thấy chiều rộng bài đăng (width) bài viết của bạn bằng cách tìm kiếm các mã sau đây trong mẫu của bạn (Edit HTML)

.post{...}

2- Tùy biến khung comment khi dê chuột vào.

- Đây là phần quy định sự xuất hiện của các thành phần khi dê chuột vào khung nhận xét.

#namkna-form iframe:hover

- Các thuộc tính background và border trong thẻ này tương tự như ở phần trên. Thiết lập các thuộc tính CSS sẽ ảnh hưởng đến hình ảnh thứ hai chỉ xuất hiện khi dê chuột lên khung bình luận.

3.Tùy biến cho các màu sắc liên kết

#namkna-form a

Phần này xác định màu sắc của hai liên kết -> "Đăng nhận xét" (post comment) và "Đăng ký qua email" (Subscribe by email). Các liên kết này sẽ xuất hiện ở góc dưới cùng bên phải của mỗi khung Comment Form.

color: thiết lập màu sắc liên kết. Thiết lập một màu liên kết như tương phản với màu nền.

Đó là tất cả những gì bạn cần tùy chỉnh.
Bạn có thể xem bài hướng dẫn theo phong cách khác TẠI ĐÂY
                                                                                                            Theo: namkna
                                                                                                            Thu thuat vi tinh