Hướng dẫn update khung bình luận blogspot kiểu mới

Chào các bạn, bây giờ là 22h30p rồi và mình vẫn đang cặm cụi update dần dần của Twitter Template version 2.5. Nhận thấy rằng còn một thứ mà bấy lâu nay rất muốn làm cho xong nhưng đều bị lỗi nhưng sau khi tìm hiểu kĩ nguyên nhân thì hiện tại mình đã chính thức update xong Comment Form (khung bình luận) lên phiên bản mới trông chuyên nghiệp hơn và chỉ có ở các Contempo Template sau này. Bài hướng dẫn thực ra đã có vài blog viết rồi những họ thường bỏ qua 1 dòng CSS nhỏ và chưa nói cách fix đối với blog dùng threaded comment cũ nên sẽ không làm được vì thế mình sẽ hướng dẫn chi tiết ở bài này nha. Trong bài viết mình có sử dụng 1 số code của blogthuthuatwin10. Nào bắt đầu thôi!

Cách thực hiện:

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.

Bước 2: Tìm thẻ có dạng (nằm ngay phần đầu mỗi template):

<html....>

Và thay thế bằng:

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.1.1' expr:dir='data:blog.languageDirection' 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 3: Đây là khâu chèn CSS của đợt update lên version mới của Blogger, bạn hãy copy toàn bộ CSS sau và dán ngay sau (nhớ là ngay sau luôn nhé) thẻ <b:skin>

/* <!-- Constants --> <Variable name="damionRegular36" description="Damion Regular 36" type="font" default="400 36px Damion, cursive" hideEditor="true"  value="400 36px Damion, cursive"/> <Variable name="damionRegular62" description="Damion Regular 62" type="font" default="400 62px Damion, cursive" hideEditor="true"  value="400 62px Damion, cursive"/> <Variable name="playfairDisplayBlack28" description="Playfair Display Black 28" type="font" default="900 28px Playfair Display, serif" hideEditor="true"  value="900 28px Playfair Display, serif"/> <Variable name="playfairDisplayBlack36" description="Playfair Display Black 36" type="font" default="900 36px Playfair Display, serif" hideEditor="true"  value="900 36px Playfair Display, serif"/> <Variable name="playfairDisplayBlack44" description="Playfair Display Black 44" type="font" default="900 44px Playfair Display, serif" hideEditor="true"  value="900 44px Playfair Display, serif"/> <Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true"  value="15px Roboto, sans-serif"/> <Variable name="robotoNormal16" description="Roboto Normal 16" type="font" default="16px Roboto, sans-serif" hideEditor="true"  value="16px Roboto, sans-serif"/> <Variable name="robotoLightItalic15" description="Roboto Light Italic 15" type="font" default="italic 300 15px Roboto, sans-serif" hideEditor="true"  value="italic 300 15px Roboto, sans-serif"/> <Variable name="robotoBold22" description="Roboto Bold 22" type="font" default="bold 22px Roboto, sans-serif" hideEditor="true"  value="bold 22px Roboto, sans-serif"/> <Variable name="robotoBold30" description="Roboto Bold 30" type="font" default="bold 30px Roboto, sans-serif" hideEditor="true"  value="bold 30px Roboto, sans-serif"/> <Variable name="robotoBold45" description="Roboto Bold 45" type="font" default="bold 45px Roboto, sans-serif" hideEditor="true"  value="bold 45px Roboto, sans-serif"/>  <!-- Variable definitions -->  <Variable name="keycolor" description="Main color" type="color" default="#2196f3"  value="#2196f3"/> <Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" /> <Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />  <Group description="Page Text">   <Variable name="body.text.font" description="Font"       type="font"       default="$(robotoNormal15)"  value="15px Roboto, sans-serif"/>   <Variable name="body.text.color" description="Color"       type="color"       default="#333333"  value="#333333"/> </Group>  <Group description="Backgrounds">   <Variable name="body.background.height" description="Background height"       type="length"       min="420px"       max="640px"       default="480px"  value="480px"/>   <Variable name="body.background" description="Background"       color="$(body.background.color)"       type="background"       default="$(color) none repeat scroll top left"  value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/>   <Variable name="body.background.color" description="Body background color"       type="color"       default="#eee"  value="#eeeeee"/>   <Variable name="posts.background.color" description="Post background color"       type="color"       default="#fff"  value="#ffffff"/>   <Variable name="body.background.blur" description="Background blur"       type="length"       min="0px"       max="50px"       default="0px"  value="0px"/> </Group>  <Group description="Links">   <Variable name="body.link.color" description="Link color"       type="color"       default="#2196f3"  value="#2196f3"/>   <Variable name="body.link.visited.color" description="Visited link color"       type="color"       default="$(body.link.color)"  value="#2196f3"/>   <Variable name="body.link.hover.color" description="Link Hover color"       type="color"       default="$(body.link.color)"  value="#2196f3"/> </Group>  <Group description="Blog title" selector="div.widget.Header">   <Variable name="blog.title.font" description="Font"       type="font"       default="$(robotoBold45)"  value="bold 45px Roboto, sans-serif"/>   <Variable name="blog.title.color" description="Color"       type="color"       default="#fff"  value="#ffffff"/>   <Variable name="header.icons.color"       description="Background icons color"       type="color"       default="#fff"  value="#ffffff"/> </Group>  <Group description="Tabs text" selector="div.widget.PageList">   <Variable name="tabs.font" description="Font"       type="font"       family="$(robotoNormal15.family)"       size="$(robotoNormal15.size)"       default="700 normal $(size) $(family)"  value="700 normal $(size) $(family)"/>   <Variable name="tabs.color" description="Text color"       type="color"       default="#ccc"  value="#cccccc"/>   <Variable name="tabs.selected.color" description="Selected color"       type="color"       default="#fff"  value="#ffffff"/>   <Variable name="tabs.overflow.background.color" description="Popup background color"       type="color"       default="$(posts.background.color)"  value="#ffffff"/>   <Variable name="tabs.overflow.color" description="Popup text color"       type="color"       default="$(posts.text.color)"  value="#333333"/>   <Variable name="tabs.overflow.selected.color" description="Popup selected color"       type="color"       default="$(posts.title.color)"  value="#212121"/> </Group>  <Group description="Posts" selector="div.widget.Blog">   <Variable name="posts.title.color" description="Post title color"       type="color"       default="#212121"  value="#212121"/>   <Variable name="posts.title.font" description="Post title font"       type="font"       default="$(robotoBold22)"  value="bold 22px Roboto, sans-serif"/>   <Variable name="posts.stream.title.font" description="Post title stream font"       type="font"       default="$(robotoBold30)"  value="bold 30px Roboto, sans-serif"/>   <Variable name="posts.text.font" description="Post text font"       type="font"       default="$(body.text.font)"  value="15px Roboto, sans-serif"/>   <Variable name="posts.text.color" description="Post text color"       type="color"       default="$(body.text.color)"  value="#333333"/>   <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"/>   <Variable name="posts.icons.color"       description="Post icons color"       type="color"       default="#707070"  value="#707070"/> </Group>  <Group description="Search">   <Variable name="search.input.color" description="Input color"       type="color"       default="$(blog.title.color)"  value="#ffffff"/>   <Variable name="search.input.font" description="Input font"       type="font"       default="$(robotoNormal16)"  value="16px Roboto, sans-serif"/>   <Variable name="search.placeholder.color" description="Placeholder text color"       type="color"       default="$(blog.title.color)"  value="#ffffff"/> </Group>  <Group description="Sharing">   <Variable name="sharing.background.color"       description="Sharing background color"       type="color"       default="$()"  value="#ffffff"/>   <Variable name="sharing.text.color" description="Sharing text color"       type="color"       default="$(posts.title.color)"  value="#212121"/>   <Variable name="sharing.icons.color"       description="Sharing icons color"       type="color"       default="$(sharing.text.color)"  value="#212121"/> </Group>  <Group description="Popular posts" selector="div.widget.PopularPosts">   <Variable name="popularposts.background.color"       description="Popular post background color"       type="color"       default="$(body.background.color)"  value="#eeeeee"/>   <Variable name="popularposts.byline.color"       description="Popular post byline color"       type="color"       default="$(posts.byline.color)"  value="rgba(0, 0, 0, 0.54)"/>   <Variable name="popularposts.title.color"       description="Popular post title color"       type="color"       default="$(posts.title.color)"  value="#212121"/>   <Variable name="popularposts.text.color"       description="Popular post text color"       type="color"       default="$(posts.text.color)"  value="#333333"/>   <Variable name="popularposts.link.color"       description="Popular post link color"       type="color"       default="$(body.link.color)"  value="#2196f3"/> </Group>  <Group description="Post navigation" selector='div.blog-pager'>   <Variable name="posts.navigation.link.color"       description="Post navigation links color"       type="color"       default="$(body.link.color)"  value="#2196f3"/>   <Variable name="posts.navigation.link.visited.color"       description="Post navigation links visited color"       type="color"       default="$(body.link.visited.color)"  value="#2196f3"/>   <Variable name="posts.navigation.link.hover.color"       description="Post navigations links hover color"       type="color"       default="$(body.link.hover.color)"  value="#2196f3"/> </Group>  <Group description="Sidebar" selector="div.sidebar-container">   <Variable name="sidebar.backgroundColorTop"       description="Background color (Top)"       type="color"       default="#f7f7f7"  value="#ffffff"/>   <Variable name="sidebar.backgroundColorTopHD"       description="Background color (Top) - HD"       type="color"       default="rgba(255, 255, 255, 1)"  value="#f7f7f7"/>   <Variable name="sidebar.backgroundColorBottom"       description="Background color (Bottom)"       type="color"       default="#fff"  value="#ffffff"/>   <Variable name="sidebar.separator.color"       description="Separator color"       type="color"       default="#ccc"  value="#cccccc"/>   <Variable name="widget.title.color"       description="Gadget title color"       type="color"       default="#212121"  value="#212121"/>   <Variable name="sidebar.icons.color"       description="Sidebar icons color"       type="color"       default="#707070"  value="#707070"/> </Group>  <Group description="Author profile" selector='.widget.Profile'>   <Variable name="profile.title.color" description="Profile title color"       type="color"       default="rgba(0,0,0,0.52)"  value="rgba(0,0,0,0.52)"/>   <Variable name="profile.text.color" description="Profile text color"       type="color"       default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>   <Variable name="profile.link.color" description="Profile link color"       type="color"       default="$(posts.title.color)"  value="#212121"/> </Group>  <Group description="Labels" selector=".widget.Label">   <Variable name="labels.text.color"       description="Label text color"       type="color"       default="$(body.link.color)"  value="rgba(0,0,0,0.54)"/>   <Variable name="labels.background.color"       description="Label background color"       type="color"       red="$(labels.text.color.red)"       green="$(labels.text.color.green)"       blue="$(labels.text.color.blue)"       default="rgba($red, $green, $blue, 0.05)"  value="#f7f7f7"/> </Group>  <Group description="Attribution" selector=".widget.Attribution">   <Variable name="attribution.text.color" description="Attribution text color"       type="color"       default="$(body.text.color)"  value="#333333"/>   <Variable name="attribution.link.color" description="Attribution link color"       type="color"       default="$(body.link.color)"  value="#2196f3"/>   <Variable name="attribution.icon.color" description="Attribution icon color"       type="color"       default="#707070"       hideEditor="true"  value="#707070"/> </Group>  <Group description="Widths">   <Variable name="sidebar.width" description="Sidebar width" type="length"             min="100px" max="1000px" default="284px"  value="284px"/>   <Variable name="content.width" description="Content width" type="length"             min="600px" max="2400px" default="922px"  value="922px"/>   <Variable name="content.margin" description="Content margin" type="length"             min="0px" max="1000px" default="117px"  value="117px"/> </Group>  */

và thay <b:skin> thành <b:skin version='1.1.0'> nếu không làm được.
Bước 4: Tiếp đến đây là một dòng CSS vô cùng nhỏ những "rất quan trọng", nếu không có dòng này thì bạn sẽ gặp lỗi mất Comment Form đi đấy (nếu như các template mình test thì là như vậy), hãy chèn dòng này trước ]]></b:skin>

#comment-editor-src {display: none;}

Bước 5: Lưu template lại.

Kết luận:

Ok! Vậy là mình vừa hướng dẫn xong cho các bạn cách để nâng cấp khung bình luận cũ lên phiên bản mới hoành tráng hơn rồi đó. Lưu ý, do bước 1 chính là update lên phiên bản mới của toàn bộ blog nên có thể bố cục template bị thay đổi, gây lỗi. Cách duy nhất để khắc phục thì bạn phải tìm lỗi và viết lại CSS cho chúng thôi :D Chúc các bạn thành công.
Update fix lỗi: 1.Lỗi không phân cấp được Threaded Comment:
Nhờ sự làm việc quên ăn quên ngủ của Trường Nguyễn - Admin Bác Sĩ Windows thì giờ đã fix đc lỗi không phân cấp được threaded comment rồi anh em nhưng mọi người phải chuẩn bị tinh thần viết lại hết CSS phần comment nhé :3
- Tìm tất cả:
<b:include data='post' name='comments'/>
và thay thành:
<b:include data='post' name='threaded_comments'/>
2. Lỗi "A skin cannot contain the element: #comment. Only text and CDATA sections are accepted."
Lỗi này bị là do thẻ