Cách tùy biến khung nhận xét iframe mặc định của Blogger

Khung nhận xét iframe mặc định rất khó tùy biến css phải không các bạn? Tuy nhiên nếu bạn chịu khó để ý một chút thì Blogger mặc định cho phép người dùng chỉnh sửa được màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết.

Cho phép ở đây không phải bằng viết css trực tiếp mà sử dụng skin var khai báo biến đầu vào, cụ thể trong thẻ <b:skin>, bạn có thể tùy biến skin var và khi tải trang khung nhận xét sẽ căn cứ vào đó để hiển thị. Một điều chắc chắn nếu template nào đang sử dụng iframe nhận xét mặc định, trong <b:skin> đều phải có các dòng variable, nếu không khung nhận xét sẽ báo lỗi và không hiển thị được.

Cho nên, bạn không cần thêm, mà chỉ tùy biến thứ đã có sẵn, vấn đề là cài đặt phần nào mới đúng. Bài viết này mình đưa ra gợi ý để các bạn làm theo, nhớ lưu theme trước khi thực hiện để nếu làm sai thì phục hồi lại.

Như đã đề cập ở phần đầu thì Blogger mặc định cho phép người dùng chỉnh sửa được màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết. Cụ thể sẽ có 4 dòng Variable tương tự sau đây sẽ quyết định điều đó, mình lấy ví dụ lưu ý mỗi template đều khai báo biến khác nhau chứ không giống nhau

+ Màu nền backgroud

<Variable name="posts.background.color" description="Post background color" type="color" default="#f2f6fb" value="#f2f6fb"/>

+ Thể loại font chữ và kích cỡ font

<Variable name="posts.text.font" description="Post text font" type="font" default="$(bodyFont)" value="400 18px Roboto,Arial,sans-serif"/>

+ Màu văn bản hiển thị

<Variable name="posts.text.color" description="Post text color" type="color" default="$(body.text.color)" value="#333333"/>

+ Màu của liên kết

<Variable name="posts.link.color" description="Post link color" type="color" default="$(body.link.color)" value="#365899"/>

Các dòng variable này có thể hoặc không được đặt trong group

<Group description="Posts" selector="div.widget.Blog">

</Group>

Hoặc viết gọn

<Group description="Posts">

</Group>

Ngoài ra có template lại sử dụng biến body nha các bạn chứ không sử dụng biến của widget Blog đâu, chẳng hạn như theme Soho

<Group description="Body">
<Variable name="body.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>
<Variable name="body.text.font" description="Text font" type="font" default="$(garamond20)"  value="normal 400 20px EB Garamond, 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="#bf8b38"  value="#bf8b38"/>
</Group>

Nói chung thì rất khó xác định, để có cái nhìn khách quan các bạn cứ truy cập liên kết Trình thiết kế chủ đề: https://www.blogger.com/template-editor.g?blogID=id blog của bạn

Tại đây, bạn có thể cài đặt màu nền, loại font, kích cỡ và màu nhưng không phải template nào cũng giống nhau còn tùy thuộc vào biến variable trong <b:skin>, có thế nào thì hiển thị thế đấy.