Cập nhật blogger comment form lên version 2 thành công 100%

Blogger comment form version 2 được thiết kế theo phong cách phẳng nhìn gọn, đẹp và chuyên nghiệp hơn v1. Đã có rất nhiều bài trên mạng hướng dẫn bạn cách cập nhật lên v2, tuy nhiên những cách đó khá tương đối vì có bạn áp code vào thì được, bạn thì báo lỗi fix cả ngày không xong nguyên nhân là do cấu trúc template hoặc có thể do blogger bị hâm 😀

Trong bài này tôi sẽ hướng dẫn bạn cách Cập nhật blogger comment form lên version 2 theo mẫu contempo đảm bảo thành công 100% với mọi template kể cả những em cứng đầu nhất

Trước hết bạn hãy backup lại temlate của mình cho an toàn cũng như dùng bản backup đó phục vụ cho bước phía sau

Tại thời điểm tôi viết bài, theme mặc định contempo có v1.3.0

Phần 1: Thử nghiệm

Thêm thuộc tính b:templateUrl='indie.xml' vào thẻ mở <html... ví dụ

Tiếp theo dán code sau vào bên dưới <b:skin...> theo mẫu

Code (bao gồm cả /* và */ để blogger render)

/* Variable definitions
====================
<Group description="New Comment Required – Dont edit">
<Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left"/>
<Variable name="body.font" description="Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 14px Arial"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222"/>
<Variable name="body.text.font" description="2" type="font" default="$(body.font)" value="normal normal 14px Arial, sans serif"/>
<Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff"/>
<Variable name="body.link.color" description="7" type="color" default="#2196f3" value="#2196f3"/>
<Variable name="body.link.visited.color" description="8" type="color" default="$(body.link.color)" value="#2196f3"/>
<Variable name="body.link.hover.color" description="9" type="color" default="$(body.link.color)" value="#2196f3"/>
<Variable name="blog.title.font" description="10" type="font" default="$(robotoBold45)" value="$(robotoBold45)"/>
<Variable name="blog.title.color" description="11" type="color" default="#fff" value="#ffffff"/>
<Variable name="header.icons.color" description="12" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.font" description="13" type="font" family="$(body.font.family)" size="$(body.font.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/>
<Variable name="tabs.color" description="14" type="color" default="#ccc" value="#cccccc"/>
<Variable name="tabs.selected.color" description="15" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.overflow.background.color" description="16" type="color" default="$(posts.background.color)" value="#ffffff"/>
<Variable name="tabs.overflow.color" description="17" type="color" default="$(posts.text.color)" value="#222222"/>
<Variable name="tabs.overflow.selected.color" description="18" type="color" default="$(posts.title.color)" value="#212121"/>
<Variable name="posts.title.color" description="19" type="color" default="#212121" value="#212121"/>
<Variable name="posts.title.font" description="20" type="font" default="$(robotoBold22)" value="$(robotoBold22)"/>
<Variable name="posts.text.font" description="21" type="font" default="$(body.text.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
<Variable name="posts.text.color" description="22" type="color" default="$(body.text.color)" value="#222222"/>
<Variable name="posts.icons.color" description="23" type="color" default="#707070" value="#707070"/>
<Variable name="labels.background.color" description="24" type="color" default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)"/>
</Group>
*/

Lưu mẫu lại

• Nếu blogger cho lưu thì chúc mừng, bạn đã lên được v2
• Nếu báo lỗi phổ biến nhất "Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background" thì bạn phải đổi tên biến <Variable name="body.background" ...> thành giá trị khác ví dụ <Variable name="body1.background" ...>
• Nếu đổi tên biến rồi mà vẫn lỗi thì đừng cố nữa, hãy chuyển sang phần 2

Phần 2: Chơi lầy

Tôi sẽ trình bày sơ sơ cách thức thực hiện cho bạn dễ hình dung

• Backup lại template
• Áp mẫu contempo mặc định vào (100% sẽ thành công)
• Khi áp thành công mẫu vào, khung bình luận đã lên v2, giờ bạn chỉ giữ nguyên lại phần code của thẻ <html và phần khai báo biến trong b:skin của theme contempo, còn lại bạn bê nguyên code của template cũ vào

Ok không quá khó hiểu đúng không

Bước 1: Backup lại template bạn tự làm

Bước 2: Áp theme contempo vào

Bước 3: Copy lại code

- Từ <?xml version="1.0" encoding="UTF-8" ?> tới <head> bạn để nguyên
- Từ <head> tới <b:skin...> bạn thay lại code giống như template cũ
- Trong b:skin
+ Xóa đoạn normalize.css đi
+ Xóa đoạn từ
/*!************************************************
 * Blogger Template Style
 * Name: Contempo
 **************************************************/
 tới </b:skin> đi và thay lại bằng code css cũ của bạn

- Từ </b:skin> tới </head> bạn thay lại bằng code cũ
- Từ <body> tới </body> bạn thay lại bằng code cũ

Như vậy chung quy lại ta chỉ mượn theme mặc định để cho blogger chấp thuận templateUrl và các biến trong b:skin còn lại vẫn là code của template cũ

Nhờ cách này mà tôi có thể trị được những template cứng đầu nhất không cho nâng cấp comment form lên v2

Ok với thủ thuật này hi vọng bạn sẽ chủ động hơn trong công tác fix lỗi cũng như thiết kế template theo dòng cập nhật của blogger

Good luck !