Nhiều lúc bạn thấy chán ngấy mẫu khung comment cũ của blogger và muốn thử mẫu comment mới nhất trông nó thật mới mẻ. Hoặc đơn giản là các bạn chỉ muốn trải nghiệm nó mượt như thế nào mà thôi. Bài này mình sẽ hướng dẫn các bạn nâng cấp lên khung comment kiểu v3 chỉ với 2 bước nhanh chóng sau đây
{tocify} $title={Table of Contents}
{tocify} $title={Table of Contents}
So sánh hai kiểu khung comment V3 mới và kiểu khung comment cũ
 |
| So sánh hai kiểu khung commnent blogger trước và sau khi nâng cấp. Kiểu mới nhất V3 trong gọn gàng sạch sẽ và nhìn có vẻ lôi cuốn hơn |
Một kiểu khung commnent V3 tùy biến khác rất đẹp. Cài này chỉ dành cho bạn nào thực sự rành về chỉnh sửa code thôi nhé
Bước 2. Tìm thẻ <b:skin>< |
| Kiểu khung commnent V3 tùy biến kiểu 2 |
3 bước thực hiện để nâng cấp lên khug comment V3
Bước 1. Thay hết nguyên dòng <html ........./gml/expr'> bằng đoạn code sau
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='fancy.xml' b:templateVersion='1.2.0' expr:dir='data:blog.languageDirection' oncontextmenu='return true' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Bước 2. Tìm thẻ <b:skin><![CDATA[ và thêm toàn bộ CSS sau vào ngay bên dưới nó
/*
<Group description="Body">
<Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#ffffff url(#) no-repeat scroll top center /* Credit: Mae Burke (http://www.offset.com/photos/389967) */;"/>
<Variable name="body.background.color" description="Background color" type="color" default="transparent" value="transparent"/>
<Variable name="body.title.font.small" description="Title font (small)" type="font" default="$(garamond20)" value="normal 400 14px Roboto, sans-serif"/>
<Variable name="body.title.font.large" description="Title font (large)" type="font" default="$(garamond24)" value="normal 400 24px Roboto, sans-serif"/>
<Variable name="body.title.color" description="Title color" type="color" default="#000" value="#000000"/>
<Variable name="body.action.font.small" description="Action font (small)" type="font" default="$(Roboto12)" value="normal 400 12px Roboto, sans-serif"/>
<Variable name="body.action.font.large" description="Action font (large)" type="font" default="$(Roboto14)" value="normal 400 14px Roboto, sans-serif"/>
<Variable name="body.action.color" description="Action color" type="color" default="#4267b2" value="#4267b2"/>
<Variable name="body.text.font" description="Text font" type="font" default="$(garamond20)" value="normal 400 14px Roboto, sans-serif"/>
<Variable name="body.text.color" description="Text color" type="color" default="#000" value="#000000"/>
<Variable name="body.link.color" description="Link color" type="color" default="#4267b2" value="#4267b2"/>
<Variable name="body.widget.title.font.small" description="Gadget title font (small)" type="font" default="$(Roboto12)" value="normal 400 12px Roboto, sans-serif"/>
<Variable name="body.widget.title.font.large" description="Gadget title font (large)" type="font" default="$(Roboto14)" value="normal 400 14px Roboto, sans-serif"/>
<Variable name="body.widget.title.color" description="Gadget title color" type="color" default="rgba(0, 0, 0, 0.54)" value="rgba(0, 0, 0, 0.54)"/>
<Variable name="body.filter.background.color" description="Filter background color" type="color" default="#302c24" value="#302c24"/>
<Variable name="body.filter.text.font.small" description="Filter text font (small)" type="font" default="$(Roboto12)" value="normal 400 12px Roboto, sans-serif"/>
<Variable name="body.filter.text.font.large" description="Filter text font (large)" type="font" default="$(Roboto14)" value="normal 400 14px Roboto, sans-serif"/>
<Variable name="body.filter.text.color" description="Filter text color" type="color" default="rgba(255, 255, 255, 0.54)" value="rgba(255, 255, 255, 0.54)"/>
<Variable name="body.filter.keyword.font.small" description="Filter keyword font (small)" type="font" default="$(RobotoBold12)" value="normal 700 12px Roboto, sans-serif"/>
<Variable name="body.filter.keyword.font.large" description="Filter keyword font (large)" type="font" default="$(RobotoBold14)" value="normal 700 14px Roboto, sans-serif"/>
<Variable name="body.filter.keyword.color" description="Filter keyword color" type="color" default="rgba(255, 255, 255, 0.87)" value="rgba(255, 255, 255, 0.87)"/>
<Variable name="body.filter.link.font.small" description="Filter link font (small)" type="font" default="$(RobotoBold12)" value="normal 700 12px Roboto, sans-serif"/>
<Variable name="body.filter.link.font.large" description="Filter link font (large)" type="font" default="$(RobotoBold14)" value="normal 700 14px Roboto, sans-serif"/>
<Variable name="body.filter.link.color" description="Filter link color" type="color" default="#4267b2" value="#4267b2"/>
</Group>
*/
Bước 3. Lưu mẫu và hoàn tất nâng cấp khung nhận xét.Vài điểm lưu ý
Lưu ý: Các bạn có thể tùy biến để khung comment mới trông đẹp hơn bằng cách thêm đoạn CSS sau vào nhé
.comments iframe {background: #fff;padding: 0 10px;box-sizing:border-box;border-radius: 10px}
Chúc các bạn nâng cấp khung comment kiểu v3 thành công và để lại bình luận ở bên dưới nếu có gì thắc mắc nhé
Tags:
huong-dan-nang-cap-khung-comment-v3-moi-nhat-cho-blogger
khung-binh-luan-moi-nhat-cho-blogspot
meo-blogger
nang-cap-khung-binh-luan-blogger-kieu-v3
thu-thuat-blogger
Đã test ở blog này nhé
Trả lờiXóaCảm ơn bạn đã chia sẻ
Trả lờiXóaTốt quá rồi..chúc bạn tùy biến khung comnent đẹp nhé..))
XóaLưu ý nếu các biến khai báo đã có sẵn trên theme của các bạn rồi thì có thể xóa đi mới được nhé.
Trả lờiXóathay đổi màu background ở đâu vậy bạn? và ở khung viết nội dung ấy
Trả lờiXóaHi bạn, bạn tìm mã màu background và đổi nhé. Code dạng như thế này: background-color: transparent
XóaSau đó đổi thành màu mong muốn bằng cách thay transparent thành mã màu cần đổi nhé
Ví dụ : background-color: #000000 để đổi sang màu đen
Cách chọn mã màu bạn có thể tham khảo ở đây nhé: Cách chọn mã màu cho blog
Chúc bạn làm thành công nhé 💙🌟🤩👍
Hay quá cảm ơn đã chia sẻ
Trả lờiXóaMình đã test và thàng công : https://www.bloghyip.net/
Thanks bạn đã để lại phản hồi...Chúc bạn phát triển trang web/blog của mình thành công nhé 💗🍀👍
XóaToàn báo lỗi này nè admin ơi
Trả lờiXóacom.google.blogger.b2.layouts.framework.skin.InvalidVariableException: Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.text.color
Hi bạn, Cái này bị lỗi trùng lắp các thông số tùy biến trên bước 2 đó. Nghĩa là các thông số đó đã có sẵn trên template của bạn rồi. Bây giờ chèn thêm nữa là bị trùng lắp.
XóaCách xử lý: tùy biến nào trùng lắp thì bạn chỉ việc xóa đoạn tùy biến đó thôi.
Mẹo tìm ra tùy biến bị trùng: sau khi bạn lưu template thì đoạn nào bị trùng sẽ bị bôi đỏ, bạn chỉ việc xóa đoạn đó thôi.
Sau đó lưu lại như bình thường.
Chúc bạn làm thành công nhé.
Toàn báo lỗi không save được. http://www.taichinhlinhhoat.com
Trả lờiXóaHi bạn, Mình không rõ bạn bị lỗi gì. Bạn có post chi tiết lỗi của bạn là gì luôn nhé.
XóaHoặc bạn cũng có thể tham khảo lỗi trùng lặp tùy biến như bình luận bên trên nhé, để bạn tìm hiểu và xủ lý trên template của mình
Chúc bạn làm thành công nhé