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
/ lúc / 21 bình luận
Chia sẻ
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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ẻ!

21 nhận xét:

Trịnh Đăng An nói...

:v đù, ra rồi à

22:09 19/5/18
⊱⊰ Star Phong Blog ⊱⊰ nói...

Hú anh <3

22:10 19/5/18
Thanh Phú IT nói...

hello :V

22:11 19/5/18
Trường Nguyễn nói...

Ơ mình cài 00h mà ta!!?

22:12 19/5/18
Trường Nguyễn nói...

Hú em !! ^^

22:12 19/5/18
Trường Nguyễn nói...

Xin chào !!!

22:12 19/5/18
Trịnh Đăng An nói...

:v haha, chắc là có gì r

22:18 19/5/18
Đức Huy Blog nói...

Ngầu :v

01:14 20/5/18
Nguyễn Chánh Đức nói...

Hay quá anh :v

09:11 20/5/18
Trường Nguyễn nói...

Ngon!

09:49 20/5/18
Trường Nguyễn nói...

Cảm ơn em ;v

09:49 20/5/18
Trường Nguyễn nói...

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

09:50 20/5/18
Trương Ngọc Tuấn nói...

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

17:48 20/5/18
Trường Nguyễn nói...

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

17:53 20/5/18
Việt Hưng nói...

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

11:20 21/5/18
Trường Nguyễn nói...

Cảm ơn bạn :D

11:51 21/5/18
All Free Vn nói...

đã 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...

23:15 10/6/18
Lê Bá Long IT nói...

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

01:15 11/6/18
Trường Nguyễn nói...

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

08:15 11/6/18
Trường Nguyễn nói...

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

08:15 11/6/18
Vũ Trường nói...

HAY

20:33 1/7/18

Đăng nhận xét