Hướng dẫn tạo Tab comment Facebook, Google +1 , Dispus cho Blogspot

Hướng dẫn tạo Tab comment Facebook, Google +1 , Dispus cho Blogspot

Chắc hẳn các bạn xẽ hỏi Vì sao mình lại chọn nhiều kiểu comment vậy? nó có tác dụng gì? ...

Đầu tiên phải nói đến tác dụng của Comment ( Nhận xét ) 

Comment là 1 phần rất quan trọng để google đánh giá bài viết của chúng ta có chất lượng hay không? 

1 Bài viết có nhiều nhận xét tất nhiên xẽ được google đánh giá rất cao.
Và còn rất nhiều lợi ích khác nữa...

Còn vì sao mình lại chọn nhiều kiểu comment vậy :

+  Thứ nhất phải nói đến Comment Google +1 : Nó rất hữu ích và mình đảm bảo nó xẽ giúp bạn nhiều trong việc seo. Vì mỗi khi có người comment bằng Google +1 Thì nó xẽ tự chia sẻ lên trang Google +1 của người đó và theo mình thì Google +1 là đứa con của Google lên tất nhiên nó xẽ được đánh giá cao hơn ( Chỉ là mình nghĩ vậy thôi ^^ )

+  Với Dispus thì nó hỗ trợ nhiều tài khoản để comment. Tương thích với người dùng cao!

Còn facebook và Blogger Thì quá quen thuộc rồi. Mình không cần giải thích thêm nhé!

Với tiện ích  Tab comment Facebook, Google +1 , Dispus cho Blogger xẽ đáp ứng đủ nhu cầu của người dùng vì họ có thể nhận xét bằng nhiều cách chứ không phải theo cách cổ điển chỉ sử dụng riêng nhận xét của Blogger khiên người dùng rất bất tiện!

Các bạn làm theo các bước sau nhé :

1- Đăng nhập (Login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Chọn Mở rộng tiện ích mẫu.
4- Nhấn tổ hợp Phím Ctrl + F để tìm từ khóa sau :
<b:includable id='comments' var='post'>
Trong đoạn phần  <b:includable id='comments' var='post'>
Xẽ có
<div class='comments' id='comments'>
..............
<div>

Các bạn thay thế toàn bộ code trong
<div class='comments' id='comments'>

Thành code sau :

<script src='http://code.jquery.com/jquery-1.9.1.js'/>    <script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'/>    <script>      $(function() {        $( &quot;#tabs&quot; ).tabs();          });    </script>                                        <fieldset>                                          <legend>                                            Hãy viết cảm nhận của bạn về bài viết này nhé                                          </legend>                                          <style>                                            fieldset {                                          color: #3d3d3d;                                          background: #fff;                                          -moz-border-radius: 10px 10px 10px 10px;                                          -webkit-border-radius: 2px;                                          width: 100%;                                          padding: 8px;                                          cursor: pointer;                                          margin: 0 auto;                                            }                                            .fieldset:active{                                              cursor:pointer;                                              position:relative;                                              top:2px;                                            }                                          }                                            .legend:active{                                              cursor:pointer;                                              position:relative;                                              top:2px;                                            }                                            legend {                                         background: #fff;                                            padding: 8px 29px;                                            cursor: pointer;                                            margin: 0 auto;                                            border: 2px solid #0071F7;                                            border-radius: 3px;                                            }                                            .legend:active{                                              cursor:pointer;                                              position:relative;                                              top:2px;                                            }                                            /* jQuery Tab comment */                                            .ui-tabs {                                              position: relative;/* position: relative &quot;fixed&quot;) */                                              padding: 0em;                                            }                                            .ui-tabs .ui-tabs-nav {                                              margin: 0;                                              padding: 0em 0em 0;                                            }                                            .ui-tabs .ui-tabs-nav li {                                              list-style: none;                                              float: left;                                              position: relative;                                              top: 0;                                              margin: 1px .2em 0 0;                                              padding: 0;                                              white-space: nowrap;                                            }                                            .ui-tabs .ui-tabs-nav li a {                                              float: left;                                              padding: .5em 1em;                                            }                                            .ui-tabs .ui-tabs-nav li.ui-tabs-active {                                              margin-bottom: -1px;                                              padding-bottom: 1px;                                            }                                            .ui-tabs .ui-tabs-nav li.ui-tabs-active a,                                            .ui-tabs .ui-tabs-nav li.ui-state-disabled a,                                            .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {                                              background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSkIwYF6UeImJbzmCSA_9HhZDCTjKTbwRqwg7xiJlMh4snJ93wc1b08p2vtHkpUxC_fofhxifNvZiq_KM40hWnJk5G3s8GDWf6uh2V8TXC8ERZKFGQUt6pVi8ahAGSDkEnDFfVzhmvco/s1600/bg-tab.png&quot;) repeat-x scroll left top rgb(85, 149, 37);                                              color: rgb(255, 255, 255);                                              font-weight: bold;                                              border-width: 1px ;                                              border-style: solid solid none;                                              border-color: -moz-use-text-color;                                              -moz-border-top-colors: none;                                              -moz-border-right-colors: none;                                              -moz-border-bottom-colors: none;                                              -moz-border-left-colors: none;                                              border-image: none;                                            }                                            .ui-tabs .ui-tabs-nav li a, /* first selector... */                                            .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {                                              cursor: pointer;                                              font-size: 13px;                                              color: #ffffff;                                              font-family: Helvetica;                                              font-size: 13px;                                            }                                            .ui-tooltip {                                              position: relative;                                              color:#fff;                                              padding:0.6em 1.3em;                                              line-height:1em;                                              text-decoration:none;                                              text-align:center;                                              white-space: nowrap;                                            }                                            .ui-tabs.small span {                                              font-size:12px;                                            }                                            .ui-tabs.medium span {                                              font-size:14px;                                            }                                            .ui-tabs.large span {                                              font-size:18px;                                            }                                            .ui-tabs.small span {                                              font-size:12px;                                            }                                            .ui-tabs.medium span {                                              font-size:14px;                                            }                                            .ui-tabs.large span {                                              font-size:18px;                                            }                                            .ui-tabs.black {                                              background-color: #333333;                                            }                                            .ui-tabs.gray {                                              background-color: #666666;                                            }                                            .ui-tabs.white span{                                              color: #666666;                                            }                                            .ui-tabs.red {                                              background-color: #e62727;                                            }                                            .ui-tabs.orange {                                              background-color: #ff5c00;                                            }                                            .ui-tabs.magenta {                                              background-color: #3b5998;                                            }                                            .ui-tabs.yellow {                                              background-color: #ffb515;                                            }                                            .ui-tabs.blue {                                              background-color: #00ADEE;                                            }                                            .ui-tabs.pink {                                              background-color: #e22092;                                            }                                            .ui-tabs.green {                                              background-color: #91bd09;                                            }                                            .ui-tabs.rosy {                                              background-color: #F16C7C;                                            }                                            .ui-tabs.brown {                                              background-color: #804000;                                            }                                            .ui-tabs.purple {                                              background-color: #FE2E2E;                                            }                                            .ui-tabs.cyan {                                              background-color: #46C7C7;                                            }                                            .ui-tabs.gold {                                              background-color: #D4A017;                                            }                                          </style>                                          <div id='tabs'>                                            <ul>                                              <li>                                                <a class='ui-tabs small magenta' href='#tabs-1'>                                                  Blogger                                                </a>                                              </li>                                              <li>                                                <a class='ui-tabs small blue' href='#tabs-2' id='disqus-comments' onclick='load_disqus()'>                                                  Disqus                                                </a>                                              </li>                                              <li>                                                <a class='ui-tabs small orange' href='#tabs-3'>                                                 Google+                                                </a>                                              </li>                                              <li>                                                <a class='ui-tabs small purple' href='#tabs-4'>                                                  Facebook                                                </a>                                              </li>                                            </ul>  <div id='tabs-1'> <div class='comments' id='comments'>        <b:if cond='data:post.allowComments'>          <br/> <br/> <h5> <b:if cond='data:post.numComments == 0'> <span itemprop='interactionCount'>0 </span>    nhận xét &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span>  nhận xét &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <span itemprop='interactionCount'><data:post.numComments/></span> nhận xét &quot;<data:blog.pageName/>&quot; </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'>          <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> <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Trả lời'>Trả lời</a>            </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'>                   <data:comment.author/>                  </a>                  <b:else/>                 <data:comment.author/>                </b:if>                <b:if cond='data:comment.author == data:post.author'/>              </div>              <div class='comment_service'>                <a expr:href='data:comment.url' rel='nofollow' title='Permalink'>                   <span class='comment_date'>                      <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/AVvXsEj7dGURkoZu1qQfj8YZE4MLLxXCppibvXI1pJ1zU-xHhX0DZ4Sf4Yr1Z5F8KlUVgG6bWPL3lQaho5fjWKOVhxvmHPKQ9ywyKIslL8GAJ294WpL-J2zMvn12iSylxMyijvcyyPk4jEoo1Ic/s1600/delete4.png' title='Hapus Komentar'/></a>   </div>              <p><data:comment.body/></p>            </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'>            <data:postCommentMsg/>          </a>        </b:if>      </b:if>    </div>  </b:if></div>                                            </div> <div id='tabs-2'>                                              <br/>                                              <div id='disqus_thread'/>                                              <div id='disqus_loader' style='text-align: center'>                                                <script>                                                  function load_disqus()     {       var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;       dsq.src = &quot;http://blogchiaskinthccnttththutit.disqus.com/embed.js&quot;;       (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);       var ldr = document.getElementById(&#39;disqus_loader&#39;);       ldr.parentNode.removeChild(ldr);     }   </script>                                              </div>                                            </div>   <div id='tabs-3'>                                              <script src='https://apis.google.com/js/plusone.js'/>                                              <div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='700' expr:data-href='data:post.url'>                                              </div>                                            </div>                                            <div id='tabs-4'>                                              <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>                                              <fb:comments expr:href='data:post.url' num_posts='10' style='' width='700'/>                                            </div>                                                                                                                                                                    </div>                                        </fieldset>
  <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)?\//,"/s55-c/"))});//]]></script>

Các bạn thay Phần blogchiaskinthccnttththutit thành ID trên Dispus của bạn là được nhé.

Mở rộng thêm 1 Chút : Bạn nào muốn Comment Blogger Giống như mình thì thêm đoạn CSS sau vào nhé ! 

/* Comments iChiaSe.Biz*/#comments h4 {color:#69c;font-size:24px;line-height:1.3em;text-shadow:1px 2px 3px #999;margin:0;padding:0}#comments{margin:0;padding:0}#comments h5{color:#000;margin:0;padding:0 0 5px;font-size:100%}#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}#comments{margin:10px  0 0;padding:10px}.comments h3 {box-shadow: 1px 1px 5px rgba(1,1,1,.1);background: #f5f5f5;color: #666;font-size: 15px;font-weight: bold;padding: 8px;border: 1px solid #fff;}.comments .comment-block {background: #fff;border: 1px solid #ccc;margin-left: 77px;padding: 10px;}.comments .comments-content .datetime a {color: #666;}.comments .comments-content .icon.blog-author {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6SlGsyTJrZXLeRn2Xo_7vAdvKwLqtLvfS1M2RNoQ21CHRh1oYIdLCouCP6rip1d9HSitaSh6Q1u5cEgnocxNeibd4eo5V0r7hdjNTKu-fxPijmd9ymzF_NJP5am-sgAJZkpg5CA1e-s/s320/author.png);width: 16px;height: 16px;display: inline-block;margin: 0 0 -2px 6px;}.thread-count,loaded {display: none;}.comments .avatar-image-container {float: left;width: 67px;border: 1px solid #ccc;margin: 0;padding: 5px 5px 0;}.comments .comments-content .comment:first-child {padding-top: 0px;}.comments .comments-content .comment {margin-bottom: 0px;padding-bottom: 0px;list-style:none;}.comments .continue a {box-shadow: 2px 2px 5px rgba(1,1,1,.1);background: #f5f5f5;position: relative;text-align: center;margin: 0;color: #666;border: 1px solid #fff;padding: 4px 8px;display: none;}.comments .comment .comment-actions a:hover {background: #eaeaea;}.comments .comment .comment-actions a {position: relative;border: 1px solid rgba(187, 187, 187, 0.58);color: #666;padding: 3px 8px;margin-right: 5px;}.comments .comments-content .datetime {margin-left: 6px;font-style: italic;font-size: 11px;}.comment-content a{color:#f00;}.avatar-image-container img {max-width: 100%;}.comment_inner{margin:20px 0;padding:0;overflow:hidden}.comment_header{float:left;width:67px}.cm_head{position:relative;background:#fff;border-bottom:1px solid #ccc;margin:-10px -10px 0;padding:5px 10px 8px;}.comment_avatar{border:1px solid #ccc;margin:0;padding:5px 5px 0;}.comment_avatar img{width:55px;height:55px;padding:0;text-align:center;margin:0;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioK0VTReVKCgiU3eo8Whj7hJrKV5rbqAEwOnD7XP7N7RSmKWK2rhA4_C0c-Q6yZjdZatTegfp_zzux-rmi7tXNcCGT78xlUtx6jlKjUQAQpOLJq2ayjzOyGLDwShZwZZY9XxAE2DlmTLWj/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/AVvXsEioK0VTReVKCgiU3eo8Whj7hJrKV5rbqAEwOnD7XP7N7RSmKWK2rhA4_C0c-Q6yZjdZatTegfp_zzux-rmi7tXNcCGT78xlUtx6jlKjUQAQpOLJq2ayjzOyGLDwShZwZZY9XxAE2DlmTLWj/s1600/anonymous.jpg)}.comment_service{margin-top:0}.comment_date{margin:0;color:#d6d5d5;font-size:14px;text-transform:uppercase}.respond{float:right;margin:0;padding:0}.comment_date:hover{color:#bbb;text-decoration:underline}.comment_body{background:#fff;border:1px solid #ccc;margin-left:77px;padding:10px;}.comment_body p{line-height:1.4;margin:15px 0 5px;color:#666;font-size:14px;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{display:block;font-weight:700;margin:10px 0 0;padding:7px 0;color:#fff!important;text-align:center;text-decoration:none!important;background:#3498db;}.comment_reply:hover{text-decoration:none;background:#2980b9}.comment_hapus{font-weight:700;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:#fff;padding:10px;margin:5px 0 5px 0;color:#000;font-size:14px;line-height:20px;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}.comment-form p{border:1px solid #ccc;color:#000;margin-bottom:20px;padding:20px}#comments{background:#fff;margin:15px  0 0;padding:20px}#comments h5{color:#000;margin:0;padding:0 0 5px;font-size:100%}.comment_inner{margin:20px 0;padding:0;overflow:hidden}.comment_header{float:left;width:67px}.cm_head{position:relative;background:#fff;border-bottom:1px solid #ccc;margin:-10px -10px 0;padding:5px 10px 8px;}.comment_avatar{border:1px solid #ccc;margin:0;padding:5px 5px 0;}.comment_avatar img{width:55px;height:55px;padding:0;text-align:center;margin:0;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioK0VTReVKCgiU3eo8Whj7hJrKV5rbqAEwOnD7XP7N7RSmKWK2rhA4_C0c-Q6yZjdZatTegfp_zzux-rmi7tXNcCGT78xlUtx6jlKjUQAQpOLJq2ayjzOyGLDwShZwZZY9XxAE2DlmTLWj/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/AVvXsEioK0VTReVKCgiU3eo8Whj7hJrKV5rbqAEwOnD7XP7N7RSmKWK2rhA4_C0c-Q6yZjdZatTegfp_zzux-rmi7tXNcCGT78xlUtx6jlKjUQAQpOLJq2ayjzOyGLDwShZwZZY9XxAE2DlmTLWj/s1600/anonymous.jpg)}.comment_name,.comment_name a{padding:0;margin:0 0 5px 0;}.comment_service{margin-top:0}.comment_date{margin:0;color:#d6d5d5;font-size:14px;text-transform:uppercase}.respond{float:right;margin:0;padding:0}.comment_date:hover{color:#bbb;text-decoration:underline}.comment_body{background:#fff;border:1px solid #ccc;margin-left:77px;padding:10px;}.comment_body p{line-height:1.4;margin:15px 0 5px;color:#666;font-size:14px;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{display:block;font-weight:700;margin:10px 0 0;padding:7px 0;color:#fff!important;text-align:center;text-decoration:none!important;background:#3498db;}.comment_reply:hover{text-decoration:none;background:#2980b9}.comment_hapus{font-weight:700;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:#fff;padding:10px;margin:5px 0 5px 0;color:#000;font-size:14px;line-height:20px;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}.comment-form p{border:1px solid #ccc;color:#000;margin-bottom:20px;padding:20px} 

Chúc các bạn thành công. 

Chú ý : Tips này hơi khó với những bạn mới dùng Blogger. Và với 1 số Blogger có cấu trúc khác lên hơi khó giải thích . Mọi người có thắc mắc gì cứ comment mình xẽ giải đáp nhé!

Nguồn : iChiaSe.Biz 

>