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ẻ!
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    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. Res lại mobile đi thánh

      Trả lờiXóa
    8. 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. A thấy vẫn reply bình thường đấy chứ, lỗi gì đâu.

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

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

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

        Xóa
    9. 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
    10. 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
    11. làm sao để đưa phần nhập bình luận lên trên vậy anh

      Trả lờiXóa
      Trả lời
      1. làm sao ? có thử nhưng fail

        Xóa
      2. https://starhungits.blogspot.com/2018/07/huong-dan-at-khung-nhan-xet-nam-co-inh.html

        Xóa
    12. Đức test comment nhé! :))

      Trả lờiXóa
    13. Nặc danh18:16 20/8/18

      sinh nhật vui vẻ

      Trả lờiXóa
    14. Nặc danh17:25 22/8/18

      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. Nặc danh19:16 23/8/18

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

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

        Xóa
    15. 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
    16. 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
    17. 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
    18. Tùy biến vậy có nặng thêm web và load lâu hơn cũ ko?

      Trả lờiXóa
    19. Đã thử nhưng không được ad ơi

      Trả lờiXóa