Cara Membuat Kotak Komentar Emiticon Di Blog

Comment Form Emoticon Seperti Kurogaze [Blogger]

Halo semuanya, kali ini saya akan membagikan tutorial buat kalian yang mungkin akan berguna, kali ini saya akan membagikan Cara Membuat Comment Form Emoticon Seperti Kurogaze Untuk Blogger. Sorry kalo saya jarang post, itu dikarenakan orderan belum pada selesai wkwkwk... ah sudahlah. Ok kita mulai saja tutorial kali ini

DEMO bisa kalian lihat dikotak komentar bawah post ini, & Sebelum Memulai Silahkan Kalian Backup Template Terlebih Dahulu Agar Tidak Terjadi Hal-hal yang tidak diinginkan

Cara Membuat Comment Form Emoticon Seperti Kurogaze

1. Pertama Buka Blogger > Template > Edit HTML, lalu cari Kode seperti dibawah ini dan ganti dengan kode yang sudah saya siapkan

Lihat Gambar

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
  <b:if cond='data:mobile'>
    <h4 id='comment-post-message'>
      <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' expr:title='data:postCommentMsg' href='javascript:void(0)'>
        <data:postCommentMsg/>
      </a>
    </h4>
    <p>
      <data:blogCommentMessage/>
    </p>
    <data:blogTeamBlogMessage/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <a expr:href='&quot;//www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
        <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;//www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
    <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
    </b:if>
    <b:else/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <div id='threaded-comment-form'>
    <p><data:blogCommentMessage/>
    <span class='small-button1'>
    <span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'>Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'>Emoticon</a></span>
    </span>
    </p>
    <div id='emo-box'>
    <div class='comment_emo_list'/>
    </div>
    <data:blogTeamBlogMessage/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <a expr:href='&quot;//www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
    <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;//www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
    <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
    </b:if>
    </div>
  </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>
<b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
      <div class='goog-inline-block comment-action-icon'/>
      </div>
      <b:else/>
      <a class='comment-delete' expr:href='&quot;//www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' title='delete comment'>delete</a>
    </b:if>
  </span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
    </span>
    <b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>
      :
    </a>
  </b:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
    <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
  <b:if cond='data:post.allowComments'>
    <h3 id='total-comments'>
      <data:post.commentLabelFull/>
    </h3>
    <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 class='data:comment.adminClass comment-set' data-level='0' 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>
      <div class='comment_area'>
      <div class='comment_header'>
      <div class='comment_avatar'>
        <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
      </div>
      <div class='comment_name'>
        <b:if cond='data:comment.authorUrl'>
          <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'>
            <data:comment.author/>
          </a>
          <b:else/>
          <data:comment.author/>
        </b:if>
        <b:if cond='data:comment.author == data:post.author'>
          <span class='comment_author_flag'>Admin</span>
        </b:if>
      </div>
      <div class='comment_service'>
        <a expr:href='data:comment.url' rel='nofollow' title='permalink'>
          <span class='comment_date'>
            <data:comment.timestamp/>
          </span>
        </a>
      </div>
      <div class='clear'/>
      </div>
      <div class='comment_body'>
      <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'>
          <data:comment.body/>
        </span>
        <b:else/>
        <p>
          <data:comment.body/>
        </p>
        <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'><i class='fa fa-reply'/> Balas</a>            
        <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'><i class='fa fa-trash'/></a>                                               
        <div class='clear'/>                                        
      </b:if>
      </div>
      <div class='clear'/>
      &lt;/div&gt;
      <div class='clear'/>
      </div>
      <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' id='comment-form'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
            <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
          <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
              <data:postCommentMsg/>
            </a>
          </b:if>
        </b:if>
      </div>
  </b:if>
  </div>  
  <script type='text/javascript'>
    //<![CDATA[
    if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
    //]]>
  </script>    
  <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 = 3;
    Display_Emo = true;
    Replace_Youtube_Link = false;
    Replace_Image_Link = false;
    Replace_Force_Tag = false;
    Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];
    
    //Pengaturan Emoticon
    Emo_List = [
    ':aghh:'  ,'//1.bp.blogspot.com/-9Llq4uNUv0Y/WCn3igVNZkI/AAAAAAAAAyQ/QQkOK6cpdL0DobbtvRzqXQfn0jgoplndgCLcB/s1600/aghh.gif',
    ':cling:'  ,'//1.bp.blogspot.com/-w5o0yrObD64/WCn3iiHL3eI/AAAAAAAAAyU/TRJGNPklCLAvAKoIm7k9pWdUtnPCmpqPQCLcB/s1600/cling.gif',
    ':haha:'  ,'//1.bp.blogspot.com/-1RFEB_pw7Eg/WCn3i0M1OkI/AAAAAAAAAyY/Z8gQVN82vcU0gEG6tBZ72DMER78NfhnXwCLcB/s1600/haha.gif',
    ':hehe:'  ,'//1.bp.blogspot.com/-eSBIrysIzZc/WCn3jVkD4_I/AAAAAAAAAyg/SBGTKclHZyoItIlHTn0ErgARMr8ib3ZzACLcB/s1600/hehe.gif',
    ':kaget:'  ,'//1.bp.blogspot.com/-lxI2Ks9hLBA/WCn3jYgNcpI/AAAAAAAAAyc/caE3YYnEvzYNjd_iOui2ZLf1k-Pi_kIMQCLcB/s1600/kaget.gif',
    ':lalala:'  ,'//1.bp.blogspot.com/-frOCqlIR210/WCn3jk4AhsI/AAAAAAAAAyk/cwVFlfxeoJwahHl7m99HrN4fUSDM2tHuwCLcB/s1600/lalala.gif',
    ':lho:'  ,'//3.bp.blogspot.com/-XFqRHiJg6Mg/WCn3j0gk5JI/AAAAAAAAAyo/iuVHyGL5Ft8Rj-wFlpmO816WrcDLNSZ9QCLcB/s1600/lho.gif',
    ':listen:'  ,'//1.bp.blogspot.com/-xNHpjAHJ7eo/WCn3jzb6pmI/AAAAAAAAAys/x8SNhSn9oTcLYM2oMBzuOfC9yTs2-zStQCLcB/s1600/listen.gif',
    ':lol:'  ,'//3.bp.blogspot.com/-3BY_mQS_b40/WCn3kB2hyFI/AAAAAAAAAyw/wrUusedtrYIn0sdQGH6cNUTjYQEY0gzJgCLcB/s1600/lol.gif',
    ':nangis:'  ,'//3.bp.blogspot.com/-VAJTyZIExRA/WCn3knNB7oI/AAAAAAAAAy0/1Y5lGbYp-awJM0dfnSsxWUajiPSVvKh9QCLcB/s1600/nagis.gif',
    ':onegai:'  ,'//4.bp.blogspot.com/-Kce8R-auvOo/WCn3kzOapzI/AAAAAAAAAy4/9y-O9H0mAcE5bEX45GpmgOhHLuEb0rjmgCLcB/s1600/onegai.gif',
    ':daisuki:'  ,'//3.bp.blogspot.com/-jH1oc849fIU/WCn7UoaMQCI/AAAAAAAAAzM/kwYhjag6SsUaE8adx2IZLg56VebMEbPtQCLcB/s1600/sayangku.gif',
    ':terharu:'  ,'//2.bp.blogspot.com/-tMSp-Pe_I5Y/WCn7UuGQbLI/AAAAAAAAAzE/OQzwiaieu9whGXIkyM0ozKljgHRD-p8agCLcB/s1600/terharu.gif',
    ':tolong:'  ,'//4.bp.blogspot.com/-SEB6KRwJLlg/WCn7UrxGUXI/AAAAAAAAAzI/S2ht9fgSdS45eDnx6WaeAoWJ7kWvGhbsQCLcB/s1600/tolong.gif',
    ':mantap:'  ,'//4.bp.blogspot.com/-8UlOFuS0m_w/WCn7VbZ8oHI/AAAAAAAAAzQ/l8CGQLIGxNMI72YPvGHMuem4YOOSIUfjQCLcB/s1600/top.gif',
    ':troll:'  ,'//1.bp.blogspot.com/-k3-mwskFE88/WCn7VUC90CI/AAAAAAAAAzU/HKTyeQ4iN3EJ0XRzzWXWSBFheBOmzlIoQCLcB/s1600/troll.gif',
    ':udonsay:'  ,'//3.bp.blogspot.com/-Wig-1bBkp8c/WCn7Vmgk0yI/AAAAAAAAAzY/zTv_s2f0ot4zsaARrAmWWSb6WurQR5x9QCLcB/s1600/udonsay.gif',
    ':wanipiro:'  ,'//4.bp.blogspot.com/-dyr3knIjQ2E/WCn7VwAXpQI/AAAAAAAAAzc/RrxeSSF39MotrnqFvmu78Lqr_HglyR3swCLcB/s1600/wanipiro.gif',
    ':yahoo:'  ,'//2.bp.blogspot.com/-XGFhGjQUC7M/WCn7WOCCErI/AAAAAAAAAzg/Wz4ZQIgFVFMWH-zIvzztvK3vxhHVimMPACLcB/s1600/yahoo.gif',
    ':yare2:'  ,'//2.bp.blogspot.com/-buXA3Waw31o/WCn7WMnB-XI/AAAAAAAAAzk/aoSoYV7AfpA8Tq_QMMcvPcPMY8zrKuDCgCLcB/s1600/yare2.gif',
    ':ecchi:'  ,'//1.bp.blogspot.com/-s9ft70-lNbg/WCn_Ft_QBcI/AAAAAAAAA0o/yaeYFxWUlEMn-E4xiKfkqotL9nFs7x04wCLcB/s1600/simecol.gif',
    ':asoy:'  ,'//3.bp.blogspot.com/-0OB_hdMy4bA/WCn_C5lAtPI/AAAAAAAAAz4/DYqWhvHEZCISIo_SerN0QnaRx1p-LV7xwCLcB/s1600/asoy2.gif',
    ':yaoming:'  ,'//2.bp.blogspot.com/-zUyl_9rvvcU/WCoBMVyLnRI/AAAAAAAAA1c/2AjifAQACuozJWJpevOg5XuIod2mavgPgCLcB/s1600/yaoming.jpg',
    ':lapar:'  ,'//3.bp.blogspot.com/-lfnSAO9nD9A/WCoBMHJ-zTI/AAAAAAAAA1U/_1nxfaIARXYSUPxnK0_Uq9r3XaC7Ej8NACLcB/s1600/lapar.jpg',
    ':3sodok:'  ,'//4.bp.blogspot.com/-CDrE2zJtSmM/WCn_DD2R6dI/AAAAAAAAAzw/rHjIE7A9iTsQQGFAzy4EfcQXCzX1Xk_0wCLcB/s1600/3sodok.gif',
    ':anjrit:'  ,'//1.bp.blogspot.com/-iv0Y8dFH4xs/WCoBLCl8HII/AAAAAAAAA1E/bJALekAWygEU1owPM5GKGgQ0hjpoxCIywCLcB/s1600/anjrit.jpg',
    ':bahlul:'  ,'//4.bp.blogspot.com/-gYtIu2nwH4k/WCoBKx2hvjI/AAAAAAAAA08/Ef6nImGHpYUtdWOh4BEoFoukuL-K8nWiACLcB/s1600/bahlul.jpg',
    ':baygon:'  ,'//1.bp.blogspot.com/-ssy_Jr1EOHM/WCoBK8lcbjI/AAAAAAAAA1A/BUiIsT8WBdYh97sbZZtBwac0UF6mr0uowCLcB/s1600/baygon.jpg',
    ':bean:'  ,'//2.bp.blogspot.com/-emTHCbTXPKk/WCoBLc45ePI/AAAAAAAAA1I/_kckNoGT2qoFep5MkZioVRWQ6572WFC1ACLcB/s1600/bean.png',
    ':gebuk:'  ,'//4.bp.blogspot.com/-1oCcafoHNYA/WCn_DO74FMI/AAAAAAAAAz0/hZVNhcXmHx04V2SudWklNpNbdaLuxt2uwCLcB/s1600/gebuk.gif',
    ':hoho:'  ,'//3.bp.blogspot.com/-QgTl8NniPo4/WCn_Di78hxI/AAAAAAAAAz8/QSWoC6WENAIVk3LOEtfPPVthKXQJofV3QCLcB/s1600/hoho.gif',
    ':huha:'  ,'//1.bp.blogspot.com/-1GjGmBQScjQ/WCoBLvhtMxI/AAAAAAAAA1M/TAQxytxlNlo2eL81rucjNxuN3wQoiuzVACLcB/s1600/huha.jpg',
    ':jotos:'  ,'//4.bp.blogspot.com/-oTJcCepvgXo/WCn_D4vbm7I/AAAAAAAAA0E/6IfMQN0wE6kU4SI02nO_LpL_TGbvba66ACLcB/s1600/jotos.gif',
    ':keplak:'  ,'//1.bp.blogspot.com/-bpIMGa9V1_0/WCn_D0GGgAI/AAAAAAAAA0A/1H5lYJFhyA4S2UO5Lde-pQNtS3cy6e28gCLcB/s1600/keplak.gif',
    ':keplak2:'  ,'//1.bp.blogspot.com/-0f3H-UYMfhY/WCn_EeH1B5I/AAAAAAAAA0I/4QrQrgc-1vQBdRAGEZYKmFhYdzWU4cbcwCLcB/s1600/keplak2.gif',
    ':lolol:'  ,'//1.bp.blogspot.com/-ZKGBcahqMvw/WCn_ESNPvvI/AAAAAAAAA0M/SuhSY-xVjGYmBjwRHwgf1FoeHNCjKh1nACLcB/s1600/lolol.gif',
    ':maso:'  ,'//1.bp.blogspot.com/-QAYC-SEM2FY/WCn_EhOa69I/AAAAAAAAA0Q/3g0j-DxdG6oC6wPkAaLqnVqe7SVGfSqogCLcB/s1600/maso.gif',
    ':mlayu:'  ,'//1.bp.blogspot.com/-a06WqnRRwJ4/WCn_Eznp13I/AAAAAAAAA0U/cFXZG5VwsEsyk2cciwm_AKFI5bX_EShIACLcB/s1600/mlayu.gif',
    ':muter:'  ,'//4.bp.blogspot.com/-7VJqZqps6pw/WCn_FPUGVYI/AAAAAAAAA0Y/Zd1A_qFn1P8uhC_pHSWWBux_j6fqn9x1wCLcB/s1600/muter.gif',
    ':pakyu:'  ,'//1.bp.blogspot.com/-7uI08aEpRDk/WCn_FNw3IzI/AAAAAAAAA0c/VhOTw7ayYqw-RijEYNK71HgkRzjJCV2uACLcB/s1600/pakyu.gif',
    ':pare:'  ,'//3.bp.blogspot.com/-tVZQ4xIzkqM/WCoBMLMgk5I/AAAAAAAAA1Y/A3RN1tZ---YV_Q94C_R4O2OjBnyixWwzgCLcB/s1600/pare.jpg',
    ':pong:'  ,'//3.bp.blogspot.com/-0oDyp7Yhg84/WCn_FY_AvfI/AAAAAAAAA0g/jbSmne-e65Q5CEkA2nOMEgYzMg69MAJNQCLcB/s1600/pong.gif',
    ':sodok:'  ,'//4.bp.blogspot.com/-ZzQFtBKQHts/WCn_F2NffJI/AAAAAAAAA0k/zA0QZ3VP_fAQL1eXzvIgpAj7H9nc4JR-wCLcB/s1600/sodok.gif',
    ':udud:'  ,'//1.bp.blogspot.com/-K1GSfB0fwJE/WCn_GRwkuNI/AAAAAAAAA0s/jZlUU99LHzoOqCEv6N74XRCRHGU8ZUj8gCLcB/s1600/udud.gif',
    ':usap:'  ,'//3.bp.blogspot.com/-CJ0H6oZ1cNY/WCn_GR0-_tI/AAAAAAAAA0w/NFI_DJ0zW781SfNZQUKVKF5mW0bzhi0IQCLcB/s1600/usap.gif',
    ':yaosay:'  ,'//4.bp.blogspot.com/-6D0Wt4JxkYQ/WCoBMgKpUSI/AAAAAAAAA1g/eF-I2SFhgEQ8asPiyeSFCp1b8BAZS7CqACLcB/s1600/yaosay.jpg',
    ':waduh:'  ,'//1.bp.blogspot.com/-Vdlbz3vfLJY/WCoBLr-4cMI/AAAAAAAAA1Q/dGj7UTZ2fOEXiT6P6RrUFqzexqaWulYYQCLcB/s1600/kiai.jpg',
    ];
    
                        
                           //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 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))  
    var avatar=$("#comments");
    avatar.find('.comment_avatar img').each(function() {
    var ava = $(this).attr('src');
    $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s100-c/"));
    });      
    //]]>
  </script>
</b:includable>

2. Kedua Cari Kode lagi yang seperti gambar dibawah ini dan ganti dengan kode yang sudah saya siapkan dibawah gambar ini

Lihat Gambar

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
  <div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p>
        <data:blogCommentMessage/>
      </p>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
          <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
      </b:if>
      <b:else/>
      <div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
      <span class='small-button'>
      <span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/> Emoticon</a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/> Emoticon</a></span>
      </span>
      </p>
      <div id='emo-box' style='display:none'>
      <div class='comment_emo_list'/>
      </div>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>
      </b:if>
      </div>
    </b:if>
    </div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);
    </script>
  </div>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;
  
  // <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }
  
      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }
  
      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
  
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };
  
      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };
  
      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;
  
      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox.parentNode, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };
  
      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }
  
      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };
  
      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };
  
      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
  // ]]>
</script>
</b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h3><b:if cond='data:post.numComments == 0'> 0 Response to &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> 1 Response to &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Comments </b:if></h3>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

3. Ketiga Ganti CSS Komentar anda dengan CSS dibawah ini [Cari di </style>]

/* CSS Emoticon Meme By Arleth98 */
#comments2{clear:both;padding:10px 0;margin-top:0;font-family:Roboto,Arial,sans-serif}#comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd}#comment_block{padding-top:25px}.comment_header{margin-left:5px}h3#total-comments{display:none}.comment_avatar{height:48px;width:48px;background:url(//2.bp.blogspot.com/-KjVxDap0Bzs/Uc7Jfm_9VWI/AAAAAAAAEqs/jD56hYNIm88/s48/anon48.gif) center center no-repeat #f0f0f0;float:left;margin-top:-1px;margin-right:10px;margin-left:-5px;overflow:hidden;border-radius:3px}.comment_admin .comment_author_flag,.comment_reply,a.comment-delete{border-radius:3px;text-decoration:none}.comment_name{line-height:19.5px;display:inline-block;text-decoration:none;position:relative;margin-top:-3px}.comment_name a{text-decoration:none;font-weight:500}.comment_name a:hover{color:#0088b2;text-decoration:none}.comment_service{margin-right:10px;margin-top:2px;position:relative;line-height:1em}.comment_body p{font-size:16px;color:#444;line-height:1.3em;font-weight:300;margin:5px 0}.comment_body p img{vertical-align:middle}.comment_body{margin:-12px 0 10px 47px;padding:0 10px 10px;position:relative;z-index:1}.comment_date{color:#999;font-style:italic;font-size:11px;line-height:1.2em;cursor:pointer;font-weight:400;margin-right:20px}.comment-set{margin-bottom:30px}.comment_child .comment_body{margin-top:-5px;margin-bottom:10px;margin-left:39px}.comment_child .comment_wrap{padding-left:50px}.comment_reply{cursor:pointer;color:#f1f1f1!important;font-size:12px;font-weight:500;margin-top:5px;margin-right:10px;padding:3px 5px;float:left;background:#666}.comment_reply:hover,a.comment-delete:hover{text-decoration:none;background:#888!important}.unneeded-paging-control{display:none}.comment_reply_form{padding:0 0 0 48px}.comment_reply_form .comment-form{width:100%}.comment_reply,.comment_service a{display:inline-block}.comment_avatar *{max-width:1000%!important;display:block;max-height:1000%!important;width:48px!important;height:48px!important;margin-right:10px}.comment-form,.comment_img,.comment_youtube{max-width:100%!important}.comment_child .comment_avatar,.comment_child .comment_avatar *{width:40px!important;height:40px!important;float:left;margin-right:10px}.comment_form{margin-top:-20px}.comment_form a{color:#444;text-decoration:none;font-size:16px;font-weight:700}.comment_form a:hover{color:#fff}.comment_author_flag{display:none}.comment_admin .comment_author_flag{background-color:rgba(34,59,74,.3);display:inline-block;color:#fff;font-family:arial;font-size:10px;font-weight:700;padding:2px 5px;line-height:1em;position:absolute;top:2px;right:-51px}a.comment-delete{color:#f1f1f1!important;font-size:12px;font-weight:500;margin:5px 0 0;padding:3px 5px;float:left;background:#666}#comment-editor{width:100%!important;background:url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) 50% 30% no-repeat #fff;margin-top:10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.blogger-box,.comment-form p,.disqus-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.comment-form{margin-top:25px!important}.comment_emo_list .item{display:inline-block;text-align:center;height:auto;margin:10px}.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}.comment_youtube{width:400px;height:225px;display:block;margin:auto}.comment-form p{background:#666;padding:10px 10px 5px;margin:5px 0;color:#eee;font-weight:300;font-size:16px;font-family:Roboto,sans-serif;line-height:1.3em;width:100%;border-radius:3px;position:relative;box-sizing:border-box}.comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent}.deleted-comment{display:block;color:#efefef;font:italic 13px Arial;margin-top:-10px;background:#db6161;padding:10px}.blogger-bar,.comment-text,.disqus-bar{font-family:Roboto,Arial,sans-serif;font-weight:500;color:#555}iframe.blogger-iframe-colorize{max-height:250px}.small-button a{color:#f1f1f1!important;background:#333;padding:2px 3px;font-size:12px}.small-button a:hover{color:#fff!important}.blogger-bar,.disqus-bar{display:inline;float:right;padding:5px 10px;cursor:pointer;background:#eee}.blogger-bar,.disqus-bar{margin-left:5px;margin-top:20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:0}.blogger-box,.disqus-box{width:100%;padding:0;border-top:1px solid #ddd;box-sizing:border-box}.blogger-box{display:none}.fb-comments,.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important}.fb-comments{padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff}.comment-text{display:inline;float:left;padding:5px 10px 5px 0;margin-top:20px}.comment-text:after{content:'\f061';font-family:FontAwesome;color:#555;margin-left:5px}

Jika Sudah Save Template, dan lihat hasilnya. Jika Tidak Berhasil berarti ada yang terlewat jadi silahkan lakukan lagi dari awal.
Kalau sudah berhasil tetapi disaat klik, Tidak tampil gambar emoticonnya, Silahkan sesuaikan Dengan Gambar berikut

Lihat Gambar

Sekian tutorial Cara Membuat Comment Form Emoticon Seperti Kurogaze versi Blogger semoga bermanfaat.