Cách đổi giao diện Contempo, Soho cho hệ thống Comment Blogspot

Hiện tại, Blogger - Blogspot đã ra mắt thêm nhiều giao diện mặc định đẹp và phong cách hơn, để người dùng có nhiều sự lựa chọn hơn, kèm theo đó là hệ thống Comment - Bình Luận của nó.

Trong đó, là 2 hệ thống Comment thường dùng nhất là Contempo và Soho, 2 cái sẽ có kiểu hơi khác nhau.

Nếu như bạn muốn chuyển đổi qua lại giữa hai hệ thống Comment này, thì bạn phải hiểu code của nó, nếu không khi chuyển sẽ gặp lỗi. Nên hôm nay mình viết bài này, để hướng dẫn bạn cách chỉnh sửa để không bị lỗi nha.

Thay giao diện Contempo và Soho cho hệ thống Comment Blogspot

Bước 1: Bạn hãy kiểm tra xem ở phần thẻ <html> đã được thay đổi chưa, nếu chưa hãy thay đổi dùm mình theo code bên dưới.
Thay
<html>
Thành
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' expr:lang='data:blog.localeUnderscoreDelimited' 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 cụm từ data:post.commentFormIframeSrc
- Nếu dùng skin Soho thì thay bằng code này
<a expr:href='data:post.commentFormIframeSrc + "&skin=soho"' id='comment-editor-src' rel='noopener noreferrer' title='Comment Form Link'/>
- Nếu dùng skin Contempo thì thay bằng code này
<a expr:href='data:post.commentFormIframeSrc + "&skin=contempo"' id='comment-editor-src' rel='noopener noreferrer' title='Comment Form Link'/>
Bước 3: Tìm thẻ <b:skin><![CDATA[
- Nếu dùng Soho sử dụng mã sau
/*
<Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left"  value="#ffffff"/>
<Variable name="body.background.color" description="Background color" type="color" default="#fff"  value="#f7f7f7"/>
<Variable name="body.title.color" description="Title color" type="color" default="#000"  value="#000000"/>
<Variable name="body.action.font.large" description="Action font (large)" type="font" default="$(montserrat14)"  value="normal 14px Arial, sans-serif"/>
<Variable name="body.action.color" description="Action color" type="color" default="#bf8b38"  value="#bf8b38"/>
<Variable name="body.text.font" description="Text font" type="font" default="$(garamond20)"  value="normal 20px Arial, 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="#bf8b38"  value="#e0384c"/>
*/
- Nếu dùng Contempo sử dụng mã sau
/*
<Variable name="body.text.font" description="Font" type="font" default="$(fuente)" value="15px Josefin Sans, sans-serif"/> 
<Variable name="body.text.color" description="Color" type="color" default="#444"/>
<Variable name="body.background" description="Background" type="background" default="#fff none repeat scroll top left"/>
<Variable name="posts.background.color" description="Post background color" type="color" default="#fff"/> 
<Variable name="body.link.color" description="Link color" type="color" default="#992e38"/> 
<Variable name="tabs.font" description="Fonts" type="font" default="$(fuente)"/>
<Variable name="posts.title.color" description="Post title color" type="color" default="#212121"/> 
<Variable name="posts.icons.color" description="Post icons color" type="color" default="#707070"/>
<Variable name="labels.background.color" description="Label background color" type="color" default="#f7f7f7"/>
<Variable name="posts.text.color" description="Post text color"  type="color" default="$(body.text.color)"  value="#757575"/>
<Variable name="posts.byline.color" description="Post byline color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
<Variable name="blockquote.font" description="Blockquote font" type="font" default="$(robotoLightItalic15)"  value="italic 300 15px Roboto, sans-serif"/>
<Variable name="blockquote.color" description="Blockquote color" type="color" default="#444"  value="#444444"/>
*/
Bạn lưu mẫu lại là xong.

Vậy là bạn đã biết cách thay đổi giao diện Comment Contempo và Soho cho hệ thống Comment Blogspot. Thật là đơn giản và dễ phải không nào. Hãy tận dụng nó để tạo hệ thống Comment cho Website của bạn thật đẹp nhé.

Đăng nhận xét

0 Nhận xét