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


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



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.

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é

Post a Comment

1 Comments

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