Blogger Comments Material Design Style New 2017

This tutorial is threaded comment or blog comment style. This style of material design comments will make the comment look on your blog to be more fresh and clean because in this comment style I hide Comment Date and Delete comment, to display it pal you only need to click the icon ellipsis/icon 3 dots on the right side, then click "More Settings ".

To comment the admin is on the right side + icon author, while for other commentators are on the left side.

INSTRUCTIONS TO INSTALL MATERIAL DESIGN COMMENTS ON BLOG

The first step of CSS input below just above code ]]></b:skin>or </style>buddy can also use the Conditional Tag below:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
KODE CSS DISINI
</style>
</b:if>

The Conditional tag puts it under the code ]]></b:skin>

CSS Code

/* 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/AVvXsEjEUlkpdJfazI6mZHTuxp-RcM3GcLmTEkGGmOc6FfuEwI2mfWrVPzolbtmw06UCDsv-hFNFHBSd3CKJRdidnTcQn_0wx_D5cGPqYHAsDT4Ta620vnPIFdoJxvOk-LXoPVNLENlLJZuKVAE/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}
#showkomentarmenu{font-size:20px;padding:10px 20px;border-radius:3px;color:#fff;float:right;margin:-8px -15px 0 0}
#komentarmenu{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)}
#komentarmenu li{width:100%}
#komentarmenu li a{padding:9px 15px;display:inline-block;width:100%;font-weight:400;color:#666!important;font-size:14px!important}
#komentarmenu li a:hover{background:#e1e1e1}
#komentarmenu.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-komentar{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/AVvXsEhsfJC7Bu4p4ffYOUD6piK8KSc7fU5sMZFTN_qTmlkVhRm3dbaqcj0Ilw7JzLQpCXcC0yaK_Sh7VOWT5Lh1OY53uUui963yB4lSmo4tKassNpmzmwNMikCi-C7SPKBsmvjfvtMx6yLIor8/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}}

Do not forget to delete the old CSS comments contained in your blog.

Next Search the following HTML (use Ctrl + F): <b:includable id='comments' var='post'>or like the code below:

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

Delete Above then replace with HTML below:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<div class='menu-komentar'>
<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='showkomentarmenu'><i class='fa fa-ellipsis-v'/></a>
</div>
<div id='komentarmenu'>
  <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/AVvXsEh7EyZ5-EjN1J4RUS4FTLXjYik57m8mIgELrl5YOxEExMQisQFeWz9dx8HUValXUoEPvXTZlJmgKdEVbMi_4ROTr-4l_kXsvxVzVCKS2vyZcRKLvxUwQ-WxkbD43alDlPFInKyKsDwNtfw/s1600/delete4.png' title='Hapus Komentar'/>
</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)'>Balas</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/AVvXsEgxInzpsLkJjlZqgN5enOVe5i253FafYNs_jDrsWx6ji_fi4zTlVBWJTi0SDWIROQH6mJ085HYr8cseXZFaxoW05ZH8TsMJLmcT4VMwfand4UokN1hncuQ7EZOzImFZpJGAuGJBV6DHp2MP/h120/1.png',
':('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVAlAjOK2FS0GdfXaw_EX6uLJDDR7vKfKZlfRGiy4Vhln7MgS0spUbLhlyUXlV4M0l20l87JPThTVbYaXNTQUlIIuXzScaQdzSUZ3-hmG_97TnGC1qdF_OwAPyCRtj9bqC2icrF6MvSNUe/h120/2.png',
'hihi'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguhKtyvzDPfSoTPSbkP4-1SKckbmXIHUhHTOXEUHmYCYtmRyL7fT52NEJVwF1Dmi-EVKvgR_4DB0W2r028ezq5woPpw0mFg3-cQhdd4YB1iCdM2Dn7JqryI0sh1AZqC9TJp6MSrCHxfM-l/h120/3.png',
':-)'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztLDGMveKh_anauO-pLE3npZc_rrJTp_sAEsg9Qq4a7hxL_n8qSiJSZpq8GpJu2Up_oS0COFAGI1eHx33k2PenKp7W1KPlE9EZq37gLFA-rca5xb6hHaPagcutyP4QKKp9kAw5qR5Qlzv/h120/4.png',
':D'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQurpCdIwU9CqvQbqLaswQUegS4bUxt-DZpRILA0z1EyYBdpOXqy65FnVyBSo_m6uRa8LUTPlPKlUgVPfWPREroJXMHabkWqdmeFtyGKjrxE3pNaBe6UFy5esUrj0qntmpH4EL_0WJ5Uc/h120/5.png',
'=D'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4aXIiTfA0gAqB2UJeoOGIyHV5c3D2c1-u5HgO6c8PzyL1BpvaGgc8ENB7MQNO-NBmeCnKH7bXV4BibcSr-hhrjjUPxD8sr-Kuw1YNITxgsKNrfvx3aqIWgkNZQ23w9AtWSOtQ3yt9BMcx/h120/6.png',
':-d'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ93GAMoXRjG7QCMKP1wXMSD_L0TEeE71hc0-HwQMXTjgNzTHyYiAvDpQeeUShCygKQLYTl-fwEqJxPDDZZ3y-R3pVPjhjhZXkmt4Zd3ck4rw5ZGBQvjpQdwH9NiFcKfFhiLtshaVEeRKk/h120/7.png',
';('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKFB3nkIMRnX4fBsbTWq7leO7cWo1-3_R3cS3HLG0DUMETrrO_99YGuJu0Dr3BdO74Hm94u7JlWRSgiVFvVc2C8B1JuyeNz4XWNjIv0qTkH1yZ9fF7y_FgIZjqOOAJS6bw6ddctg25Xeu/h120/8.png',
';-('   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_W3Sy3mZurX5YyvH3eq3rXTs8-u0rliki9uK1xJ3R2KNpc-lZV9WDQ5uc7R0hIDUQ9qgFcmvLx-QAHQ4kb1VIuzVpKfN4ObDWbRAffhyphenhyphenmYXaB99aR-QGrH5kx__TREqbYs1d-1eufUc/h120/9.png',
'@-)'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKsU5tFZ1br23oL4fQC8f83szJa4p8j71UXwxsrE5vzt_iJBm-BR_pDgSXZuOZNAzwgEvBwzGjK3RYWyVZ0eN3DbeBE-2_7p2MCfgyoPFIydgEEjg7zqYfQEfHps6yiiPUXtITqySqcuDR/h120/10.png',
':P'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQNRhsNFn_sMp6sPpvi6qMiYBBnJE288tc7NOsbMzI3Tl-eDDJPAohvazRcMz9R11XwpCC0wu5LnBAvrCyQPw9RD4c6Zu2qZV6_E_fSTT4ziUYXGKN0T3IDud3e_nE8PuR6WT74TYbURf/h120/11.png',
':o' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1oyw9f8EhfAREBeDnqZOEcXujEfpbK76NLjQbAUYeSV86d3cK3jj1R0U_wfDrqgzgoCk6C8WaTRuPg3u-d2VUlzIrhIvVrFcjsrxEswTt4E_qBaVTVsOok1rJ_I2RCTyBhyUyaiLIE9mT/h120/12.png',     
'-_-'   ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrBeGAdo-cY8CjcSEgPW9wxnfnubgviE52X8-eg-QyWHJB5DHsmdAP7iYB1ISFNgFEV3zSuI6C5FLuPQvUfa6Y8Qg-tLfqYggjmAq3bVhLlfCb9jrD01J082ChoaLt_m4f8LK-KuH9meb/h120/13.png',     
'(o)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHJqLjqhTI3CBdZrw-xrJOhMD9ttOo9oGgqbmZkeT7f5IBbTbeooa-UDgIRl9sZegMmI-S88U2ECNnQPfweLaHOkfq_BQus1g-uCRWrFYK03YvmPf-CSGxE3-5hnWepFOW8Hr1K3AMXNl/h120/14.png',     
'[-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR-7wglCtkNQPCQj6oTTXO3ZvuZqtZub0qIXrMHPg0kIE9bo_MqWES6peQ6pUzU4Cy-9Qgc47Hp-Mcso85EdUR80REong5WrGogqpYh8Lh7ZF0hcXmANuD-FWb9VUOT4Z3u57HoysayXZ_/h120/15.png',     
':-?' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUf4C28DwDU7dKdYM7qkeEkVLdD2NEOXk1QlJV9hI84sN5UUA7ulgnR66-BHdcEPnhYhgRUXEU8BX1XHf4Lorw6Q51B8aGoXF8bNCw0NnrvuOGSfB27sa0w54poozYzfqCN3URxX3ZiIN/h120/16.png', 
'(p)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsnSeaR9DRbFHeLCeJ_lFOVRTqMdcM_m2dRr-L2eXFyrAhqQUyZ2AGdGs4ETgCeyubAa0LdsyD0yFVdAjkEzryONX0kP5PIyOBYp7HKO5sMfEGn7rhLvpQbp_PfPCfMAvqePr9nkf2VYt8/h120/17.png', 
':-s' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoAnOuFhAIzbCceKjsoOsQIkmRwV2oA4-ypeGw7-zT9oY-gNEoX9nui3mBKMjK99LFx3Z-ObLin2cuaXTWazLdRvo-DL1PzS2Nta69BJiC15-YuF48C4NKx1pD5KCoeckkiHlsLjldHxHA/h120/18.png',
'(m)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-oeRZ91dNWTsPnhKJjnBzNQTqrhaxugP_Mz3zBrb6Kbx8m4LRdZlwAXnlcPgnwwrfqsZGd691LQ3nu_rC-layrZ9Pws_vxdVUxuE-lGa9jGWHd8RkTKBRMZqjPkhPGbuWvxQ_EA5qEhX/h120/19.png',
'8-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuuehRh45_1Cu33SgLJ3AeigLxL2fdLs-3pv1fdHdEeOM1w3vHzk2dkb9ispqCGWWgpxlB2pX9lMRCuUDLJuZQDTVWiBrvPPnqk99KqVMJmMASz6elOqrbe7faBN2dII5d46xmBwqIrVl/h120/20.png',
':-t' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOnHf6DyDpkxUHn22RRZ-NYXvlS10zoACWfAxqoUX7ZtsHZIVOBeeaPoLr9nLIDcVAuiLlxBJoyBRy79m0bXNeA5GCdsf9y5hxSlzplUsv1LONa5Awc_PsEONK3GBGZjHO2Yuhfyin0y1b/h120/21.png',
':-b' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpoT2_f0bZSS_ACOVvh6AUl5nHuB4Ph1_kW_TfKFncBeTMARHBjq5rQAhc-2PXwaudu2z6dOKVX43gCsBOJpTOjjlBLiAhmtMyS7_AuaFOLul-KtnvV3NOlaplUEgwNQwgSMO8BDN5Rq92/h120/22.png',
'b-(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyvXKzAjJe9-nkIMCGEA1izGD3B8xelppCV6LmovnWMr43uyGCh2qoWvz01TMhzTfcigo2_Mls4aR_sHUG1QAjClhqL4qaOHTIzBWZgTFx50IzSOFaa110atvsB9tXz7gdQ0I2DnZ7PEDQ/h120/23.png',
':-#' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiutEAVZtKdQOK04tBdhdsknc6hWVs1g17_yX-crURIBBXqDC18chu0aFcVIerdreZ2CSi5WiO0xY0uvoLCkVZH1z-AOKED1GW_xgQpxBfz3tSWMHjtebyeQqdrfLsnw9qHHT0TRZysB4Z/h120/24.png',
'=p~' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx7J7_zUfgzXnuCiCu2ZO3Muyegs7DuKsNLrpaFSicBBtGL07PKIMDcybgFmFF0zgvFET2hmM_X9G9Hp-Xai5yTL1K_suYuv-jCB7PBcu7leV1URzgWVapMrAFs0d68i1m8ripW7DLsPtm/h120/25.png',
'$-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCoG461YpTw-m1saHcJ640WxjSAlndISOy-THJF2Q_YVDaXlXO8GMnbqA9lZQEIlDufHdwm1ErcJQCJL-JCahSDLEg8N8NYB3kRLay2RsM2vYOOWrrOgbvo5QjB2sIH5uA3CCXpNKlY8Qd/h120/26.png',
'(y)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkdgdkyUByw_YKnQnKJTo-pGKwrQ259kN9MyUSWv5QpEkiJsBABCobr3N9wZLrEkZU9ST0OdSWxOCDfT2lxJn9Q_pVDZPT7By9bwELFOZCHU-EoXFx04nwHV62XRmq2o1qhj8pjoO0lA5/h120/27.png',
'(f)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTkX_VDGHY_ToTFMfbPTGzkiHRv5reB4itxVDQCdnarKBZPDRDFwXJ9JqJ1ST0lE8Ihfu6RARh0mYXg5tSq5qGpig_A1aqkSvsEf3YePIpvzdANpFyxjjjHGqOAcywuLnzOQ8XRQbMs-DM/h120/28.png',
'x-)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigaPJHjE35uJLpx2v84m0tRrhl880kpkxTGAd11k_2lptVHaBpHLBl1dUkFhwLdoVlP2uP27zPrYocWQ8IorRp_tqtuqh0x-n6yYv7Its1heLZrYo6BfMDcMNWxJdW92gb-mffEUDYiJeg/h120/29.png',
'(k)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJpQcRv57p0SXppaDaAk32HHlPFOJ0aZoZ52BjD6DJf4fIrhE9jnGoLGME9guMEHSYV3hW_E1XTBbE-q7i-ubjcKrExfRWSvQdOO5ZQ2cp1LRvEqL7asv3mKNCDjxhd5ArgSNVkZljYObG/h120/30.png',
'(h)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz-uS9C2u91CWgcLM9r3hYvmDSi6W4OXXr1lPT4lF6_lOXheupVAeHc8_tusdfEWG3Q1ejge5YbKrMAJQsZe0R2YQ0mRL-BhbVsROr1qHCB1VjGe1ATpBmUjCzlJA8FjleqZPELgIQMx5N/h120/31.png',
'(c)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiea_a5izESUO82xd1pcsvdQw4C3QjZF2UffBZTUZGZ9xNMDnyPy0azv7W4zDMz5NMvv8fM2NUOP-uf8Q56Fr77oaxCzCEEy-07eI16UqLyjijMKSkdCvQeMXCBH3zFFeYObZkdlAF_lD2i/h120/32.png',
'cheer' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1GlUZ3tvIBSqGVgJkztZp8Y6yBDFvynXcYIuq-aU6kGJJ36idh1q-hMbR-E1nzSEgfgbCu5iVt_CV0XHM3j5wxasH58NKIxzQi3DL1_2zZgAOW54iqoBL2ceuZnuGtGzS3X483a8Ljqob/h120/33.png',
'(li)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lK83yUqlorn42pPZkOwZWR2nmNqQ11Wo3qxvae7p6Y-pQ826SoePH0xmfTpi0WIngJXBSMNSaZOIk9qc5ClDL-lLzEpzKiFA1lWBmTYBIIVW-JubFIYxKLibm-_nmcNTcMRyoXe_uNQP/h120/34.png',
'(pl)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrRy0YMRi-6FiD2nrUxi_0rERvxkbFWfIMbZgkX6prNzXGMU4ZYjqAA648VHQ4tllC1m_yqabjtuTGpu3IuQJnx6pLMfuAy6sz94cygcFkCgjAG4D0sXFLeXc1rWGSKt7kPTsIm8UwaTX/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>

Well here's how to install Emoticon and Message Comment form on blog:

Search the following HTML (this is the same way as in the steps above): <b:includable id='threaded-comment-form' var='post'>...</b:includable>

Delete then replace with the following code:

<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'>Tutup Konverter!</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/>
        <br/><br/><a class='tutup pencet' style='display:none'>Tutup Konverter!</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>
 <!--<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>-->
</b:includable>

The last step of Javascript input below is just above the code </body>

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

Now Save Template and done.

If you are facing any problem in installing this on your blog please comment below we will get in touch with you shortly thank you.