Membuat Style Komentar Ala Forum dengan Emoji di Blog

Membuat Style Komentar Ala Forum dengan Emoji di Blog

Rio Ilham Hadi

28 May 2015

Halo sobat Blanter semua... Sekarang saya akan membagikan design komentar yang keren banget nih, mirip sama esoTalk gitu deh, simple tapi keren. Sebelumnya saya sudah memposting template esoTalk blogger version. Nah style komentar kali ini mirip dengan design komentar pada template tersebut.

Style komentar kali ini sangat modern, simple dan elegant, pokoknya keren deh kalau di pasang di blog, apalagi style komentar kali ini di lengkapi dengan emoticon twitter emoji yang keren-keren banget deh..

Sudah Lihat demonya belum? Jika belum klik tombol dibawah ini.

Demo

Nah keren bukan? (Keren lah *Pastinya*)
Saat ini saya sedang terinspirasi sama design esoTalk, dari themenya sampai style komentarnya keren semua.

Nah jika sobat ingin memasang atau menggunakan Style komentar ini ikuti tutorialnya dibawah ini.

Langkah pertama yaitu dengan mencari kode dibawah ini :

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

Jika tidak ketemu coba cari kodenya seperti ini <b:includable id='comments' var='post'>lalu disampingnya ada ...</b:includable> lalu hapus kode tersebut ditambah dengan kode diatas tadi...

Lalu ganti kode yang dihapus tadi dengan kode dibawah ini :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>
               
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><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>
         
    <div class='comment_body'>
<div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
<div class='comment_king kingz'>
     <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>
<span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/>
                </a></span>
<div class='comment_author_flag'>Author</div>
</div>
<span class='comment_service'>
<b:include data='comment' name='commentDeleteIcon'/>
<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='Reply'><i class='fa fa-reply'/></a>
  </span>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>

                        <div class='clear'/>
                    </b:if>                                    
      </div></div>                      
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
           
    <div class='comment_child'/>
    <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>              
    </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' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><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' expr:title='data:postCommentMsg'><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' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' 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 = 3;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
        Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
      
        //Pengaturan Emoticon
        Emo_List = [
':)'   ,'http://twemoji.maxcdn.com/36x36/1f600.png',
':('   ,'http://twemoji.maxcdn.com/36x36/1f615.png',
'hihi'  ,'http://twemoji.maxcdn.com/36x36/1f601.png',
':-)'   ,'http://twemoji.maxcdn.com/36x36/1f60f.png',
':D'   ,'http://twemoji.maxcdn.com/36x36/1f603.png',
'=D'   ,'http://twemoji.maxcdn.com/36x36/1f62c.png',
':-d'   ,'http://twemoji.maxcdn.com/36x36/1f604.png',
';('   ,'http://twemoji.maxcdn.com/36x36/1f61e.png',
';-('   ,'http://twemoji.maxcdn.com/36x36/1f62d.png',
'@-)'   ,'http://twemoji.maxcdn.com/36x36/1f616.png',
':P'   ,'http://twemoji.maxcdn.com/36x36/1f61c.png',
':o' ,'http://twemoji.maxcdn.com/36x36/1f62e.png',     
':&gt;)','http://twemoji.maxcdn.com/36x36/1f606.png',     
'(o)' ,'http://twemoji.maxcdn.com/36x36/1f609.png',     
'[-(' ,'http://twemoji.maxcdn.com/36x36/1f614.png',     
':-?' ,'http://twemoji.maxcdn.com/36x36/2753.png', 
'(p)' ,'http://twemoji.maxcdn.com/36x36/1f619.png', 
':-s' ,'http://twemoji.maxcdn.com/36x36/1f625.png',
'(m)' ,'http://twemoji.maxcdn.com/36x36/1f620.png',
'8-)' ,'http://twemoji.maxcdn.com/36x36/1f60e.png',
':-t' ,'http://twemoji.maxcdn.com/36x36/1f624.png',
':-b' ,'http://twemoji.maxcdn.com/36x36/1f634.png',
'b-(' ,'http://twemoji.maxcdn.com/36x36/1f635.png',
':-#' ,'http://twemoji.maxcdn.com/36x36/1f637.png',
'=p~' ,'http://twemoji.maxcdn.com/36x36/1f35c.png',
'$-)' ,'http://twemoji.maxcdn.com/36x36/1f4b5.png',
'(y)' ,'http://twemoji.maxcdn.com/36x36/1f44d.png',
'(f)' ,'http://twemoji.maxcdn.com/36x36/1f33a.png',
'x-)' ,'http://twemoji.maxcdn.com/36x36/1f60d.png',
'(k)' ,'http://twemoji.maxcdn.com/36x36/1f496.png',
'(h)' ,'http://twemoji.maxcdn.com/36x36/1f44f.png',
'(c)' ,'http://twemoji.maxcdn.com/36x36/2615.png',
'cheer' ,'http://twemoji.maxcdn.com/36x36/1f378.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 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>

Langkah selanjutnya, cari kode dibawah ini. (Hampir sama dengan langkah diatas tadi)

<b:includable id='threaded-comment-form' var='post'>...</b:includable>

Lalu ganti dengan kode dibawah ini :

<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;http://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;http://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/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;' title='Show Conversion Box'>Conversion</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;inline-block&apos;' title='Hide Conversion Box'>Conversion</a></span>
</span>
<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='konversi-box'>
    <textarea id='codes' placeholder='Write/paste the code here then click &apos;Conversion&apos;' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Conversion</button>
<button onclick='cdClear();'>Clean</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
</div>
<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;http://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;http://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>
</div>
    <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>

Nah langkah terakhir dengan menambahkan CSS (Style), letakan kode dibawah ini tepat di atas ]]></b:skin> atau </style>

/* CSS Comments */
#comments{background:#fff;clear:both;margin:20px auto 0;line-height:1em;padding:20px;}
#comments h3{background:#fff;display:none;line-height:20px;margin-bottom:20px;margin-top:0;font-family:'Open Sans',sans-serif;font-size:14px;position:absolute;color:#333;font-weight:700;text-transform:uppercase;padding:10px 20px 10px 50px;border:1px solid #eaeaea;}
#comments h3:before {font-family:fontawesome;content:"\f086";margin-right:10px;font-size:20px;padding:10px 15px;position:absolute;left:0;top:0;}
.comment_avatar_wrap{border-radius:10%;width:46px;height:46px;border:none;background:none;text-align:center;padding:0;overflow:hidden;}
#comments .comment_avatar img {border-radius:100%;width:70px;height:70px;max-width:70px;max-height: 70px;float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jK384WFKfo1-AdnwyN1fmG4G0d9nykXcEvEcLWRnV3xpMwJV9mC8MbkcSi0Dz3iWk_hnLb-2XoPS97gmOK6tu5uDYhko4zIWAr4ORzcQSrY7qquH29-4yHX7i2KNGVYOcdhd9Rb2A0MX/s1600/backcomments.png) no-repeat;overflow:hidden;}
.comment_avatar img{border-radius:10%;width:46px;height:46px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jK384WFKfo1-AdnwyN1fmG4G0d9nykXcEvEcLWRnV3xpMwJV9mC8MbkcSi0Dz3iWk_hnLb-2XoPS97gmOK6tu5uDYhko4zIWAr4ORzcQSrY7qquH29-4yHX7i2KNGVYOcdhd9Rb2A0MX/s1600/backcomments.png) no-repeat;overflow:hidden;}
.comment_name a{font-family:'Open Sans',sans-serif;font-weight:700;font-size:15px;padding:5px 0;color:#333;text-decoration:none}
.comment_child .comment_name a{color:#333;}
.comment_child .comment_name a:hover {color:#07ACEC;}
.comment_admin .comment_name{background:#fff;padding:0 20px 0 15px;left:5px;top:10px;display:inline;font-weight:700;font-size:16px;font-family:'Open Sans',sans-serif;text-decoration:none;border-radius:3px;}
.comment_admin .comment_date{font-weight:300;font-size:12px;}
.comment_name{font-size:16px;font-family:'Open Sans',sans-serif;font-weight:700;padding:0 20px 0 20px;position:absolute;left:5px;top:10px;display:inline;line-height:35px;transition:all .3s ease-out;}
.comment_name:hover,.comment_name a:hover,.comment_admin .comment_name a:hover,.comment_admin .comment_name:hover{color:#07ACEC;}
.comment_service{position:absolute;top:-35px;right:0;z-index:9;}
.item-control {display:block;}
.comment_date a{font-size:11px;font-weight:400;text-transform:none;text-decoration:initial;
color:#aaa!important;text-align:center;padding:1px 6px;opacity:0.9;transition:all .3s ease-out;}
.comment_date a:hover{color:#07ACEC!important;}
.comment-delete{position:absolute;display:inline-block;z-index:1;top:40px;right:0;
color:#aaa!important;text-align:center;font-family:'Open Sans';font-size:11px;padding:2px 6px;opacity:0.9;transition:all .3s ease-out;}
.comment-delete:hover{color:#07ACEC!important;}
.comment_body{margin:5px 0;padding:0;position:relative;}
.comment_king{margin:20px 0;margin-left:90px;padding:0;position:relative;border:1px solid #eee}
.comment_king:before, .comment_king:after {content: " ";border-top-color: transparent !important;border-bottom-color: transparent !important;border-left-color: transparent !important;border-right-color: #fff;border-style: solid;border-width: 8px;height: 0;width: 0;left: -16px;top: 20px;position: absolute;}
.kingz:before {border-color: #9E9E9E;}
.comment_body p{line-height:1.6em;color:#444;font-size:14px;font-family:'Open Sans',Helvetica,Arial,sans-serif;word-wrap:break-word;padding:20px;padding-top:30px;position:relative;transition:all .3s ease-out;}
.comment_child .comment_body p{color:#444;}
.comment_body p img{vertical-align:middle;margin:0 5px;}
.comment_inner{padding-bottom:5px;margin:5px 0}
.comment_child .comment_wrap{padding-left:7%}
.comment_child .comment_body{margin-top:-15px;}
.comment_reply{display:inline-block;color:#555!important;text-align:center;
font-family:'Open Sans';font-size:11px;margin:0;padding:4px 6px 6px 6px;opacity:0.9;border-radius:2px;position:absolute;top:40px;right:25px;}
.comment_reply:hover{text-decoration:none!important;color:#222!important;}
.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0;}
.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#444}
#comment-editor{width:103%!important;background:url('http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif') no-repeat 50% 25%;position:relative;margin-left:-8px;margin-top:-15px}
.comment-form p{position:relative;background:#fff;color:#333;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:hover{border-bottom-color:#ddd;}
.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:#cdd5b7;border-width:13px;margin-left:-13px;transition:all .3s ease-out;}
.comment-form p:hover:before{border-top-color:#b9c1a3;}
.comment_reply_form{padding:0 0 0 7%}
.comment_reply_form .comment-form{width:100%}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
img.comment_emo { margin : 0; padding : 0; vertical-align : middle; width : 25px;height : 25px;}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-left:10px;clear:both}
.unneeded-paging-control,.comment_author_flag{display:none}
.comment_admin .comment_author_flag {display:inline-block;font-size:11px;color:#fff;background:#22a1c4;padding:5px;text-align:center;border-radius:4px;line-height:normal;}
.comment_child .comment_admin .comment_author_flag {color:#fff;}
.spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px;
display:inline-block;padding:10px 15px!important;}
.deleted-comment{display:block;color:#fff;word-wrap:break-word;background:#07A;margin-top:10px;padding:10px;font-size:14px; font-family:'Open Sans',Helvetica,Arial,sans-serif;opacity:.99!important}
iframe{border:none;overflow:hidden}
.paging-control-container{text-align:center;margin:0 0 0 25%;}
.paging-control-container a{text-align:center;margin:0 auto;background:#444;padding:5px 10px;
color:#fff;transition:all .3s ease-out}
.paging-control-container a:hover{background:#e6ae48;color:#fff;}
.comment_header {padding:0;}
.comment_child .comment_header {padding:0;}
#konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}
#konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:none;width:100%;height:200px;display:block;background-color:#333;color:#aaa;font:normal 12px 'Courier New',Monospace;margin:7px 0 10px;padding:8px;box-shadow:inset 0 0 0 1px #ddd;transition:all 0.5s linear;}
#codes:focus{background-color:#303030;color:#aaa;border:none;outline:none;transition:all 0.3s linear;}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{border:none;font-size:12px;font-family:'Open Sans';font-weight:400;padding:4px 10px;text-decoration:none;background:#eee;color:#aaa;display:inline-block;transition:initial;cursor:pointer;border:0;}
button:hover{background:#aaa;color:#fff;}
button:active{background:#aaa;color:#fff;}
button[disabled],button[disabled]:active{color:#fff;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}
.small-button a,.small-button1 a {font-size:12px;cursor:pointer;font-weight:700;margin:10px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;color:#fff;padding:4px 10px;cursor:pointer;border-radius:2px;transition: all 0.3s ease-out;}
.small-button a {background-color:#22a1c4;transition: all 0.3s ease-out;}
.small-button1 a {background-color:#22a1c4;transition: all 0.3s ease-out;}
.small-button:hover a {background-color:#1D7891;color:#fff;}
.small-button1:hover a {background-color:#1D7891;color:#fff;}
span.small-button,span.small-button1 {text-align:left;display:inline-block;}

@media only screen and (max-width:480px){
.comments .comment-block, .comments .comments-content .inline-thread {
padding:10px !important;}
.comment .comment-thread.inline-thread .comment {margin: 0 0 0 0 !important;}
.comment_admin .comment_author_flag {right:0;top:-90px!important;left:50px;position:absolute;}
.comment_king {margin-left:1px}
#comments .comment_avatar img {float:none}}

@media screen and (max-width:320px){
#comments .comment_avatar img {float:none}
.comment_admin .comment_author_flag {right:0;top:-90px!important;left:50px;position:absolute}
.comment_date {display:none}
.comment_king {margin-left:1px}}

Note : Agar style komentar tidak bentrok, hapus style komentar yang lama.

Jika Tips diatas ada yang tidak sobat mengerti, silahkan berkomentar agar saya bisa membantu dalam pemasangan Style komentar tersebut.

Jika langkah-langkah tersebut tidak berhasil (berantakan) silahkan ikuti tutorial langkah pertama pada link berikut.

Semoga Tutorial "Membuat Style Komentar ala Forum dengan emoji" ini bermanfaat...

Share This