Inside Threaded Comments

Inside Threaded Comments - Masih dalam Hack Komentar, kini saya persembahkan Inside Threaded Comments. Hack komentar ini bukan threaded comment bawaan Blogger, akan tetapi sistem komentar yang dimodifikasi sehingga menjadi beberapa tingkat.

Dari segi desain, kekurangan threaded comment blogger hanya bisa mencapai 2 tingkatan saja. Bagi Anda yang menginginkan sistem Komentar seperti WordPress, silahkan terapkan sistem komentar ini di blog Anda.

Demo

Cara Pemasangan VinaLuv Rulers

1. Backup terlebih dahulu template untuk menghindari kesalahan
2. Pada Dashbor kilik Template --> Edit HTML --> Lanjutkan
3. Centang Expand Template Widget
4. Cari kode <b:include data='post' name='threaded_comments'/>, ganti semua dengan :

<b:include data='post' name='comments'/>

5. Simpan kode ini diatas ]]></b:skin>

.comment_wrap {
background: #FFF;
padding: 10px;
border: 1px solid #CCC;
-moz-box-shadow: inset 0 0 10px #CCC;
-webkit-box-shadow: inset 0 0 10px #CCC;
box-shadow: inset 0 0 10px #EEE;
margin: 10px 0 0 0;
}
#comments {
clear: both;
}
#comments h3{
font-size:18px;
margin-top:15px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 50px;
height: 50px;
max-width:50px;
max-height:50px;
padding: 0 10px 0 0;
border-right: 1px solid #DDD;
}
#comments .avatar-image-container img {
width: 50px;
height: 50px;
max-width: 50px;
max-height: 50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-6zSLV6uftDHzcs2sgTEWc1Yy6OXOn087cp4eA3n4MOhD3yeM5sx0Ztbw_MKdatWySv3IUSbyRCzseDua0D_Y1dKr-nnAL8nOk-_4mcLVi2kkw7PrDsbUK-DB9z0Z44CWxDtq07eDZc/s1600/anonymous.jpg) no-repeat;
}
.comment_name{
font-weight: bold;
padding: 0;
font-size: 14px;
text-decoration: none;
}
.comment_name a {
font-weight: bold;
padding:0;
font-size: 14px;
text-decoration: none;
}
.comment_date {color: #BBB;}
.comment_body p {
line-height: 1.5em;
margin: 1em 0 0 0;
color: #666;
word-wrap:break-word;
}
.comment_inner {
word-wrap: break-word;
}
.comment_child .comment_wrap {padding-left: 10px;}
.comment_reply {
font-size: 10px;
font-weight:bold;
text-transform: uppercase;
margin-left:5px;
margin-right:5px;
}
.comment_admin .avatar-image-container {border-right: 3px solid #308D9B!important;}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!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_reply_form {
padding: 0 0 0 20px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo {
vertical-align: middle;
margin: -0.3em 0 0 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 {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_service{
margin-top:5px;
font-size:10px;
}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}

supaya tampilan tidak ngaco, hapus dulu kode yang diawali #comments atau .comment

6. Ganti kode antara <b:includable id='comments' var='post'> dan </b:includable>, dengan kode ini :

<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'>
               <data:comment.authorAvatarImage/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>   
              </div>  
         
              <div class='comment_service'>
               <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'><data:comment.timestamp/></abbr></span>
               <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)'>Reply</a> 
               <b:include data='comment' name='commentDeleteIcon'/> 
              </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>
              </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 = 5;//Kedalaman threaded comment
        Display_Emo = true;//Tampilkan emoticon? ganti "false" apabila tidak ditampilkan
        Replace_Youtube_Link = true;//Menampilkan link Youtube, ganti"false" untuk me-nonaktifkan
        Replace_Image_Link = true;//Menampilkan gambar, ganti  "false" untuk me-nonaktifkan.
                                Replace_Force_Tag = true;//Mengganti tag otomatis, seperti: [pre] menjadi <pre>, dan [/pre] </pre>, apabila salah mengetik, maka tidak akan tampil
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya bekerja apabila Replace_Image_Link=true
        
        //List Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-mbh5mzu4keRkxYoP7UhjylC_OSeb0cvBWx0_pAYHPqRuKqbFxZZJNFxv-AcWROboY2EYcZCYxWr7fND3DtqQNlpE5ORFJJ3pFnipUrLx6UROnuBi-SqCgbENmk6NKr-7zCYeIIKVsLo/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_H0praff3t_La_LNDLxLEZjDYY7t04T3fW0W75n9TM0JXY1rIGZN8R1qYc_XIzlApZ8TEnW4yIDitKQePFFf7rU4vKXrMx7TB4Y3VE1s5-WvBTgizxknILT3KXuwNYau-COwKyO90CpY/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7vjnQgD6SM5L806MjpYJW3C4Zz0gWLBVxVab2V3Mp3jf1uFUPkDzVhCECl5chv-MUsh2tFLTWJtQq48-oSNsf9NBQ-tYufhnm578QE6PpkPo-rtrCHq-VRZ2CpVGXsUhU5dl6W7G7lvE/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiC5MWUOn3dqzp-0Mva2G-YkgvwU6N1ouj5LIdO26IOb1OEFc9hCyU5Iurcd14WrSpYW2nY1XRFXnf6WwiSKG9dnf7i7Qha9C4RWgS2yutmmUBC8ofoK3b0NWYJo2dSLOKUu-KkE0L4zw/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKx1lug6t52MDgCDtcbq0VjrhuXh17ctVSj9DRGf4MT_LiJXM_Sif6jRFnK0N77satfILztG5ujwxiMmYrrkm8Z7R7eIkUYM77OgowYmTfzWMt8sntvSbC8ZCcgIZy0yKXHezMdwQvemc/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi1_jnKtRUUvQzpwqEv4ZlBppBksOw_bt7K4759vY3xjAK4qFJb9-UyHdUr_Vz-ongWU8ILU_VKIupkFTEY2OOnuUrWDPVInuD5s68t9nNo4KPxd5llgPLhMjfg9A7nZvnmaAZ1nbT5Cs/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zMvZE3nyFPlyKtwqTaltNgUYicoF6OFPi8Y0EXty7eFjaCJAuBSY86wtuHlFpSO75tKBnLMX0YSuaSuihG3SNuhO81TBpjztUOqKFmBeXZFIL2-jrIiJP1ykvcGg5aghGKiFa7A2tv8/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoI2hyphenhyphenFeWKdJgTPiV7U4dVMtyShZo4otnKVxmGfvD9QyAweUDkTAil6OXIgwsUqi8gw76aTB3fmTsWH8iEe5cJl7mPJpsMQh3fjjq3UCmSXtsEmY1KnVf2m3kl2R5a-lNzzhzUcWaLGWw/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBy8-PfwUC9xIpr938rmoUQnxxnLhs1FqBHXQF7cudKat-vdb03mMnDBLcl1OtsJuatYNlE1jlnBmibno-Gr1j2M32M1ZPgBvLxspAicHBL5N6_5QfbeVcN02pQrjz-Hz1zrQGUuB7ZfY/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjftgEPNfEfHxbmAQsvLWnHAW983kM9pzVabrB8Ah0XghVuqm_Wky-JwN7_NSkv3C2QAKfZQNxd3Pgy1JsG4wd4d0z7fqEqU3H_WpmGj4k1Uts4W_pWPYH-7QB_gE-RgSCwGIjVJRaaYU4/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYivEIJ1-tnKuS9oIsJv74R1HVM0xzE4USlcn_1srZnxIbRKjLW_kKOhehPKT3MYLuNBZqTtV6bD06EkOGB2YxcG9xRJf5jbWgvSRBw7RXJ1J0_MGRvfxOPb0g5cJqrz-Arn1b_ViHis0/s1600/thumbsup.gif', 
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoU3ATw39MvCNtNFfaBiwYI2e3GapmmV4iEiAypH_VdjLKcKL4_B1I-SgVSQUrtzJWMEHenVMDHEzZrtGF6PMacLFB-Y5vcSWYR3_A0BPdEA3vVt8-byBphzzNW_IkevJ1XglSyAH5KA/s1600/wee.gif',      
        ]; 
        
                                
                                //Mengganti tag, gunakan huruf kecil
                                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>

7. Simpan Template.

Semoga bermanfaat....