Cách xóa bỏ thuộc tính border và fix comment form bị lỗi trong template layout v3

Hướng dẫn loại bỏ thuộc tính border với đường viền ở trên và dưới của khung nhận xét, áp dụng cho theme Contempo và Notable và sửa khung nhận xét bị lỗi

Blogger cung cấp 4 tên theme mặc định layout v3 cho người dùng: Contempo, Soho, Emporio và Notable (tiếng Việt Đáng chú ý) trong đó có 2 style comment form sử dụng chung cho mỗi theme, Loại style có 2 thuộc tính border đường viền trên dưới sử dụng cho theme Contempo và Notable, còn style không có border sử dụng cho theme Soho và Emporio.

Trong chủ đề của theme, với html đầu trang luôn phải có thuộc tính b:templateUrl bên trong, nếu bạn xóa bỏ thuộc tính này đi, khung nhận xét sẽ trở về mặc định của temeplate layout version cũ. Nếu bạn thay đổi mã xml bên trong thuộc tính này khung nhận xét sẽ bị lỗi không tải đúng cách.

Có 4 mã xml tương ứng với tên theme trong thuộc tính b:templateUrl sau đây bạn cần biết

Contempo: indie.xml
Soho: fancy.xml
Emporio: vegeclub.xml
Notable: rockpool.xml

=> Thuộc tính border của khung nhận xét có trong mã xml: indie.xml (theme Contempo) và rockpool.xml (theme Notable) và để bỏ thuộc tính boder bạn cần chuyển đổi mã xml sang fancy.xml (theme Soho) hoặc vegeclub.xml (theme Emporio)

Tuy nhiên khi bạn thay đổi mã xml thuộc tính, khung nhận xét sẽ không hiển thị được nguyên nhân là do các biến Variable bị thiếu, cụ thể với theme hiện tại Variable không bị thiếu nhưng khi chuyển đổi lại bị thiếu.

Để đảm bảo khung nhận xét không lỗi trong thẻ <b:skin> cần có 5 dòng Variable với loại type sau đây

<Variable name="posts.background.color" description="Post background color" type="color" default="transparent" value="transparent"/>
<Variable name="posts.title.color" description="Post title color" type="color" default="#212121" value="#212121"/>
<Variable name="posts.text.font" description="Post text font" type="font" default="400 18px Roboto,Arial,sans-serif" value="400 18px Roboto,Arial,sans-serif"/>
 <Variable name="posts.text.color" description="Post text color" type="color" default="#2d2d2d" value="#2d2d2d"/>
 <Variable name="posts.link.color" description="Post link color" type="color" default="#385898" value="#385898"/>

Áp dụng cho theme Contempo (indie.xml) đang bị thiếu một dòng Variable link.color, các bạn tìm <Group description="Posts" selector="div.widget.Blog"> thêm một dòng Variable sau:

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

Lưu ý: Dòng Variable được thêm không nhất thiết phải nằm trong Group mà nằm bên ngoài độc lập cũng được.

Áp dụng cho theme Notable (rockpool.xml), các bạn thêm tất cả 5 dòng Variable ở trên, hoặc có thể đặt trong Group ví dụ lấy tên Posts

<Group description="Posts">
  <Variable name="posts.background.color" description="Post background color" type="color" default="transparent" value="transparent"/>
  <Variable name="posts.title.color" description="Post title color" type="color" default="#212121" value="#212121"/>
  <Variable name="posts.text.font" description="Post text font" type="font" default="400 18px Roboto,Arial,sans-serif" value="400 18px Roboto,Arial,sans-serif"/>
  <Variable name="posts.text.color" description="Post text color" type="color" default="#2d2d2d" value="#2d2d2d"/>
  <Variable name="posts.link.color" description="Post link color" type="color" default="#385898" value="#385898"/>
</Group>

Các thuộc tính default và value bên trong Variable có thể thay đổi tùy thích.

Trên đây là hướng dẫn xóa bỏ thuộc tính border và fix comment form bị lỗi trong template layout v3 áp dụng với widget Blog version 2, mấu chốt của vấn đề để khung nhận xét không bị lỗi thì trong b:skin cần có tối thiểu 5 dòng Variable như mình đã đề cập cho dù là theme nào layout v3 cũng không bị lỗi.

Trường hợp bạn nâng cấp khung nhận xét từ widget Blog version 1 cũng vậy, bạn cũng chỉ cần thêm 2 bước sau:

Bước 1: Kiểm tra và thêm thuộc tính b:templateUrl='fancy.xml' hoặc b:templateUrl='vegeclub.xml' bên trong thẻ html đầu trang

Bước 2: Thêm 5 dòng Variable ở trên bên trong b:skin

Các bạn lưu ý không chỉnh sửa liên kết nhận xét mặc định data:post.commentFormIframeSrc vì thẻ data này sẽ căn cứ vào mã xml bên trong thuộc tính b:templateUrl để trích xuất html

Theme Contempo: https://www.blogger.com/comment-iframe.g?blogID=<id của blog>&amp;postID=<Id của post>&amp;skin=contempo&amp;blogspotRpcToken=<mã random>

Theme Soho: https://www.blogger.com/comment-iframe.g?blogID=<id của blog>&amp;postID=<Id của post>&amp;skin=soho&amp;blogspotRpcToken=<mã random>

Theme Emporio: Theme Contempo: https://www.blogger.com/comment-iframe.g?blogID=<id của blog>&amp;postID=<Id của post>&amp;skin=emporio&amp;blogspotRpcToken=<mã random>

Theme Notable: Theme Contempo: https://www.blogger.com/comment-iframe.g?blogID=<id của blog>&amp;postID=<Id của post>&amp;skin=notable&amp;blogspotRpcToken=<mã random>

Vậy nếu bạn muốn tạo broder bao quang khung nhận xét thì sao? Đó lại một câu chuyện dài và hẹn gặp các bạn ở bài viết kế tiếp 😀

Thêm đánh giá

3 bình luận