Chia Sẽ Mẫu Khung Bình Luận Cực Ngầu.

- Ôi giời. Trên thế giới Blogger hiện tại người Việt mình làm nhiều mẫu temp đẹp và mới quá. Thôi thì kg theo kịp phong trào thì vẫn ở cái temp cũ rích này vậy. 😊
- Dạo này bận quá kg rảnh viết bài nên hôm nay share đại cho mọi người cái khung bình luận nhỏ nhưng nhẹ nhé.
Các bước thực hiện cũng khá đơn giãn.
B1: Login Blogger => Chủ Đề => Chỉnh sửa HTML

B2: Tìm và thay thế đoạn code sau:
Tìm:

<b: include data = 'post' name = 'threaded_comments' />

Thay thế thành:

<b:include data='post' name='comments'/>

B3: Chèn đoạn CSS này vào trước thẻ ]]></b:skin>

/* Khung Bình Luận */
.comment_admin .comment_author_flag {display:inline;background:#fff;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em} #comments{font:13px Roboto;background:#fff;border:1px solid #ccc;margin:10px 15px 0px;width:100%;} #comments h5 {font-size:145%;font-weight:normal;left:0;background:#f5f5f5;color:#262626;padding:28px 20px 28px 25px;margin-bottom:15px;margin-top:0px;} .comment_inner{background:#fff;margin:5px 0;padding:5px;overflow:hidden;border-bottom:1px solid #ddd;} div.comment_inner.comment_admin {background:#fff;} .comment_header{float:left;width:67px} .cm_head{position:relative;background:#fff;margin:-10px -10px 0;padding:5px 10px 0px;} .comment_avatar{border-radius:100px;margin:0;padding:5px 5px 0;} .comment_avatar img{border-radius:100px;width:55px;height:55px;padding:0;text-align:center;margin:0;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSeCIE0eDnaWvqtxHDcg0ciFiER32BB3NbUSSi2SEx6rjMB9W3uInIJ8323dwq4NHpZuNkNTnhsfJPrlOyu2B1XWvzW683Fvjhahmyf7pw6-aMVqAtEFQ0pDYmZELtquzx9Lvk5Q0TUUUt/s1600/anonymous.jpg) no-repeat} div.comment_avatar img[src=&quot;http://img1.blogblog.com/img/openid16-rounded.gif&quot;]{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSeCIE0eDnaWvqtxHDcg0ciFiER32BB3NbUSSi2SEx6rjMB9W3uInIJ8323dwq4NHpZuNkNTnhsfJPrlOyu2B1XWvzW683Fvjhahmyf7pw6-aMVqAtEFQ0pDYmZELtquzx9Lvk5Q0TUUUt/s1600/anonymous.jpg)} .comment_name,.comment_name a{padding:0;margin:0 0 0px 0;font-weight:bold;color:#000;} .comment_service{margin-top:0} .comment_date{margin:0;color:#888;font-size:13px;} .respond{float:right;margin:0;padding:0} .comment_date:hover{color:#bbb;text-decoration:underline} .comment_body{background:#fff;margin-left:72px;padding:10px;} .comment_body p{line-height:1.4;margin:0px 0 5px;color:#000;word-wrap:break-word;padding:0;} .comment_child .comment_wrap{padding-left:78px} .comment-delete{position:absolute;float:right;top:10px;right:10px;margin:0;padding:0} .infonm{float:left} .comment_reply{width:50px;display:block;font-weight:300;margin:0px 0 0;padding:3px 0;color:#222!important;text-align:center;text-decoration:none!important;background:#fff;border:1px solid #ddd;} .comment_reply:hover{text-decoration: underline;background:#fff} .comment_hapus{font-weight:300;margin:0;padding:0;color:#fff!important;text-decoration:none;} .comment_hapus:hover{text-decoration:none;color:#000!important} .unneeded-paging-control{display:none} .comment-form{max-width:100%!important} #comment-editor{width:100%!important;background:#fff url(&#39;data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7&#39;) no-repeat 50% 40%;margin-bottom:0;margin-top:5px} .comment_form a{text-decoration:none;font-weight:bold;font-size:14px} .comment-form p{background:#F5F5F5 none repeat scroll 0% 0%;padding:10px;margin:0px 0 0px 0;color:#000;font-size:13px;border-top:1px solid #ddd;position:relative} .comment_reply_form{padding:0 0 0 70px} .comment_reply_form .comment-form{width:100%} iframe{border:none;overflow:hidden} .deleted-comment{background:#e74c3c;color:#fff;padding:20px;margin:5px 0;display:block} iframe{border:none;overflow:hidden}

B4: Tìm và thay thế đoạn code sau:
Tìm:

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

Thay thế:

<b:includable id='comments' var='post'> <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> <div class='comments' id='comments' itemscope='itemscope' itemtype='http://schema.org/Comment'> <meta expr:content='data:post.title' itemprop='about'/> <meta expr:content='data:post.canonicalUrl' itemprop='discussionUrl'/> <b:if cond='data:post.allowComments'> <h5> <b:if cond='data:post.numComments == 0'> <span itemprop='interactionCount'>0</span> Komentar</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span> Komentar</b:if> <b:if cond='data:post.numComments &gt; 1'> <span itemprop='interactionCount'><data:post.numComments/></span> Komentar </b:if> </h5> <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> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> &#160; <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 data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/UserComments'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'> <data:comment.body/> - <a class='comment_hapus' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'> Hapus </a> </span> <b:else/> <b:if cond='data:post.adminClass == data:comment.adminClass'> &lt;div class=&#39;comment_inner comment_admin&#39;&gt; <b:else/> &lt;div class=&#39;comment_inner&#39;&gt; </b:if> <div class='comment_header'> <div class='comment_avatar'> <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/> </div> </div> <div class='comment_body'> <div class='cm_head'> <div class='cm_infonm'> <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'> <span itemprop='creator'><data:comment.author/></span> </a> <b:else/> <span itemprop='creator'><data:comment.author/></span> </b:if> <b:if cond='data:comment.author == data:post.author'/> <a expr:href='data:comment.url' rel='nofollow' title='Permalink'> <span class='comment_date' itemprop='commentTime'> <data:comment.timestamp/> </span> </a> </div> </div> <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'> <img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQUHYO7cRO5Je52PD3EnAKXHhyx97SjGMfwwkM4PtJc9g8g1O1BJ6JMfmCMyhSDA8lEr4R9u2egLhOIWC_2tkjfGp2SMzs-Pr-ZLvHZRFgdBcgtqBVcB_ZrNJdjmyAJbQAb4HVbpJFrM/s1600/delete4.png' title='Hapus Komentar'/> </a> </div> <p itemprop='commentText'><data:comment.body/></p> <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' itemprop='replyToUrl' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a> </div> <div class='clear'/> &lt;/div&gt; <div class='clear'/> <div class='comment_child'/> <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/> </b:if> </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> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> &#160; <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'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <div class='comment_emo_list'/> <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' expr:title='data:postCommentMsg' title='Comments'> <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' expr:src='data:post.commentSrc' 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 = { &#39; maxThreadDepth&#39; :&#39; 0&#39; }; </b:if> //<![CDATA[ Config.maxThreadDepth = 2; var Cur_Cform_Hdr='.comment_form';var Cur_Cform_Url=$('#comment-editor').attr('src');function trim(a){var b=' \n\r\t\f\x5b\x5d\x7c\x7d\x3c\x3e\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';for(var i=0;i<a.length;i++){if(b.indexOf(a.charAt(i))!=-1){a=a.substring(0,i);break}}return a}$('.comment_wrap .comment_body p').html(function(i,h){temp=h.toLowerCase();index=temp.indexOf('@<a href="#c');if(index!=-1){index_tail=temp.indexOf('</a>',index);if(index_tail!=-1){h=h.substring(0,index)+h.substring(index_tail+4)}}return h});function Valid_Par_Id(a){r=a.indexOf('c');if(r!=-1)a=a.substring(r+1);return a}function Cform_Ins_ParID(a){a='&parentID='+a+'#%7B';n_cform_url=Cur_Cform_Url.replace(/#%7B/,a);return n_cform_url}function Reset_Comment_Form(){html=$(Cur_Cform_Hdr).html();$(Cur_Cform_Hdr).html('');Cur_Cform_Hdr='.comment_form';$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cur_Cform_Url)}function Display_Reply_Form(e){par_id=$(e).attr('id');par_id=Valid_Par_Id(par_id);html=$(Cur_Cform_Hdr).html();if(Cur_Cform_Hdr=='.comment_form'){reset_html='<a href="#origin_cform" onclick="Reset_Comment_Form()">'+Msgs.addComment+'</a><a name="origin_cform"/>';$(Cur_Cform_Hdr).html(reset_html)}else{$(Cur_Cform_Hdr).html('')}Cur_Cform_Hdr='#r_f_c'+par_id;$(Cur_Cform_Hdr).html(html);$('#comment-editor').attr('src',Cform_Ins_ParID(par_id))}cur_url=window.location.href;search_formid='#comment-form_';search_index=cur_url.indexOf(search_formid);if(search_index!=-1){ret_id=cur_url.substring(search_index+search_formid.length);Display_Reply_Form('#rc'+ret_id)}for(var i=0;i<Items.length;i++){if('parentId'in Items[i]){var par_id=Items[i].parentId;var par_level=parseInt($('#c'+par_id+':first').attr('data-level'));$('#c'+par_id+' .comment_child:first').html(function(a,b){var c=Items[i].id;if(par_level>=Config.maxThreadDepth){$('#c'+c+':first .comment_reply').remove()}var d=$('#c'+c+':first').html();d='<div class="comment_wrap" id="c'+c+'" data-level="'+(par_level+1)+'">'+d+'</div>';$('#c'+c).remove();return(b+d)})}}var avatar=$("#comments");avatar.find('.comment_avatar img').each(function(){var a=$(this).attr('src');$(this).show().attr('src',a.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/"))}); //]]> </script> </b:includable>

- Vậy là xong rồi. Nếu có khó khăn gì thì đừng ngại cmt phía dưới bài viết nhé. Mọi người sẽ giúp đỡ bạn. <3