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
{tocify} $title={Table of Contents}

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é
Một kiểu khung commnent V3 tùy biến
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é

9 Comments

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

  1. Replies
    1. Tốt quá rồi..chúc bạn tùy biến khung comnent đẹp nhé..))

      Delete
  2. Lư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é.

    ReplyDelete
  3. thay đổi màu background ở đâu vậy bạn? và ở khung viết nội dung ấy

    ReplyDelete
    Replies
    1. Hi bạn, bạn tìm mã màu background và đổi nhé. Code dạng như thế này: background-color: transparent
      Sau đó đổ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é 💙🌟🤩👍

      Delete
  4. Hay quá cảm ơn đã chia sẻ
    Mình đã test và thàng công : https://www.bloghyip.net/

    ReplyDelete
    Replies
    1. 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é 💗🍀👍

      Delete
  5. Toàn báo lỗi này nè admin ơi
    com.google.blogger.b2.layouts.framework.skin.InvalidVariableException: Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.text.color

    ReplyDelete
Previous Post Next Post