Tạo comment phân cấp đẹp chuẩn HTML5 admin blogspot ~ Ngoc Anh

Chào các bạn sau một quá trình chỉnh sửa và tối ưu hóa template blogspot, thì tự nhiên template của mình phần comment bị dính lỗi không còn...

Blogspot+ CSS+ HTML+ HTML5

Chào các bạn sau một quá trình chỉnh sửa và tối ưu hóa template blogspot, thì tự nhiên template của mình phần comment bị dính lỗi không còn phân cấp được nữa . Trong khi mình chỉnh sửa mình lại không kiểm tra xem lỗi của nó từ đâu ra, loằng ngoằng thật biết nó bị từ đâu bây giờ ? thôi thì tạo lại khung comment phân cấp cho nó vậy .

Tạo comment phân cấp đẹp chuẩn HTML5 admin blogspot

Tạo khung comment phân cấp blogspot.

Bước 1: Đăng nhập tài khoản của blogger >> Mẫu >> Chỉnh sửa HTML5 >> Nhấn Ctrl +F >> Tìm đến ]]></b:skin> sau đó thay đoạn CSS dưới đây vào trước nó .( Bước này được chuẩn hóa CSS3 ).

/* comment-phancap */
#comments {
margin : 70px auto 0;
padding : 5px 20px 0;
line-height : 1em;
border-top : 1px solid #ddd;
}
#comments h3 {
margin-bottom : 25px;
font : 24px Oswald;
text-transform : uppercase;
}
.comment_avatar {
height : 48px;
width : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSdTmR63oaw0XkCGJ8ewI9BNcGLiruh4P5aFzCPlYe9MVauI9p6Du4RaYDzvPWoL1y6H9fK7g1cirm6rtQdqllNUhKvhwXg9TLJFpS69UFW2cBQiZOmgthe9b0PnnXVTcYgXbqeyLh-WQ/s48/anon48.gif) center center no-repeat #fff;
float : left;
margin-top : 5px;
margin-right : 10px;
margin-left : -30px;
padding : 4px;
border : #ddd solid 1px;
overflow : hidden;
transition : all 400ms ease-in-out;
}
.comment_name {
color : #444;
font-size : 18px;
font-weight : normal;
line-height : 19.5px;
max-width : 100%;
text-decoration : none;
margin-top : 8px;
text-transform : uppercase;
}
.comment_name a {
text-transform : uppercase;
font : 20px Oswald;
color : #444;
text-decoration : none;
transition : all 400ms ease-in-out;
}
.comment_name a:hover {
color : red;
text-decoration : none;
}
.comment_service {
float : right;
margin-right : 0;
margin-top : -35px;
position : relative;
}
.comment_service a {
display : inline-block;
}
.comment_body p {
font : 16px 'PT Sans Narrow';
line-height : 1.3em;
color : #666;
}
.comment_body {
margin : 5px 0 10px;
padding : 0 60px 0 38px;
position : relative;
}
.comment_date {
color : #999;
font-style : italic;
font-size : 11px;
line-height : 25px;
cursor : pointer;
font-weight : normal;
margin-right : 20px;
}
.comment_area {
border : #ddd solid 1px;
margin-bottom : 10px;
margin-left : 30px;
padding-right : 10px;
transition : all 400ms ease-in-out;
}
.comment_area:hover {
border : #666 solid 1px;
}
.comment_area:hover .comment_avatar {
border : #666 solid 1px;
}
.comment_area:hover .comment_reply {
opacity : 1;
top : 8px;
}
.comment_child .comment_body {
margin-top : 5px;
margin-bottom : 10px;
padding-left : 30px;
}
.comment_child .comment_wrap {
padding-left : 40px;
}
.comment_reply {
display : inline-block;
cursor : pointer;
color : #ffffff;
font-family : arial;
font-size : 11px;
font-weight : bold;
padding : 4px 16px;
text-decoration : none;
float : right;
position : absolute;
right : 0;
top : -20px;
opacity : 0;
transition : all 400ms ease-in-out;
background-color : #666;
}
.comment_reply:hover {
text-decoration : none;
background-color : #333;
}
.comment_reply:active {
margin-top : 1px;
}
a.comment_reply {
color : #fff;
}
.unneeded-paging-control {
display : none;
}
.comment_reply_form {
padding : 0 0 0 48px;
}
.comment_reply_form .comment-form {
width : 100%;
}
.comment_avatar * {
max-width : 1000% !important ;
display : block;
max-height : 1000% !important ;
width : 48px !important ;
height : 48px !important ;
margin-right : 10px;
background : #fff;
}
.comment_child .comment_avatar, .comment_child .comment_avatar * {
width : 40px !important ;
height : 40px !important ;
float : left;
margin-right : 10px;
background : #fff;
}
.comment_form a {
color : #2f6986;
text-decoration : none;
}
.comment_form a:hover {
color : #2f6986;
text-decoration : underline;
}
.comment_author_flag {
display : none;
}
.comment_admin .comment_author_flag {
display : inline-block;
color : #ffffff;
font-family : arial;
font-size : 12px;
font-weight : bold;
padding : 1px 8px;
text-decoration : none;
text-shadow : 0 1px 0 #810e05;
position : absolute;
margin : 3px 0 0 10px;
background-color : #098047;
}
a.comment-delete {
float : right;
position : absolute;
top : 4px;
right : 0;
font-size : 16px;
color : #999;
}
a.comment-delete:hover {
color : red;
}
#comment-editor {
width : 103% !important ;
background : url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') 50% 30% no-repeat transparent;
margin-left : -8px;
}
.comment-form {
max-width : 100% !important ;
margin-top : 25px !important ;
}
.comment_emo_list .item {
float : left;
width : 40px;
text-align : center;
height : 40px;
margin : 10px 10px 0 0;
}
.comment_emo_list span {
display : block;
font-weight : bold;
font-size : 11px;
letter-spacing : 1px;
}
.comment_youtube {
max-width : 100% !important ;
width : 400px;
height : 225px;
display : block;
margin : auto;
}
.comment_img {
max-width : 100% !important ;
}
.comment-form p {
background : #666;
padding : 10px;
margin : 5px 0 5px 0;
color : #eee;
font : 14px "Open Sans", "Trebuchet MS", Helvetica, sans-serif;
line-height : 20px;
width : 97%;
border-radius : 3px;
position : relative;
}
.comment_child .comment-form p {
width : 95.5%;
}
.comment-form p:after {
content : "";
width : 0;
height : 0;
position : absolute;
bottom : -15px;
left : 15px;
border : transparent solid 8px;
border-color : #666 transparent transparent;
}
iframe {
border : none;
overflow : hidden;
}
.deleted-comment {
display : block;
color : #333;
font : 13px Arial;
overflow-wrap : break-word;
margin-top : 10px;
}
/* End comment-phancap */

Bước 2: Thay toàn bộ hệ thống comment mặc định của nó ( fix hết các lỗi không đạt chuẩn HTML5 ).
A :Các bạn tìm đoạn

<b:includable id='comment-form' var='post'>...</b:includable>

và thay nó thành

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='display: none'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

B: Tiếp tục tìm đoạn

<b:includable id='commentDeleteIcon' var='comment'>...</b:includable>

và thay nó thành

<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='//www.blogger.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>

C: Tìm đoạn

<b:includable id='comment_count_picker' var='post'>...</b:includable>

và thay thành

<b:includable id='comment_count_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
</span>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>
</span>
<b:else/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:if>
</b:includable>

D: Tìm đoạn

<b:includable id='comment_picker' var='post'>...</b:includable>

và thay nó thành

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

E: Tìm đoạn

<b:includable id='comments' var='post'>...</b:includable>

và thay nó thành

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>

<b:if cond='data:post.numComments != 0'>
<h3>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h3>
</b:if>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<div class='clear'/>
<div id='comment_block'>
<b:loop values='data:post.comments' var='comment'>
<div class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<div class='comment_area'>
<div class='comment_header'>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<b:if cond='data:comment.author == data:post.author'>
<span class='comment_author_flag'>Admin</span>
</b:if>
</div>
<div class='comment_service'>
<a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>
<a class='comment-delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>✖</a>
</div>
<div class='clear'/>
</div>
<div class='comment_body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Trả lời'>Trả lời</a> <div class='clear'/>
</b:if>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
</div>
<div class='comment_child'/>
<div class='comment_reply_form' expr:id='"r_f_"+data:comment.anchorName'/>
</div>
</b:loop>
</div>
<div class='clear'/>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='comment_form' id='comment-form'>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
</div>

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>

<script async='async' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' type='text/javascript'/>
<script type='text/javascript'>

<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
//Global setting
Config.maxThreadDepth = 6;//How threaded level that you want
Display_Emo = true;//Display emoticon or not? set "false" to no display
Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
Replace_Image_Link = true;//Auto replace an image link choose "false" to disable.
Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true

//Config emoticons declare
Emo_List = [
':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBeCPgGsGnPnGVtqylJvn7f4Xad2LuDGiPY9bRVVaVd26WxOW12CmD2P5VktKVgEwGQVTmIYR_cl3VXpa2mGVKgVFI_WKfMhd3sKJkLSL0OpGOrRh6ju8MR0sV0TLSOSjTzUnT9nDTU0/s1600/smile1.gif',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_56DqP_63Ov75YNeew_Y4xzKPsg_KLweKQljmRR1NwUZiCe6-CiWUJcNw97AlS_5NKrVIOqhiduf6sudUyw0_nrPcQadWD1CpID8w2WaA7Lq_-0EZDCaKSIVXjCdaOBdkypRfM9tgW2I/s1600/sad.gif',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmSOYQf45HwdvqJM3OVQFQ7uX8FMsFLmLO26bhhqeaV3OTGcAHk7ZnicDp0J-W8HHvhHIM6atn2UMNEz5Fk4cuAsmfgLRcA35ndh649nppgmujKYtZS2Z0XNzCXg8b1hsLzSrZ9uu1Po/s1600/sadanimated.gif',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6vk86vPBIadO-keJP7NCM4ZZA-CAdDv52bVgfxfs8c5xJKoteKMGNah81mi67AejPyj_TfONZSmEwkE96luS2atxWufM-OMuq3MsYfq_3eEf-ei3lqYCx_ouYDPHAxPWOb-x86JZ_kdM/s1600/smile.gif',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJWClSZ-qgCqmNAaguwkUxaolIx7Up0Q4KFOEfEmVmeJm7mX0Q30MxJv0zRzl3ny8m7GG4r9z3j_kMxOejvBvQXYi0J885mBpeD75G16SHUnFScVotntdfPkleFtU2Qv9YZVrWS_1IG8/s1600/icon_smile.gif',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23jAfoRh7zLB_lxhxQzuxbQ7YoFIgPaoq_ffgKb3TiiUq4rz8tLQDrx6Y4EWr2P-TFR7fDS3NS8BBDHqZ_KKKr-s5kOghqwTF3fQ8fy5kE8TSHP47EOSfAHJuYY1PFPTvjuNcyxoesyA/s1600/hihi.gif',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1_oJVIhMHgmTa8pYOQFP3zK_aT2R2TiaiTmc0YSN8Ed0KS4wTlGhdeeE3H-dqsk14tTZK6FvXE0q3Ttc03BFTdDk19F4RJA0_kOjuKEdzUjFomsq_N1WyPq1_AKkQoiQl56oflVO12E/s1600/applause.gif',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVJIkVdyuRNhM1-3T5QEkGpChR2hbsgVtV6ih6FBmnQIxLlL1xxf13QvEopN0yWCE0K0fePJ5iDpZu-fSvG0QJOuNgp1zYllo1V5NAhs_FXrPurjb5eTJO2-xxrd50RpLwISPN6ol2XRk/s1600/rolleyes.gif',
';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0A7lwUrFVJCAz4I5l0aNCyq-RGRQciE545Y7V0d6xwlUIXKw99RWeEWBeHhi-o4me4OVxBUAgUyHSTe1Avk2KjwPY8Xh3wwwzUj6CJFUXzgyukyf0AEDnT4tQpRETk_W7cJF_d7ik9Xw/s1600/wink.gif',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxyo0wjR4LtgbQGitcrgmdvCqwMsbyEiCPkNb9Dtc1gjgmopt5qulrRoJ1XND5q8Q0Fvefxf_Tft6aIZ48b4mBjE9rJSAZ3svXgv1243RQI2WmZ7FaAtt3GiY-5km0UfbLwFVwIH3NKMI/s1600/thumb.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxC_K88bg3C_Hx22dxVL9Mo5VwwiTvEDKqdyI9O_8HT-Xvb1yccZm_79GINyecbLW8F5-vvb1wABcT4jZveHvAZVGwlBz_VfXx2BodZXG9rKN3y2aMyKpVAqoZm_x9pgBC3pqVZAOruM/s1600/thumbsup.gif',
':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAT_lbV9Vfj9BRWMz2L1e_GE8xCyi4E059DaFbvVaRhkUSEmR0Z5vcnFg4qf8vqQPhRO0s8lh4fxmkyPA_kV01xsrTgXgheEcwaBCbhGzCk_UA74EaJHniDoDjPDJ9UcDWYng7W7u3eNw/s1600/wee.gif',
];

//Config Force tag list, define all in lower case
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
'<pre class="brush: plain; title: ; notranslate" title="">','<code>',
'</pre>','</code>'
];

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
//]]>
</script>
</b:includable>

F :Tìm đoạn

<b:includable id='threaded-comment-form' var='post'>...</b:includable>

và thay nó thành

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='display: none'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

G: Tìm đoạn

<b:includable id='threaded_comment_js' var='post'>...</b:includable>

và thay nó thành

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>

</b:includable>

H: Tìm đoạn

<b:includable id='threaded_comments' var='post'>...</b:includable>

và thay nó thành

<b:includable id='threaded_comments' var='post'>
<b:include name='threaded_comment_css'/>
<div class='comments' id='comments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Bước 3: Tìm đến đoạn code <b:include data='post' name='post'/> và đảm nó phải giống như thế này

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Bước 4: lưu lại để thưởng thức kết quả .

Note:

Trước khi các bạn thực hiên thủ thuật thay thế khung comment cho blog của các bạn ,Các bạn nhớ sao lưu mẫu template của mình về máy tính rồi thay hệ thống comment mới để những lỗi khi các bạn thực hiện hay thao tác không đúng như trên .
Chúc các bạn thành công và có khung comment thật đẹp , chuẩn , ưng ý với blog của các bạn.