Hướng dẫn nâng cấp và tùy biến khung nhận xét của Blogspot phiên bản mới

Chào các bạn, chào mừng các bạn trở lại với Blog Bác Sĩ Windows - bacsiwindows.com

Bài viết hôm nay tôi sẽ hướng dẫn các bạn nâng cấp khung bình luận của Blogspot lên phiên bản mới với thiết kế mới, giao diện mới cùng các tính năng mới. Thủ thuật này sẽ chỉnh sửa khá nhiều thứ trong template vì vậy tôi khuyên các bạn hãy sao lưu lại template trước khi thực hiện đề phòng lỗi xảy ra hay hư hỏng template.
Hướng dẫn nâng cấp và tùy biến khung nhận xét của Blogspot
BSW sẽ sử dụng mẫu khung nhận xét trong suốt của Theme Contempo (phiên bản mới). Nào cùng xem và thực hiện!!!

Nâng cấp khung nhận xét phiên bản mới

Bước 1. Tìm và thay cả đoạn <html thành đoạn bên dưới
<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, nhấn mạnh là ngay bên dưới luôn nhé.
/*
<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.

Tùy biến khung nhận xét mới

Thông thường sau khi nâng cấp thì khung nhận xét sẽ giống như mặc định, nếu bạn muốn trông bắt mắt hơn, khác biệt hơn thì bạn có thể viết thêm CSS cho nó theo mẫu dưới đây:
.comments iframe {
/* CSS */
}
Còn đây là CSS tùy biến của BSW:
.comments iframe {background: #fff;padding: 0 10px;box-sizing:border-box;border-radius: 10px}

Tổng kết

Không có gì để tổng kết, chúc bạn một ngày vui vẻ!
  1. Chưa test, có ai lỗi không lưu được không? Screenshot lại nhé

    Trả lờiXóa
  2. Hay :v tiếc là không còn xài cmt của blogger :))

    Trả lờiXóa
    Trả lời
    1. Thế dùng Facebook comment à? FBCM cũng hay nhưng khó tùy biến hơn.

      Xóa
  3. Cái tiêu đề ngay footer có cái dấu chấm nhìn sang trọng !

    Trả lờiXóa
  4. đã thử và lỗi... có lẽ nó sẽ phù hợp với một vài giao diện mà không có can thiệp nhiều...
    Vì nó vẫn còn sử dụng css mặc định của blogger...

    Trả lờiXóa
    Trả lời
    1. Thử thay <b:skin> thành <b:skin version='1.1.0'> thử xem được không?

      Xóa
  5. Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background LỖI NZ KHẮC PHỤC SAO BÁC

    Trả lờiXóa
    Trả lời
    1. Thử thay <b:skin> thành <b:skin version='1.1.0'> thử xem được không?

      Xóa
  6. lỗi Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background
    rồi bạn

    Trả lờiXóa
    Trả lời
    1. Thử thay <b:skin> thành <b:skin version='1.1.0'> xem được không?

      Xóa
  7. làm được nhưng không reply được vậy ? admin chỉ e với :v

    Trả lờiXóa
    Trả lời
    1. Xóa hết CSS cũ viết lại mới đi em.

      Xóa
    2. xóa hết css cũ :v r a, nhưng vẫn k đc

      Xóa
    3. https://hhitcom.blogspot.com/

      Xóa
    4. A thấy vẫn reply bình thường đấy chứ, lỗi gì đâu.

      Xóa
    5. ý em là reply được nhưng :v mà nó k hiện ngay chỗ cần reply

      Xóa
    6. Tìm tất cả <b:include data='post' name='comments'/> thay thành <b:include data='post' name='threaded_comments'/>

      Xóa
    7. :v mất lun phần nhận xét r a

      Xóa
  8. Làm sao để thêm skin bình luận như trang này

    Trả lờiXóa
    Trả lời
    1. Mình sẽ dành 1 bài viết khác cho bạn.

      Xóa
    2. phần trả lời sao không hoạt động nhỉ, ấn vào ko dk

      Xóa
    3. Đọc cmt phía trên của mình thử xem bạn.

      Xóa
  9. lỗi như ảnh, mong bác giúp
    https://uphinhnhanh.com/images/2018/07/14/image3e00d.png

    Trả lờiXóa
    Trả lời
    1. body xuất hiện 2 lần em :V nói chung là a ko biết fix :v

      Xóa
    2. Set admin rảnh mình vào xem giúp.

      Xóa
  10. làm sao để đưa phần nhập bình luận lên trên vậy anh

    Trả lờiXóa
  11. https://www.bacsiwindows.com/p/recent-comments.html
    cho em xin code recent cmt new trang tĩnh với

    Trả lờiXóa
    Trả lời
    1. https://www.bacsiwindows.com/comment

      Xóa
    2. k có bài viết hỗ trợ ! a viết bài mới chia sẻ được k ạ ?

      Xóa
    3. Trong đó đó em, anh có viết rồi mà.

      Xóa
  12. Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.text.color là sao ?? :v

    Trả lờiXóa
    Trả lời
    1. Lỗi body.text.color bị lặp 2 lần, tìm và xóa 1 cái đi.

      Xóa
    2. rồi lại tới : Invalid variable declaration in page skin: Variable is used but not defined. Input: body.link.hover.color
      là sao ? :v

      Xóa
    3. Thiếu thẻ body.link.hover.color kìa.

      Xóa
  13. Sao lâu quá không ra bài vậy anh, bận gì à?

    Trả lờiXóa
    Trả lời
    1. Sắp có người mới quản lý rồi. Anh không quản lý blog này nữa.
      Anh chỉ làm dịch vụ services.bacsiwindows.com

      Xóa
  14. Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.text.color
    Lỗi vậy ad ạ

    Trả lờiXóa
    Trả lời
    1. Thẻ Input: body.text.color bị lặp lại 2 lần, tức là trong template đã có đoạn mã như trên rồi mà bạn chèn thêm nên bị lỗi.

      Xóa
CÓ THỂ BẠN ĐANG TÌM