Mày mò gần nữa ngày trời thay toàn bộ hệ thống comment mặc định của blogger để fix lỗi CSS3 và HTM5 và cuối cùng củng thành công với khung comment phân cấp đẹp cho blogger đặc biệt chuẩn CSS3 và HTML5.
Nào các bạn cùng thưởng thức và tiến hành nào.
Các bài nên xem:
Bài viết liên quan chuẩn HTML5
Template SEO chuẩn HTML5
CSS Popular Post Widget đa sắc màu đẹp
Nào các bạn cùng thưởng thức và tiến hành nào.
Các bài nên xem:
Bài viết liên quan chuẩn HTML5
Template SEO chuẩn HTML5
CSS Popular Post Widget đa sắc màu đẹp
Khung comment phân cấp blogger đẹp chuẩn CSS3 và chuẩn HTML5
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/AVvXsEihGgsHfjzDNhN87SFW6YZIRH6_m6BBCzOpMmWZqnjfNG2z9zpVZO9UP368twOXHIXquP0d3M8bmTYS_cKLcDH7FQnW9NcV123hK7I13Ays-MaCDOMt87FYWscfKfnZ5fWm1MHFpgOaXkw/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;
}
Bước 2: Là bước quan trọng ở đây mình 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
2.1 :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='commentDeleteIcon' var='comment'>...</b:includable>
và thay nó thành
và thay thành
<b:includable id='comments' var='post'>...</b:includable>
và thay nó thành
và thay nó thành
2.8 Tìm đoạn
<b:includable id='threaded_comments' var='post'>...</b:includable>
và thay nó thành
cụ thể mình đả cập nhật đoạn code này
2.1 :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'>2.2: Tiếp tục tìm đoạn
<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:includable id='commentDeleteIcon' var='comment'>...</b:includable>
và thay nó thành
<b:includable id='commentDeleteIcon' var='comment'>2.3 Tìm đoạn <b:includable id='comment_count_picker' var='post'>...</b:includable>
<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>
và thay thành
<b:includable id='comment_count_picker' var='post'>2.4 Tìm đoạn <b:includable id='comment_picker' var='post'>...</b:includable>
<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>
và thay nó thành<b:includable id='comment_picker' var='post'>2.5 Tìm đoạn
<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>
<b:includable id='comments' var='post'>...</b:includable>
và thay nó thành
<b:includable id='comments' var='post'>2.6 Tìm đoạn <b:includable id='threaded-comment-form' var='post'>...</b:includable>
<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/AVvXsEg3rc564kQ_90j6yAd27gpw8KFrtyzLMNO23Gs6nQsQZNy0AXVx768ouD3XAos3vvEpYQTLBKhbY74qUmKPbwdGhOVbtf6Yix55VomOGJsgrNzw2xNI36xs_7NcyaXWcVgbz916BQ03g9Q/s1600/smile1.gif',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnxtNB-O5vSQLBQpuzPmbZ5bdSJ9xMOPW4lKdq3anZ-GQTTqbIMTiIdtaVvJYk-SRGnpA0VFfjzawsqTaB4Q8r47yMEqHmZ7nadJUzY23tLZbTbUVadpfFdDGHp6atLklkH6atGXHPx_A/s1600/sad.gif',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCqhlMKXFWVHHSdDVo_1cyXMUOrs8sBp7duIOLgejd-FH05JoNN17KQR8ardFTHdd2HpeWCL-wvP6NNKvL-hKhwDVugGZuxhxXzq-22hP_kDuIwgQnAWGSyUpvvvap-efXIWzbWR9FiA/s1600/sadanimated.gif',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FhzBs4rVas1J5N9ZUjkO1kAcHXk8hyphenhyphenmgBqU9WnRKMSGb01yr0UBNQyTZXo8ctErWcEP3csmibh5NXW4__6OKfuMCoIBqJA5GAYLWPT_j4o4sTAU3Yk_2sQxEkzA9cPoZ3IwMwnnOQHU/s1600/smile.gif',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkXy0cdmy1sDxxVt6opIlmpN_ek8_Yz6JeN_j-Mk_8jed943xHsKlBX4c-2l_mHXwKaS7jbh9nPIld-2kLuaHDs32enatlzoEKiNnvcAX4CHBkqBHxKAGCdgldKfPjW1sCcYAs2iPjWD0/s1600/icon_smile.gif',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhthLVVzI7ikf3XKVNXsvACDoApIWk1Lrx4Rman3ClLUM0HspAorhwGpc2qg38oZ08lxEPP_2-Bq85UnJZETTGAHySJDldR6VTTL4CBdRZEg9VlKn51BL37941v_FlbXp5xHzPj4390AnM/s1600/hihi.gif',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmD7-2mmgc9RMR7MzzXLVAZKMtKyvuiOO5nNr_uf6dlcrh2TnsWs_YekEpodsWxnGbyD1ue03UwCLoKmuMOgGfVcIgOdBO8dE89rsGP1F_Auo8t2rgJ_MgLNwnWQtGoWvE05_ERw7siI/s1600/applause.gif',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3KK19SVp6KYD1AG3Ahc2jFpOwMD3egusOWBlGZpW81l8UN28n2daT1aR_kVCv90OjgudK37tJ1ISk7_pJt0q4HIJuZQjp47yYaz0jQLABZawc0-78uB6JlJNdIdK-2o5mV2Cu81ViRY0/s1600/rolleyes.gif',
';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8n_n-Gv6u8Ovz-9FI8PTdgmnfNPDSan77Tuus2Yyif0kytLVpPJfCsPdnYTpwb_Bwvc0wlkjcdUEeBgVT-uNWM91QY-3xwByawXDDqVNzLIwXNlbm63iJxF6j6uExuMBbdb_H0M3qf9I/s1600/wink.gif',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP5fVS8oMB-KXvvptn36WTLvQZcAha0l5jxOQfoUNoJaeu-H-46ysUw3iVXYUakyrtJvRfqI1yFp3wC4NCoU7anZjLyNSaD9Hs2pmJwN4ktwTO22TYFNEQrTNl0-QoInWUDmGeSdJfABI/s1600/thumb.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK25dMaNue7K5s2_Njz_n5qaFtRRaAg4QWXW-PtsV4akZbaU29eGqU9ShGt1iEGKdXEythlkw5tuLUOsPY2D_3Go4NKuQTMv7lUNAgbqNnJ5Pu-wzJhi6UDhrlaoeiixJI2PM7nA_fmpw/s1600/thumbsup.gif',
':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4KO2tpz-Ajy-2bzn-g_IfzOAs31MG3T4XcjNTLySIKnzfQKsj_rHIHTImj0z7ZjMkNiTG7G2D8sIEcrRId40d6Z1ysl3xqlMCP_nLePoAKWySbuGMqwrFCcieuMXudwBqS5DEY9w_4g/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>
và thay nó thành
<b:includable id='threaded-comment-form' var='post'>2.7 Tìm đoạn
<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>
<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>
<b:includable id='threaded_comments' var='post'>...</b:includable>
và thay nó thành
<b:includable id='threaded_comments' var='post'>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 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:include data='post' name='post'/>Bước 4: Một công việc không thể quên là nhớ lưu lại để thưởng thức kết quả . Nhấn F5 xem hệ thống khung comment phân cấp blogger đẹp mà vẫn đạt chuẩn HTML5 và CSS3
<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>
Lưu ý: Các bạn nhớ tải mẫu template của mình về máy tính rồi thay hệ thống comment mới để tránh rủi ro nhá .Cập nhật : Fix lỗi không hiển thị comment ở các trang tỉnh <vd: domain.com/p/test-page.html> cụ thể nó xuất hiện như thế này
<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'/>
thành
<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>
Chúc các bạn thành công.
7 nhận xét trong bài "Khung comment phân cấp blogger đẹp chuẩn CSS3 và HTML5"
test thử xem
test
test
Anh ơi cho em hỏi phần Emoticons muốn chèn 2 emoticon trở lên trong cùng một hình thì làm thế nào vậy anh ?
Trong khung nhận xét chứ em ?
Wow khá nhiều code nhỉ
=> Thủ Thuật Blogspot <=
Công an tỉnh Hải Dương cũng đang vào cuộc điều tra để làm rõ trách nhiệm của chủ tàu Thành Luân trong vụ tai nạn đường thủy nghiêm trọng này in tem vỡ tại hà nội
ay, FC Yakohama và United Incheon, 2 CLB chủ quản của Tuấn Anh và Xuâ
nam ngoc cau
ba kíchm lặng, cắp cặp hoặc ghi chép cho ra vẻ toan tính của một bậc thầy. Trong khi đó thì MU lại cần một tướng quân, người phải thổi lửa vào cầu thủ bằng cách xông lên đầu chiến tuyến, khích lệ toàn đội, n
Cám ơn các bạn ghé thăm Blog Tuấn Phan !
Nhận xét để đóng góp ý kiến bài viết.
Vui lòng viết nhận xét có dấu.
Không dùng từ ngữ thô tục, chửi bậy.
Nhận xét chứa link spame sẻ bị xóa.
Tạm thời khóa comment ẩn danh do nhiều bạn lợi dụng spame.