Tạo Hệ Thống Bình Luận Cho Blogspot Với Phong Cách Material Kèm Twitter Emoticon

Mục Đích

• Với phong cách Material (Giao Diện Phẳng) rất đẹp tạo cuốn hút cho Blog
• Có nhiều Twitter Emoticon Đẹp để cho comment thêm xin đẹp.
• Phân biệt bình luận của tác giả với đọc giả (Bình luận của tác giả sẽ hiện bên phải còn của đọc giả sẽ ở bên trái.)
• Còn nhiều nữa....

Thực Hiện

1. Đăng Nhập Blogger >> Mẫu >> Chỉnh Sữa HTML
2. Sau đó dán đoạn code sau vào trước thẻ đóng </head> hoặc sau thẻ đóng ]]></b:skin> hoặc sau thẻ đóng </style> nào đó

CSS<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
/* Material Design Comments */
#comments{line-height:1.4em;margin:20px 0 0;position:relative;background:#fff;border:1px solid #ddd;padding:0 20px 20px 20px;}
#comments h3{float:left;font-size:15px;line-height:50px;text-transform:capitalize;font-weight:normal;font-family:'Roboto',Josefin Sans, Arial;color:#fff}#comments h3 i{padding-right:10px}#comments li{padding:0}
a.click-comment{float:right;font-weight:bold;text-transform:uppercase;position:absolute;top:20px;right:20px;display:inline-block;background:#22A65A;border:2px solid #22A65A;padding:8px 10px;font-size:13px;color:#fff}
a.click-comment:hover{background:#fff;color:#22A65A}
.comment-body-author{background:#0b433f;color:#008000;border:1px dotted #008000;margin:0;padding:0 0 0 10px;}
.comment_share{color:#999;cursor: pointer;font-size:10px;line-height:1.5em;max-width:100%;font-weight:normal;padding-left:5px;}
#comment_rep a:hover {text-decoration:none;color:#464646!important;}
.comment_avatar{height:50px;width:50px;margin-top:15px;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdyw2N9xJXPLrFzShpJEvdPl9DJ05oz7oHWadqLMkQ3A_qovQj978D6mgj6c318HmQq_Q_e4Rlc4i_LktfxGMCkPHEWG6iGQ_GOWtLxBNjGdkbcVQGHqsUi-UwKFcG9z7iUFB9Icp2Bk/w50-h50/noimage.png) no-repeat;float:left;margin-right:15px;overflow:hidden;padding:0;border-radius:99em}
.comment_admin .comment_name:after {content:"";width:0;height:0;position:absolute;top:5px;right:0;border-width:5px;border-style:solid;border-color:#fff transparent transparent transparent;display:block;}
.comment_name{color:#4a5764;font-size:11px;font-weight:normal;max-width:100%;text-decoration:none;margin:5px 0 0;text-transform:none; font-weight:normal;position:relative}.comment-menu {float: right;list-style:none;width:0;height:0} .comment_name a {font-size:11px;color:#666;text-decoration:none;font-family:'Roboto', Sans-Serif;font-weight:400}
.comment_name a:hover {text-decoration:underline}
.comment_body p{font-size:110%;line-height:1.4em;margin:0;padding:0 0 10px}
.comment_body{padding:20px 20px 10px;position:relative;resize:none;min-width:3rem;max-width:35rem;background:#fff;color:#444;font-size:13px;border:1px solid #ddd;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.07),0 1px 1px 0 rgba(0, 0, 0, 0.06);display:inline-block}
.comment_body:after {content:"";width:0;height:0;position:absolute;top:0;right:100%;border-width:7px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
.comment_body:before {content:"";width:0;height:0;position:absolute;top:-1px;left:-16px;border-width:8px;border-style:solid;border-color:#ddd #ddd transparent transparent;display:block}
.no-comment {color:#fff;background:#FF0000;padding:10px;margin-top:10px;text-align:center;}.comment_intime {float:left;margin:10px 0;position:absolute;color:#aaa;bottom:0;left:5px}
#comment_box{padding:0;background:none;position:relative;margin:20px 0}
.comment-delete img{float:right;padding:7px;margin-left:5px;width:10px;margin-top:1px}
.comment_date{color:#666;font-size:11px;line-height:25px;cursor:pointer;float:right} 
#comments .separate {color:#fff;font-size:15px;line-height:40px;padding-left:5px;padding-right:5px;}#comments .author-mark {background:#d2d2d2; color:white;border-radius:0;padding:2px 6px 2px 6px;font-size:15px;line-height:15px;}.comment-share{display:inline;}.comment-share li {display:inline;}.comment-share li.button a {background:#546472;color:white;padding:0 5px 2px 5px;border-radius:0;display:none;}.comment-share li.button:hover a {background:#272f37;}#comment_rep {margin-top:-27px;float:right;}.comment_child .comment_wrap {padding-left:40px}
.comment_reply a{cursor:pointer;font-size:11px;line-height: 1.5em;font-weight: 400;padding:2px 14px;float:left;list-style:none;margin-right:20px;color:#aaa}.comment_reply a:hover{color:#000}
.unneeded-paging-control{display:none}.comment-form {max-width:100%!important;margin-top:-15px !important}.comment_reply_form .comment-form {width:100%;}.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block; padding-top:10px;padding-bottom:10px;}#respond {overflow:hidden;padding-left:10px;clear:both;}.comment_avatar * {max-width:100%!important;display:block;max-height:100%!important;width:50px!important;height:50px!important;margin-right:15px}.comment_child .comment_avatar, .comment_child .comment_avatar * {float:left;margin-right:15px;border-radius:100%}.comment_form a{ color:#2f6986;text-decoration:none}.comment_form a:hover {color:#2f6986;text-decoration:underline}.comment_author_flag {display:none}
#showcommentmenu{font-size:20px;padding:10px 20px;border-radius:3px;color:#fff;float:right;margin:-8px -15px 0 0}
#commentmenu{font-family:'Roboto',Arial;visibility:hidden;position:absolute;background:#fff;text-transform:none!important;list-style:none;right:35px;top:45px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#commentmenu li{width:100%}
#commentmenu li a{padding:9px 15px;display:inline-block;width:100%;font-weight:400;color:#666!important;font-size:14px!important}
#commentmenu li a:hover{background:#e1e1e1}
#commentmenu.shows{visibility:visible;width:200px;height:79px}
.bnm.shows{visibility:visible}
.comment_admin .comment_author_flag{display:inline;background:none;font-size:11px;padding:0;margin-left:4px;color:#555;text-transform:uppercase}
.menu-comment{background:#22A65A;overflow:hidden;margin-left:-20px;padding:0 20px;height:50px;line-height:50px;margin-right:-20px;border-bottom:2px solid #168947;box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 2px 2px 0 rgba(0,0,0,0.12)}.bnm{visibility:hidden}.comment_admin .comment_body:before{border-color:#ddd transparent transparent #ddd;right:-16px;left:initial!important}.comment_admin .comment_body:after{border-color:#fff transparent transparent #fff;left:100%}.comment_admin .comment_body{margin-left:0;margin-right:20px;float:right}.comment_admin .comment_avatar{float:right}.comment_admin .comment_date{float:left}.comment_admin .comment-delete img{float:left;margin:3px 0 0}.comment_admin .namamu{float:right;padding-right:15px}.comment_author_flag .fa{float:right;padding:4px}.comment_admin .comment_intime{float:right;right:5px;left:initial!important}
#comment-editor{width:100% !important;margin-bottom:20px;position:relative;border:none}
.comment-form{max-width:100%!important}
.comment_arrow{display:block;position:relative;margin:0;padding:0}
.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}
.deleted-comment {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_LgCwDkok01tSg8C8enwMbQs_4lk4BBLuR0vEJTVg7jhFqEuO9nT0LCMYijEw57xDjU2qF6KYI_qKdGdIJOPUVstKXTwWFOfquGrPUatUzCPYXD3LK0k_B0gTP126MPG45eHIOR-y8w/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#ccc;line-height: 22px;padding:8px 15px 8px 45px;margin:5px 0;display:block;border:1px solid #ddd;position:relative;font-size:13px}
.comment-form p{position:relative;background:#fff;color:#333;margin-top:50px;font-size:14px;font-family:'Open Sans',Helvetica,Arial,sans-serif;line-height:1.5em;margin-bottom:20px;padding:15px;border:1px solid #ddd;transition:all .3s ease-out;}
.comment-form p:after, .comment-form p:before{top:100%;left:9%;border:solid transparent;
content:" ";height:0;width:0;position:absolute;pointer-events:none}
.comment-form p:after{border-color:rgba(68,68,68,0);border-top-color:#fff;border-width:12px;margin-left:-12px}
.comment-form p:before{border-color:rgba(221,221,221,0);border-top-color:#ddd;border-width:13px;margin-left:-13px;transition:all .3s ease-out}
img.comment_emo{margin:0;padding:0;vertical-align:middle}
#comments .pencet{color:#fff;margin-right:10px;padding:8px 15px;background-color:#2DCC70;font-size:12px;border-radius:3px;font-weight:400;text-transform:none;text-decoration:none;outline:none;font-family:'Roboto', Arial;cursor:pointer;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}#comments .pencet:hover{text-decoration:none;background-color:#22A65A}.comment_emo_list{display:none;clear:both;width:100%}img.comment_emo{margin:0;padding:0;vertical-align:middle;width:28px;height:28px}#postCommentSubmit {padding:10px!important}#allHolder{border:none!important}.small-button {color:#fff;margin-right:10px;padding:0;background:none;font-size:12px;font-weight:400;text-transform:none;transition:all .3s ease-in}.small-button a{color:#fff;margin-right:10px;padding:4px 15px;background-color:#009a5d;font-size:12px;font-weight:400;text-transform:none;border-radius:4px;text-decoration:none;outline:none;box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #3d4852;text-shadow:0px -1px 0px rgba(0,0,0,0.3);transition:all .3s ease-in}.small-button:hover {background:none;color:#fff;text-decoration:none}.small-button a:hover {background-color:#990000;color:#fff;text-decoration:none}
@media screen and (max-width:684px){
.comment_child .comment_wrap{padding-left:0!important}.comment_body{width:70%!important}.comment_admin .comment_body{width:60%!important}}
@media screen and (max-width:480px){
.comment_body{width:55%!important}.comment_admin .comment_body{width:50%!important}}
</style>
</b:if>

Nếu trong blog các bạn đã có CSS của một hệ thống comment nào đó thì các bạn xóa toàn bộ code CSS của nó hết nha.

3. Sau đó các bạn Ctrl + F tìm với từ khóa "<b:includable id='comments' var='post'>" . Sau đó các bạn thu gọn nó lại sẽ còn như hình dưới

4. Sau đó các bạn thay hết toàn bộ dòng "<b:includable id='comments' var='post'>...</includable>" bằng đoạn code bên dưới.

HTML<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<div class='menu-comment'>
<h3>
  <i class='fa fa-comments'/> <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> <data:commentLabelPlural/>:
      </b:if>
    </h3>
<a class='ripple' href='javascript:;' id='showcommentmenu'><i class='fa fa-ellipsis-v'/></a>
</div>
<div id='commentmenu'>
  <li><a class='waves-effect' href='#comment-form' title='Add Comments'>Add Comments</a></li>
  <li><a class='showmore waves-effect' href='javascript:;' title='More Settings'>More Settings</a></li>
</div>
<b:if cond='data:post.allowComments'>           
         <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: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>
 <b:if cond='data:comment.isDeleted'>
  <b:else/>
<div id='comment_box'>
             <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_service'>
  <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a class='namamu' expr:href='data:comment.authorUrl' 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'><i class='fa fa-user'/></span>
               </b:if> 
</div>
 </div>
             <div class='comment_body'>
              <span class='comment_arrow'/>
               <p><data:comment.body/></p>
<span class='bnm'>
<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/AVvXsEhFQcHeWBgauk1cXA7kCQ6ybmZ9rBPwc2idRmKO006cNEmrp4Xt7JPElp8SBdRHiX1SkASXPwkakeTS0EqS5PR8z7f22DmAsQZ9wNl7KT54Ik12s8BrnnPImB2Zmw8viy08VR41NKeQPpA/s1600/delete4.png' title='Delete Comment'/>
</a>
<a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>
  </span> 
 <div class='comment_intime'>
<div class='comment_reply'>
  <a class='ripple' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Reply</a></div> 
               </div>
<div class='clear'/>                                                                                        
             </div>
<div class='clear'/>
</div>
</b:if>
<b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'>
    <data:comment.body/>
  </span>
</b:if>  
              <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'/>               
           </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'>
                                                           
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
             <span class='no-comment'><data:post.noNewCommentsText/></span>
           </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' 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[
       //Global setting
        Config.maxThreadDepth = 5;//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/AVvXsEjCfH3Nxnh4ryOMuU1hyphenhyphenMZVWzrg0GnuBAqR9SUD0Q8qxcsG43n8Qd5P9RchDoeCbmsGqnfRbSBcfPuu66wtU2hBicO_5YNzQ1L3sJ3wJB8B6mnwHivsrX2zdugCDro0gAnVeFoDDDjMaLSJ/h120/1.png',
':('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbzf0s0rWXu-eZf-lgxOsMBsyw8ilrM6_v00dzCl29yhyphenhypheneJ-I7AkKjINz0sVLsG4ins0EjWjV67TTscYP7UcUiJy41Cg_d54_RF0psWkXNBlytkb5Y9zxMzB15mFPL05_9NV4-2SHGHaU/h120/2.png',
'hihi'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ9ZRr4-4fTjGKYzVZr3o6BMoakoJd_tA27XS3Gzs_KkHVngPSpFY2lRa3HC266Yr0_NdXrDskoys4juOPh3J2SAJohC_Rnn74n4lJNd1vQEZdCiUWybSYWeGGgIL-yULNBjFumuNBsaY3/h120/3.png',
':-)'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFm8ZPDIFhrbdRnF9af0_vyx79h45vIcoqd7JWM7PuMV5LhxJYAhqnDejFEb91240m-2zNfONd5DZq8nNwe2zl8p8eWZS654fbI5OLJnd39c8myksOP4tVcvNdcmq2mh2R-bN6BliEapT/h120/4.png',
':D'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFCbReWiGqwq1KMppw_IxhxSCya7uYht82AaKzJF-zSfcA3SuE1E7eo7PbbfNIjlwJkpPKoCZ7tp-bAlrVbmhmqJm6LleN3bGQvgEI-qAkIpQhft9TvF9I6GFLPMGLmzigYzvPOmDDcFp9/h120/5.png',
'=D'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXd6NdDDHwTbjFYk1p8Y6aOQ4ASdg84L1c3kyJMKZsXug1wOiHgpJBYaG5w_kKfeCuL8oyo0g8677zwC1cjE8RNLYubDQl5EX8r6o-M4muErQ6VOaOgt3z9_3a5Fh49KG_vDn4eR7D-Gb/h120/6.png',
':-d'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYHiCDx5QjTlz20iaWCcsMpIFifvtIB94OOxGms_n79cOw0_vidUe2miAIj7B7WfVKRQFu0WumlymytGXObT8zCjWKToYhf6YFA2HbTVvtdi6gfaeTKKftxiNe2f9OXSXWTF_plmPv-nY7/h120/7.png',
';('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXi1Cn7swrkOU9viccLB8m1tsvOEXIV8QlxdqAeAa4lxLagCEsos9qV4hei_Khq30l4JUVkD8NVRuSSGUBSp9B5kBC-mSmRnufhajTywLpzakOmZNw6GRqJvn2aVG-gsJ834Z5zBiP5ebN/h120/8.png',
';-('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIRCpDXvlh5aHvkPCJRHfK3c4Y-x-UkPDmqdFdTSSP8AxnDE-uD6FX2bXEwiu2Lq4KLXqkR4w35Bfe2VYH-nmBVpbH7i1xBY2AbdI5CgxsxORlTMvH0EkjnBM9qejSkXQ4B6UATE_mPmN/h120/9.png',
'@-)'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibokZAqde6R4o_bHkr9LhMJryqvO6eohuq2aN8bikXu-Zf0G84ewnHtGOjBcC9RMR9G0zEgsV7qaV4LdjEMj01rsG5zbHX1qw3jUIPDK8yxPEvwILxsK9nb2-kpkoptPbCe35UiutEfRdL/h120/10.png',
':P'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj769zEZP8oWywUVH0RPYuE0GSxtALTTRuNHwg9YrDILdTKvU58BT26rKqwDQ-hHpOMAe7-ZOP6twoV9J-mMwoB_Yo_Il8TQU9sIpec6rQFCWeDTwI7QuAGIag9R-GuN-I6j_u36G6cgECG/h120/11.png',
':o' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-WRA1JBZTtamdSlebinQTNAj2t2v_8oWMmA2sf2h0aTD7a_XkWy8E7cQs3tj5ek3K5p6ijewhgQ4t1om7Rhf8aj3mqSWSC8o0Jp41m4Tx3bS2-eDZDSw9JA76NySpGbByztGmruNfpPM6/h120/12.png',     
'-_-'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqluNKj2eqNSPipIxPH4RVyeF-qySX4gSlOPXoFNQpzsnnVne7XtXf4i7hqvTJTq5xj8ylIvSpjbPk0FF5_IV6JcD1y-JWIfYFe0rv-6ImTr2IDvI75h_k4P5qW67srg6SO1ax6uw3-VS/h120/13.png',     
'(o)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJ-lyOrJwPt61FShYIV__vCSXavMvjMaMTuyVwGRgdKDGDZLGq7GsAAxgHxgicuRZdM1yMknWG70CbWjqWsqg7w_0qcPQrRLqI9M_M8MjtpCZQBIOclSSGW5tkBAwgkw0xdx464t_kLEW/h120/14.png',     
'[-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_w8VLSYIBYdz0QEW1yZrbIS7WPCRU2cryZXqY8GU2KEW8flTsmQ376UN0tcGVsCOK3Jos3Udf7JS_6wyeIcQ8mFu7clooslF3vgyKjf1AqbqxDpvSnaxQNtpKDMcdCPAR3kaNnuDgT94M/h120/15.png',     
':-?' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsuEnuwARfb7mnG93hMZZQVYkyy-85GeijnAIueQ8MPIRRE512IwZItcwpAOdXwT0y-p82J_Kd0Er54P1Nktpj1u-CNPZFmONoOws__2EsPC7qjsX5Johggtn4WSKekhYT5SXvAha7s8ze/h120/16.png', 
'(p)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cPQpD1YbfBIfG_f4PMmEIaqGQWXvurKGkbuo_2U6PemxRwWfnj4H9WhSWLYcN66qpuAHwXc-lfXkTvXe5XhjiKL7bpOseivqn7aT0Kb0tPbRLnVifmQQ_6rFN5BXHVzDQqaoHHYqUAmX/h120/17.png', 
':-s' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QyMMHRn6YFIs_yHXi8w9d7hYWLIbaOZafvzHU-X4i3OVy4pL1bz_4Oi4ondcCHtv2_XGvODuonGOwKdFlhZehlshetuBeYLTYYy4uPTg3iJ1BCMoyyejBhThnf755hUtWc0oRJ9Hq0ju/h120/18.png',
'(m)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOsWhMGdA3SiJXDpFzAnaYDasgdp5tmx3MfMHli4e-_I-sAJrEFiskUTuliPzV9NLFypUJn75D-Zi7eWxsLjAXTZPbdz9xLpq4oUtCUEFfVM7NHWrkdnXw60WSUskxdzt2Oqixmdoske9I/h120/19.png',
'8-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaFfJRxLP5DJKJ5Wkac91N8DFS3sOHnmcEcvPT1Szw2cs2O8CB1zqbPSDFcVpRNquRnDvGGBoF58avgdQchTV2RFgdd9PzsdZYeeIpJhheGM6ikjLRmWfYybdGRTJjmb5-xtrP-Rj34JbE/h120/20.png',
':-t' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg05KxJqpxNB3V7WeKPn_rRagvuIMLPU5Ggfyx8aQ4lBNOdHSJI-rYpQYampI8j-HECrKc7eNX_x737an9EFcR1t02I50S4ldoYOY2vp7N8bN5b9fvUp3FijQjLEly6UP93PatwmgZ4_wh5/h120/21.png',
':-b' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcIcley7gEpHwRmSXFwqPESuVbtmy2Csb_nhFDUAOfoL7iRWlO-7J2DmjyR4k-AN4m5wy_T6E2t8TeUWrT_suqSRGuy8ps0kxmelQdJUUFHBUw_6QaBn1upSOlZkSxXZi6UBqezealE5X/h120/22.png',
'b-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga0av3kfwdZMfjzl87X7x1HOxtuJ1cj5oDhM1k9_tINZlifcxRly3_z3xp_BkmjnrdixilRmwmZeARD1rfAlqDciFtkKDrO2V6CSETmU1sOxY9J_C4RE3Je7c0ZW2v4m0GAg96Di20Ussj/h120/23.png',
':-#' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitomXJF4pw8KRwld8at6XDgDcO4RKWnTutw-18hFqk8SUho-XZ3mhLEvBqfyy665pCz6TLirfelQTU74z2yEWA_xMChHKrW9iUzHk8Jpi8n3947EP13xugquPZkzbclDNvgxsJ8KVos_Ze/h120/24.png',
'=p~' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilg-QzO4HDfBtfLEAWy4OCX03_7hy-zfiuEqd1QpO_nbdwbC8QfKZdF6iqmqGpipF73VBhkkbryDtGABxcAsqc1jaj_pBbVCn_VF-vIq6j5UmQ81fRLyHkrtNva9Cyg-5k53y3KAVCR2jC/h120/25.png',
'$-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4yP4GsK-coSEUxByTFUavYvYbkOO18gc3oPWw9ITXhldPCFcZvlheiQSH4gLZiE2yeIxS0vsID2y46ZPKw-P_jta4cayOtb8U4WRSI6qoftRGhYbSCE2W6I8XYDmgcR_sdPvzj6kAeSCT/h120/26.png',
'(y)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWoTleBwVUT6nGc2U0WJ7PHoBDFEMT4GbzGxSEffziecQK-BQlDI549Q4svoIFZiWNG3nBq3R4LVjFSM-99KHsuatxTys4x8kPFRJd87PWWF1VFZ75MTI9HnUxWioTPQGLlmCoskzFm7t/h120/27.png',
'(f)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqb7grjwJi2RwHo-wr9dnPiKOwjXwdb29r1Er7cPEwDkjD9bP6NLbELl9DvT7RjJmKkOfiv4nayWGcXKATkIVtCEs_6VDhiKoBaYIZn5UnnFKStvnnRIz9hVtfrmaFOdiqpz21xiBmGQQ/h120/28.png',
'x-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyObJ_JjW0TfOeM-AcufaiUlTwoYQWmgMrBqwK_-upZwmF3eJ6S2m056TM_JMEMqgSKC9_Mdql-VdAX6KGvX6igGXpUq5Kk5MvtMFHE86iYVxsvpEwc0ei0_ClqjYqBvq4WxqjJaUzqOAn/h120/29.png',
'(k)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklvOI8w6Js5C0MBYmn8b28RLkNflkWs5WGEtfNB1vgSeqYy8HDvo4raQavTuyfFzvrK9jSs58GJhOKV8yHISkyX9TcSn_pLt6b1RJbY9Ps9wzidDceDXCGb-RmjsRIyBWjZDoOklcmSr/h120/30.png',
'(h)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY24DOyzpqt4l3Ue6dRSQ9Abz9x68DGXzROHJrFDjHok3JKX4yHL_OLwoKjASgfrUBzI38yW7qPdh0OpNTw_cu9hLLUTgR5l8bF1bpvHxHWeKyrLve4hLEhjDlcdYu11QkYfQzvEl4-3Cj/h120/31.png',
'(c)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26m3zMLxAeCHq8ZzjVGleDnje8K2qAUX63RBwqUzFMtY1XPQp0hoGW1xDNyAGFaXIZkU_mjm0H86dy2IIfDXnSRAYHmdzPxMNJg116TzI4JLhVZT2kz0Y8yuzAQyUihn3LwKJuV-C9EWW/h120/32.png',
'cheer' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwJlapOSMLvWX8cE_sXox219FJiPVBY8qoGykf8uBCh2PnBZ3v33uVRTKAX3AXFe9cDLV-TFiMJefIIspY658z1LKz2njkKAoDsUj7dY490SDDef0zSpoQhAOQcyPqFRC98CrvO55gGHGd/h120/33.png',
'(li)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QagWq6AwaSNYFK7Kt6aYqEfgWMXWwnZltzq7Z4SL5ZqPc6KuYe2doRrAMoml9Rwdj_D4xuY1lPErK5Y3z8n1TAuXzWOQJX0I8u5Qzex-wJ0NB0sn8AgvjB_JkKToCd4tLa_3k0fatsiv/h120/34.png',
'(pl)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxE1sNYEwfBPFWXjQKTRlJ-S2Zj8m0tK7ED_4nMVpiY0kxrHvXzHuJhfwdc_d54nIzdkJQKRou4v8IFWdyi57TKAcS0CmoAElXTAorZH4tMOoZ25jrv0Qg2Cyp08fUvWt9KBocLN49tsLh/h120/35.png',
];
        
                               
                                //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</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>

5. Sau đó các bạn lại tìm tiếp với từ khóa "<b:includable id='threaded-comment-form' var='post'>". sau đó thu gọn nó lại ta được "<b:includable id='threaded-comment-form' var='post'>...</b:includable>" . Rồi thay đoạn code đó bằng code bên dưới,

HTML<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form' id='comment-form'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/>
        <br/><br/><a class='tutup pencet' style='display:none'>Close Converter!</a><a class='show_emo pencet waves-effect waves-light'><i class='fa fa-smile-o'/> Emoticon</a></p>
<script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.show_emo&#39;).click(function() {
        $(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;);
    });
});
</script>
<div class='comment_emo_list'/>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
      <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/>Biểu tượng mặt cười ( Copy &amp; paste xuống phần Comment )<br/>
Hãy Luôn Comment Để Tạo Động Lực Cho Tác Giả
        <br/><br/><a class='tutup pencet' style='display:none'>Close Converter!</a><a class='show_emo pencet waves-effect waves-light'><i class='fa fa-smile-o'/> Emoticon</a></p>
<script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.show_emo&#39;).click(function() {
        $(&#39;.comment_emo_list&#39;).toggle(&#39;slow&#39;);
    });
});
</script>
<div class='comment_emo_list'/>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/></b:if>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/> 
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

6. Cuối cùng là thêm JS cho nó nữa là xong: Chép đoạn code bên dưới và trước thẻ đóng </body>

JS<script type='text/javascript'>
$(document).ready(function(){$(&quot;.showmore&quot;).click(function(){$(&quot;.bnm&quot;).toggleClass(&quot;shows&quot;);});});
$(document).ready(function(){$(&quot;#showcommentmenu&quot;).click(function(){$(&quot;#commentmenu&quot;).toggleClass(&quot;shows&quot;);});});
</script>

7. Lưu Mẫu lại. Xem kết quả.

Nâng Cao

Thay đổi Màu Sắc

 Tìm mã màu là #22A65A sau đó đổi lại thành mã màu của bạn.

Vào đây tìm mã màu 

Thay đổi cái viền bên dưới ngay cái thanh màu ở trên.

Tìm mả màu #168947 rồi thay thành mả mảu bạn thích.

Thay đổi Emoticon hoặc thêm Emoticon vô.

Tìm icon bạn thích rồi lập một cái danh sách ra kèm theo link hình ảnh của nó. Sau đó tìm dòng với từ khóa "Emo_List = ["  nó sẽ ra một list các Emoticon. bạn thay thế hoặc thêm vô tương ứng. Trong đó

• Các ký hiệu đầu là các hình bằng ký tự 
• Còn link sau là link hình ảnh sẽ thay thế ký tự chữ bằng ảnh.

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Hệ Thống Bình Luận Cho Blogspot Với Phong Cách Material Với Twitter Emoticon , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait

• 
  Thêm nút trở về đầu trang vào Blogger smooth scrolling
• 
  Sharing Social Widget - Nút chia sẻ lớn có đếm số cuối bài viết cho blogspot
• 
  Hướng Dẫn Tạo Link Động Ở Trang Chủ Chuyên Nghiệp Trên Blogspot
• 
  Tạo tiện ích thống kê blog tùy chỉnh đẹp mắt
• 
  Thêm tùy chọn xếp hạng 5 sao cho blogspot
• 
  Hiển thị lượt truy cập từng bài viết bằng Firebase