Header ads

Hướng dẫn nâng cấp khung comment v3 mới nhất cho blogger với 2 bước nhanh chóng

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


So sánh hai kiểu khung comment V3 mới và kiểu khung comment cũ


khung commnent blogger
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é




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é

Ý Kiến- Bình Luận

1 Comments

Hãy cho biết ý kiến của các bạn ở đây