Home Comment CSS Thủ Thuật Blogspot

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

Tác giả Vũ Trường
Xuất bản
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ẻ!

Viết bình luận (61)

Xếp theo
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. Huy Hoàng IT22:09 19/5/18

      :v đù, ra rồi à

      Trả lờiXóa
    2. ⊱⊰ Star Phong Blog ⊱⊰22:10 19/5/18

      Hú anh <3

      Trả lờiXóa
    3. Võ Thanh Phú22:11 19/5/18

      hello :V

      Trả lờiXóa
    4. Đức Huy Blog01:14 20/5/18

      Ngầu :v

      Trả lờiXóa
    5. Nguyễn Chánh Đức09:11 20/5/18

      Hay quá anh :v

      Trả lờiXóa
    6. Vũ Trường09:50 20/5/18

      Chưa test, có ai lỗi không lưu được không? Screenshot lại nhé

      Trả lờiXóa
    7. Tuấn Trương17:48 20/5/18

      Hay :v tiếc là không còn xài cmt của blogger :))

      Trả lờiXóa
      Trả lời
      1. Vũ Trường17:53 20/5/18

        Thế dùng Facebook comment à? FBCM cũng hay nhưng khó tùy biến hơn.

        Xóa
    8. Việt Hưng11:20 21/5/18

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

      Trả lờiXóa
    9. iHayVn23:15 10/6/18

      đã 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. Vũ Trường08:15 11/6/18

        Thử thay <b:skin> thành <b:skin version='1.1.0'> thử xem được không?

        Xóa
    10. Lê Bá Long IT01:15 11/6/18

      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. Vũ Trường08:15 11/6/18

        Thử thay <b:skin> thành <b:skin version='1.1.0'> thử xem được không?

        Xóa
      2. Lê Bá Long IT14:46 21/6/18

        Vẫn ko được

        Xóa
    11. Đàm Kiên10:38 14/6/18

      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. Vũ Trường14:13 14/6/18

        Thử thay <b:skin> thành <b:skin version='1.1.0'> xem được không?

        Xóa
    12. Unknown17:01 14/6/18

      Res lại mobile đi thánh

      Trả lờiXóa
    13. Huy Hoàng IT20:17 23/6/18

      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. Vũ Trường20:28 23/6/18

        Xóa hết CSS cũ viết lại mới đi em.

        Xóa
      2. Huy Hoàng IT20:39 23/6/18

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

        Xóa
      3. Vũ Trường20:49 23/6/18

        Link blog xem.

        Xóa
      4. Vũ Trường20:52 23/6/18

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

        Xóa
      5. Huy Hoàng IT20:54 23/6/18

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

        Xóa
      6. Vũ Trường20:56 23/6/18

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

        Xóa
      7. Huy Hoàng IT21:02 23/6/18

        :v mất lun phần nhận xét r a

        Xóa
    14. Hanoitan20:29 2/7/18

      Làm sao để thêm skin bình luận như trang này

      Trả lờiXóa
      Trả lời
      1. Vũ Trường21:36 2/7/18

        Mình sẽ dành 1 bài viết khác cho bạn.

        Xóa
      2. Hanoitan21:57 5/7/18

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

        Xóa
      3. Vũ Trường21:10 6/7/18

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

        Xóa
    15. Star Tỉnh IT10:41 14/7/18

      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. Thìn DZ18:16 14/7/18

        body xuất hiện 2 lần em :V nói chung là a ko biết fix :v

        Xóa
      2. Vũ Trường08:12 16/7/18

        Set admin rảnh mình vào xem giúp.

        Xóa
    16. Quốc Bảo Blog08:39 23/7/18

      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. Unknown11:02 23/7/18

        Dễ mà

        Xóa
      2. Quốc Bảo Blog11:59 23/7/18

        làm sao ? có thử nhưng fail

        Xóa
      3. hùng20:55 24/7/18

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

        Xóa
    17. Cá Bảy Màu10:31 12/8/18

      Đức test comment nhé! :))

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

      sinh nhật vui vẻ

      Trả lờiXóa
    19. 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. Vũ Trường14:00 30/8/18

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

        Xóa
    20. wtf17:00 30/8/18

      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. Vũ Trường19:01 30/8/18

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

        Xóa
      2. wtf19:46 30/8/18

        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. Vũ Trường23:06 30/8/18

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

        Xóa
    21. olalavui08:01 7/9/18

      đẹp ợ

      Trả lờiXóa
    22. Trịnh Công Sơn22:24 10/9/18

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

      Trả lờiXóa
      Trả lời
      1. Vũ Trường07:37 11/9/18

        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
    23. Hồ Nguyên IT11:31 11/9/18

      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. Vũ Trường11:44 11/9/18

        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
    24. Hoangdacviet19:15 29/12/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
    25. KienFo10:07 26/3/19

      Đã thử nhưng không được ad ơi

      Trả lờiXóa