Disini Surganya Ilmu Pengetahuan Tentang Komputer dan Blogging

Cara Membuat Komentar Bertingkat Seperti Wordpress

Siapa sih yang tidak menginginkan tampilan blog nya menjadi keren? Semua para blogger pasti menginginkan nya tapi keren dengan terlalu banyak nya widget atau pun pernak pernik yang tidak penting itu sangat menganggu pembaca dan membuat loading blog menjadi lambat, yang bisa membuat pengunjung menjadi kabur. Jika kita harus bisa memperindah nya tanpa harus membuat mata pengunjung silau melihat nya

Cara Membuat Komentar Bertingkat Seperti Wordpress

Jadi usahakan buat seminimal mungkin dalam menambahkan widget dan saran saya desain lah blog anda sesimple mungkin. Bukan hanya tampilah pada postingan atau header saja yang harus diperhatikan tapi tampilan pada komentar juga harus diperhatikan, sesuai dengan judul Cara Membuat Komentar Bertingkat Seperti Wordpress ini juga akan membuat blog anda terlihat keren.

Oke, langsung saja ke tutorial Cara Membuat Komentar Bertingkat Seperti Wordpress.

1. Pergi terlebih dahulu ke www.blogger.com
2. Lalu pilih blog anda.
3. Pilih Template > Edit HTML
4. Cari kode <b:include data='post' name='threaded_comments'/> lalu ganti semua kode ini dengan
<b:include data='post' name='comments'/>
jika tidak di temukan lanjut ke tahap selanjutnya.

5. Selanjutnya cari kode <b:includable id='comments' var='post'> lalu ganti semua kode setelah kode tadi dengan kode dibawah ini sampai dengan penutup </b:includable>
<style type='text/css'>
#comments {}
#comments h3 {margin-bottom:15px;font-size:18px;}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGnOAZR5HmugLqOzmSTcOPbPePzPzNgUGZf3jk_2qxJ1ct4OhMF8XjNVIw6eHcLEqSpy-uCXYlO5TnKMUen4rzv5MLyAJKLBKjFnjnNh20oNTnRISeiPiistwyZ7HjuACEh0qtnccZzwK_/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
.comment_admin .comment_name  {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#ECF3F7;
}
.comment_author_flag{display:none}
.comment_admin .comment_author_flag{display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPfBBjDPkk6ANVot2p7D5ahk8HB7HZ8bouWpIw1gZ2Q9hFBrWszl1vl8c66LmydHfDkAK7gG-4rK_3lzF5nr822hyorSZI5OoHhxv_jDoO6Mimve1iFznyRB9luLJ4KQEWB3rPa63oQE/s1600/author.png)no-repeat;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin:-22px 360px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#f0f0f0;
padding:10px;
font-size:13px;
font-weight:bold;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:2px;
}
.comment_body{
margin-top:-72px;
margin-left:66px;
background:#fcfcfc;
border:1px solid #ddd;
padding:10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #f1f1f1;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
}
.comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
.comment_child .comment_wrap {padding-left: 7%;}
.comment_reply {
display: inline-block;
margin-left:-5px;
padding: 1px 11px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:100%!important}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment-form p {
background: white;
padding: 7px 10px 7px 10px;
margin: 5px 0 5px 0;
border: 1px solid #C3D7E2;
color: #888;
font-size: 13px;
line-height: 20px;
width:94%;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.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 {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_N7dzesNpZyqL8Z5jws3PiNOi4bIB280QakfO8G3BVAdQWfS36h3-FE00D4QrI1YUQQS3zXLFTTHTnjS0W2b1wzExH-qugWMXT9ML7QelqvmpeWOjOTN-AHZI93HBsvm21t0mbbMjmag/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment-delete img{float:right;margin-left:10px;}
</style>

<div class='comments' id='comments'>
    <a name='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'><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='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>                                                                                    
     <a expr:name='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_header'>
                               <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <data:comment.authorAvatarImage/>
                                 </div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>
     </div>
                         
     <div class='clear'/>
    </div>
         
    <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <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'>
         <i class='comment_author_flag'></i>
      </b:if>      
                  <span class='comment_service'>
                      <b:include data='comment' name='commentDeleteIcon'/>
      <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'>                   <data:comment.timestamp/></abbr></span>
  </span></div>
     <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 class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
           
    <div class='comment_child'/>
    <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
    <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'>
     <h3 id='comment-post-message'><data:postCommentMsg/></h3>
      <div class='comment_emo_list'/>                                                                                              
       <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><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 = 6;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = true;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = true;//Auto replace link image,  ketik "false" untuk mendisable.
                                Replace_Force_Tag = true;//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 = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRCEsrwr8TMefWoBRoejBTs4Vlfr7mDmsl5C8XELHgDeEuH_bUSE5NFK-novFtiKavu7jMrGTKFGaEQvSrnUewT4WjNUGYel2oK85MsUTbb_5aczDTIzo8KHXPJP76LBCxj0eHTRVmAJk/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMx0EPrxcfaANSYGQ4UYoCsc_8YLiUlYghWEhnU4aP_MBRksC2BJ70TCtfYbJF_G3esgGI0xKHmYsoLfO8sm7DS5A24c_f1QCkoegpbQKXTT64s0-YHhWzEVz9jClYXYGpb1P3T5V5h0/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3gU68CUO_1lkNaHw3K8qJRxbMqdMXcTF1rLqB22DJ1iY1Cy0gPrIH7VSw7Z8cnPAlm4b_M3Jqvjo2WTzS3jtQp65-ni_iZ_dGqEhH9xci-jJ9DKsjtotlmR8Aq75lgWTvZDynMx1vdhQ/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqPjP3257Oz-r8m60v6wIpUchJXswvKIMlH8C0hcwbfDX1RwanH6cGjIpMiSQX5McQU4SekY3O9aZJhI1DjVtBM3tRPzZfbl9wjpC3ZPqnSlOLVC0zshZcRmp6O23Sa5UFXd_nufGQtRM/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjUZ7BLvH9K7btyBjF-rRggtSESc2R-6um6oTCEowj6RbvOF_TtEzoEqe-_xnU52iENB5UruuByD54-gXxWqrLO_0oO9ffcER-JvOcZ3_9cTHaIqVXJF_bXKfYYatKY-OgEFLotrUK6s/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgGrt_l7sTNFHYiB0EWhTjlbyRdByWP9BqgX-5UN8y5rxnR4hwoIkT5fg5VP0IuJ91vQJzwdFqQS3S7gsVVOY_kCMmJVcH_KrVkkWv2ZSogoHKGVNh9i6go4VwBWs0bKzqcX2MUyBSmE/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGbqsW_361FzD3W8XQJ-ZU_6veknZpse6dVF5NvwUpGl24vTdQ6RS0du4mIukK4FoQXjLxDfpfpueDhFqS7H7oFyxPeIXQAYYrIktT-K6XEcBPOU-f8sVj2m0Lz0iO0hxKZ_bhyphenhyphenMOA4k4/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGKO3JkNpYX1lsA37n5bWrA9hSZAlX683KLLqcgflAmv5-3opqr150setDHhKgsxg_eXkzGWQ_6LsJrtHO4OWNKwi9Mt4aMFqr03iP-Qtm8OGzfaf6S4VFt1wywYS6IxOnpnxAtAHzds/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMZUpE5kMTQ9DBw-bmRbbU38wVpbgoOH60dvwqr3jSRxOe8FdWKSkF6FTE8FF_N6uMDK7XWMRcEJCdfPzLGLXY5TjBEObPERr_kVVZrAj6tMwQHH9IznA4-GwQtA_gSJhUyZVCyXmlaE/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_UZgg4AkyEqsWzYvRW518RoJYbdYBedl-bGiPwGO7mmP-9S0AGHa5zMtMTA7PuG-wzAi25LfPZVO0PrRWCYIkQ-s7EOpogcgidQgfQJU-oe1wDF2MpxZorGQS_oFrfU8851wT7VRkIw/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AOEP_8kl_39NOZBS27kT-zvqQssMg9WJMKkVOeQ5hhmVuK73tcU8h6DLbrZPQaNAdEBqvHsIIVOHVNt1IC3dRtsPk8T7wgo6iU_skfqgKW2PE7JIysWLyNSMRTzWSvVazTNLPC6duPM/s1600/thumbsup.gif',
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEc7RlMpbk_uSZO9RqVQRB9m5GE4jeYli1X80AOMmlinVYK0vnrdfJa1qFmR3XZbfbFjiDsAR8raTazRPkgqoHSAmiFQFZbxLt0sezz1-TZ1kDx5T8zMvo4SlHrqxSUjV5APKbTBjEzRQ/s1600/wee.gif',    
        ];
     
                             
                                //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,{}))      
             
       //]]>
         </script>
6. Jika sudah simpan, gimana kode nya panjang sekali bukan.

Cara Membuat Pesan Komentar

Cara Membuat Komentar Bertingkat Seperti Wordpress

1. Masih di blogger.
2. Pilih Setelah > Pos dan Komentar > Klik Tambah pada Pesan Formulir Komentar.
3. Klik Simpan yang ada di pojok kanan atas.
4. Untuk memodifikasi nya silahkan cari css ini di template.
.comment-form p {
background: white;
padding: 7px 10px 7px 10px;
margin: 5px 0 5px 0;
border: 1px solid #C3D7E2;
color: #888;
font-size: 13px;
line-height: 20px;
width:94%;
}
Oke, itu dia Cara Membuat Komentar Bertingkat Seperti Wordpress Bagiamana masih bingung? Silahkan bertanya dikomentar. Terima kasih saya ucapkan karena sudah mau berkunjung di blog saya yang sederhana ini.
Next
« Prev Post
Previous
Next Post »

43 komentar

lumayan panjang juga ya scritnya...tapi cara pemasanganya cukup mudah untuk mendapatkan komentar bertingkat di blogspot...ok makasih ya tutorialnya. salam sahabat blogger.

Balas

aman pertamax ane...yang bawah nganti solar aja...heeee

Balas

kolom komentar yang bertingkat jadi keliatan lebih menarik blognya... kebetulan blog saya sudah bawaan dari sananya... |o

Balas

Alhamdulillah, template blogku sudah bawaannya dari sana..

btw,, panjang sekali,ya, scriptnya..

Balas

wow, panjangnya mas.. kan repot tuh kalo harus copasnya..
Kenapa ngk make tag blockquote double ckic aja, biar simple gitu copy nya..

Balas

panjang sekali kodenya. kebetulan kometar sayah masih segaris. coba saya. copas dulu. terimakasih kang

Balas

wsduh merah ga jadi ah kang. bair aja kalo gitu

Balas

Scripnya kayak truk gandeng..heheh..
Untung tinggal copas :D

Balas

sepertinya yang saya sudah seperti itu. harus berterimakasih sama siapa ya. pada pembuatnya kali ya

Balas

lain kali saya coba mas. lumayan nih buat mempercantik komentar blog saya.

ini memberatkan nggk mas ?

Balas

gk nambah waktu load gk kang ?

Balas

si mbah pertamax melulu nih, kasian yang lain mbah. hehe :-bd

Balas

iya tu gan, lumayan nambah keren blog

Balas

kolom komen jadi lebih interaktif dan menarik

Balas

iya gan panjang bnget sampai pusing kepala saya liat nya, hehe

Balas

wah makasih saran nya gan, saya belum tau bikin nya, maklum masih belajar.. hehe :-d

Balas

iya gan, silahkan saja. :D

Balas

ada yang salah tu gan, coba di lihat lagi di mana salah nya. :)

Balas

bener gan, silahkan di copas gan.. :D

Balas

berterima kasih pada yang maha kuasa gan, hehe :D

Balas

seperti nya tidak gan. cuma nambah loading blog sedikit aja.. ^_^

Balas

nambah hanya sedikit gan.. :D

Balas

bener gan, mempercantik komentar blog... :D

Balas

Sangat cantik dan elegan kolom komentarnya mas Akram, walaupun scriptnya lumayan panjang tapi mudah diterapkan langsung di blog:-d

Balas

Alhamdulillah blog gw udh pasang ini gan :-d

Balas

hehe bagi agan lumayan panjang, bagi saya panjang buanget @@,

Balas

iya gan, keren deh kalo udah pasang :-d

Balas

mudah ya caranya |o| :-d
kalo saya mah udah bawaan dari tamplate nya komentar bertingkat =D

Balas

siip deh mba, makasih udah berkunjung :D

Balas

ternyata mudah sekali ya mas cara membuat komentar bertingkat, nanti kapan2 saya coba ah di blog kalau cocok sama blog saya... makasih ya mas

Balas

silhakan gan, makasih udah berkunjung. :D

Balas

iya gan dari pada enggak sama sekali hehe |o|

Balas

hehe nice share gan, komentar di blog ane udah bertingkat :D

Balas

hehe iya gan . thanks udh mampir.. :D

Balas

script cssnya ga nemu.. mungkin beda template, ya? tapi, saya bookmark dulu, kapan-kapan cari yang mirip-mirip.. terima kasih..

Balas

script yang mana gan, yang gk ketemu?

Balas

Asik nih kang komentar bertingkat yang biasanya hanya bisa dipasang dan dilihat di WP, sekarang setelah ada tutorial ini bisa juga di pasang di blogspot ya mang?

Balas

Iya kang bener banget, makasih udah mampir.. :-d

Balas

blog nya keren euy,
untuk membuat komentar seperti ini ternyata cukup mudah yah hehe.
thanks min :)

Balas

Mas mau nanya, saya pingin komentar di blogspot itu se interaktif spt di wordpress. Dengan saya mengaplikasikan ini, apakah kedepannya ketika ada yang komen di blog saya, kemudian saya komen dia balik....dia bakal dapat notifikasi komen saya tanpa dia harus memberi centang di kolom 'notify me'? makasih :)

Balas

Apa pendapat mu tentang ini?
>Berkomentarlah dengan baik, sesuai topik, dan jangan nyepam..
>>Sorry kalau balas nya telat..