Hướng dẫn cập nhật Blogger Comment Form lên phiên bản mới

Update Blogger Comment Form to New Version, step-by-step

Song song với việc cập nhật Layout, Default Widget và b:Skin, Blogger cũng đồng thời nâng cấp Blogger Comment Form lên phiên bản mới, đổi từ skin soho sang skin contempo.

Với skin mới Comment Form có thể thu gọn lại khi ta click vào thì mới hiện ra form bình luận giúp ít chiếm diện tích và trông chuyên nghiệp hơn.

Đối với những website đang dùng theme phiên bản cũ muốn cập nhật Blogger Comment Form lên phiên bản mới hãy theo dõi hướng dẫn chi tiết ở bài viết bên dưới của Iris Tips nhé.

Cách thực hiện

Sao lưu lại template trước khi thực hiện, vì khi thực hiện nâng cấp rất dễ bị lỗi.

1Đã hoàn thành việc thực hiện nâng cấp Blogger Layout, Default Widget và b:Skin. Tức là đã thực hiện đầy đủ các bước ở bài viết dưới đây.

Xem thêm: Hướng dẫn cập nhật Blogger Layout, Default Widget và b:Skin lên phiên bản mới

2Vào Chủ đề >> Chỉnh sửa HTML, tìm kiếm đoạn code (có tất cả 6 đoạn code như vậy, tùy cấu trúc từng theme số lượng có thể thay đổi)

<a expr:href='&quot;//www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

3Thay thế tất cả các đoạn code vừa tìm được ở bước 2 thành đoạn code sau

<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id + &quot;&amp;skin=contempo&quot;' id='comment-editor-src' title='comment editor'/>

4Vậy là xong rồi đấy Comment Form đã khoác lên mình 1 bộ skin mới trông rất chuyên nghiệp phải không nào. Bạn có thể so sánh sự khác biệt của 2 skin ở 2 hình bên dưới.

Cập nhật: Nếu bạn nâng cấp bị lỗi bạn hãy làm tiếp theo các bước sau nhé.

5Chèn đoạn CSS bên dưới vào ngay sau thẻ <b:skin version='1.0.0'> hoặc <b:skin version='1.0.0'> <![CDATA[ bạn vừa mới nâng cấp ở các bước trên.

/*
<!-- 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>
*/

6Để sửa lỗi phân cấp bình luận bạn hãy tìm đoạn code <b:include data='post' name='comments'/> và thay thế tất cả thành <b:include data='post' name='threaded_comments'/>

7Viết lại CSS phần bình luận mới

#comments{margin-top:0;padding:0}
#comments .comment{position:relative;margin-top:0}
#comments .comment-thread ol{margin:0;padding-left:0}
#comments .comment-thread ol{padding-$startSide:0}
#comments .comment-thread .comment-replies,#comments .comment .comment-replybox-single{margin-left:60px}
#comments .comment-thread .thread-count,.comments .continue{display:none}
#comments .comment{list-style-type:none;padding:0 0 30px 0;position:relative}
#comments .comment .comment{padding-bottom:8px}
.comment .avatar-image-container{position:absolute}
.comment .avatar-image-container img{border-radius:50%;height:40px;width:40px}
.avatar-image-container svg,.comment .avatar-image-container .avatar-icon{border-radius:50%;border:solid 1px $(posts.icons.color);box-sizing:border-box;fill:$(posts.icons.color);height:40px;margin:0;padding:7px;width:40px}
.comment .comment-block{margin-top:10px;padding-bottom:0}
.comment .comment-block{margin-$startSide:60px}
#comments .comment-author-header-wrapper{margin-left:40px}
#comments .comment .thread-expanded .comment-block{padding-bottom:20px}
#comments .comment .comment-header .user,#comments .comment .comment-header .user a{color:$(posts.title.color);font-style:normal;font-weight:bold}
#comments .comment .comment-actions{background:transparent;border:0;box-shadow:none;cursor:pointer;font-size:13.5px;outline:none;text-decoration:none;text-transform:uppercase;width:auto;bottom:0;margin-bottom:15px;position:absolute}
#comments .comment .comment-actions a{color:$(body.text.color)}
#comments .comment .comment-actions a:hover{color:$(body.link.color)}
#comments .comment .comment-actions > *{margin-right:8px}
#comments .comment .comment-header .datetime{bottom:0;color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),0.54);display:inline-block;font-size:13px}
#comments .comment .comment-header .datetime{margin-$startSide:8px}
#comments .comment .comment-header .datetime a,#comments .comment .comment-footer .comment-timestamp a{color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),0.54)}
.comment .comment-body,#comments .comment .comment-content{margin-top:12px;margin-bottom:15px;word-break:break-word}
.comment-body{margin-bottom:12px}
#comments.embed[data-num-comments="0"]{border:none;margin-top:0;padding-top:0}
#comments.embed[data-num-comments="0"] #comment-post-message,#comments.embed[data-num-comments="0"] div.comment-form > p,#comments.embed[data-num-comments="0"] p.comment-footer{display:none}
#comment-editor-src{display:none}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}

Lưu ý: Sau khi nâng cấp tất cả các bình luận ở phiên bản cũ sẽ trở thành cấp 1, sẽ chỉ có các bình luận ở phiên bản mới mới được phân cấp, do đó Iris Tips chỉ khuyến khích nâng cấp Comment Form ở các blog mới chưa có nhiều bình luận. Ngoài ra khi nâng cấp một số chức năng có thể bị lỗi như chèn emoji, hình ảnh vào phần bình luận.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm