Sunday 9 November 2014

Cara Membuat Threaded Comment Ala Google+

iyan-blog.com | Cara Membuat Threaded Comment Ala Google+ - Kali ini saya akan memberi tutorial threaded comment ala google+. demonya bisa anda lihat di blog ini. langsung saja, simak tutorialnya:


1. Masuk ke Blogger
2. Ke Halaman Template >> Edit HTML
3. Temukan kode di bawah ini
<b:include data='post' name='threaded_comments'/>

Lalu Ganti dengan kode di bawah ini
<b:include data='post' name='comments'/>

4. Jika sudah, letakkan kode dibawah ini diatas kode </style> atau ]]></b:skin>
/* komentar CSS */
#comments {line-height:1.4em;margin: 20px 0 0;position:relative;background:#fafafa;padding:57px 20px 20px 20px;;border:1px solid #c9c9c9}
#comments h3 {font-size:15px;text-transform:uppercase;font-weight:normal;font-family:Oswald, Arial;color:#999;padding:22px 20px;position:absolute;top:-0px;left:0;right:0;background:#f2f2f2}
#comments h3 .click-comment{font-family:Open Sans,sans-serif;text-transform:none;float:right;display:inline-block;background:none;padding:0;font-size:17px;color:#777;text-shadow: 0 -1px 0 #f4f4f4}
  .blog-admin{border-bottom:1px solid #c9c9c9}
.comment-body-author { background:#0b433f; color: #008000; border: 1px dotted #008000; margin:0; padding:0 0 0 10px; }
.comment_share { color: #999; cursor: pointer; font-size: 10px; line-height: 1.5em; max-width: 100%; font-weight: normal; padding-left: 5px; } #comment_rep a:hover { text-decoration: none; color: #464646!important;}
  .comment_avatar { height: 50px; width:50px; background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQDOYH2awk7PTOENHIaIKzhYomnKMBZiwU-i3kCBkzm7y9VY1KiioLOwxt_rBcdBytBSJFibSr81zvE0E1AyDcuuDBkiSlPn3B6kf8fME1sJRTWepR3lOG4YPZw2U1HWFZXgBfwOAFC_g/s1600/anon45bung.gif) no-repeat; float: left; margin-right: 15px; overflow: hidden;padding:0;border-radius:99em ;}
.comment_admin .comment_name:after {content:&quot;&quot;; width:0;  height:0;  position:absolute; top:5px;  right:0;  border-width:5px;  border-style:solid;  border-color:#fff transparent transparent transparent;  display:block;}
.comment_admin .comment_name:before {content:&quot;&quot;; width:0;  height:0;  position:absolute; top:7px;  right:0;  border-width:5px;  border-style:solid;  border-color:#555 transparent transparent transparent;  display:block;}
 
 .comment_name { color: #4a5764;font-size: 15px; font-weight:normal; max-width: 100%; text-decoration: none; margin:5px 0 0;text-transform:none; font-weight:normal;position:relative} .comment-menu { float: right; list-style: none; width: 0; height: 0; } .comment_name a { font-family:Roboto,sans-serif;text-transform:none; font-size: 13px; color:#333;text-decoration:none;font-weight:700;}
.comment_name a:hover {text-decoration:underline; }
  .comment_body p { font-size: 100%; line-height: 1.4em;margin:0;padding:0 0 15px}
  .comment_body { margin-left:68px;padding:5px 15px 30px;position:relative; background:#fff;color:#444;font-size:13px;border:1px solid #ddd;}
.comment_body:after {content:&quot;&quot;; width:0;  height:0;  position:absolute; top:0;  right:100%;  border-width:7px;  border-style:solid;  border-color:#fff #fff transparent transparent;  display:block;}
.comment_body:before {content:&quot;&quot;; width:0;  height:0;  position:absolute; top:-1px;  left:-16px;  border-width:8px;  border-style:solid;  border-color:#ddd #ddd transparent transparent;  display:block;}

 .comment_intime {float:left;margin:10px 0;position:absolute;color:#aaa;bottom:0;left:15px}
  #comment_box {padding:0;background:none;position:relative;margin:20px 0}
  .comment-delete img{float:left;border:1px solid #ddd;border-radius:2px;padding:1px 8px}
  .comment_date { color: #aaa;font-size: 11px; line-height: 25px; cursor: pointer;font-family:Roboto,sans-serif;font-weight:normal } 
#comments .separate { color: #fff;font-size:15px; line-height: 40px; padding-left: 5px; padding-right: 5px;} #comments .author-mark { background: #d2d2d2; color: white; border-radius:0; padding: 2px 6px 2px 6px;font-size: 15px; line-height: 15px; } .comment-share { display: inline; } .comment-share li { display:inline; } .comment-share li.button a { background: #546472; color: white; padding: 0 5px 2px 5px;border-radius:0; display:none; } .comment-share li.button:hover a { background: #272f37; }#comment_rep { margin-top: -27px; float: right; } .comment_child .comment_body {} .comment_child .comment_wrap {padding-left: 40px}
  .comment_reply { cursor: pointer;font-size: 12px; line-height: 1.5em; font-weight: 400; padding: 2px 14px; float:right;list-style:none;margin-right:20px;color:#aaa}
  .comment_reply a,.comment_reply a:visited{color:#aaa;}
.comment_reply a:hover{color:#43a4c4;text-decoration:underline;}
  .comment_admin .avatar-image-container {} .unneeded-paging-control {display: none;} .comment-form {max-width: 100% !important;margin-top:-15px !important}.comment_reply_form .comment-form {width: 100%;} .comment_youtube {max-width: 100%!important; width: 400px; height: 225px; display: block; padding-top: 10px; padding-bottom: 10px; } #respond { overflow: hidden; padding-left: 10px; clear: both; } .comment_avatar * { max-width: 100%!important; display: block; max-height: 100%!important; width: 50px!important; height: 50px!important; margin-right: 15px; } .comment_child .comment_avatar, .comment_child .comment_avatar * { width: 35px!important; height: 35px!important; float: left; margin-right: 5px;border-radius:3px;} .comment_form a { color: #2f6986; text-decoration: none; } .comment_form a:hover {color: #2f6986; text-decoration: underline;}
.comment_author_flag {display:none}
  .comment_admin .comment_author_flag {display:inline;background:none;font-size:16px;padding:0;margin-left:4px;color:#555;text-transform:uppercase;}

#comment-editor {width:100% !important;background:#e1e3e6 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr0jH3LcwCL3lj7hij4h6mZTf1Tmn3LWndRuEfbJJwS5ekv3Y2cL1U0fY2hwih6qRqrdntLK4sc0EvtJeZ7U6xySDC5EZlw1KEqc5sJa3QXCO5sOTHZF2pO4qyAbRw02yhWbUanmMhBEE/s1600/kangis-loader.gif&#39;) no-repeat 50% 30%;margin-bottom:20px;position:relative;}
.comment-form {max-width: 100% !important}
  .comment_arrow {display: block;position:relative;margin:0;padding:0}
.comment_emo_list .item {
float: left;width: 40px;text-align: center;height: 40px;margin: 10px 10px 0 0;}
.comment_emo_list span {display: block;font-weight: bold;font-size: 11px;letter-spacing: 1px;}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important}
.deleted-comment {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54Zg-3pARwkZ9FRW7Jo3cTQlxCkUgp_e6WS88IpVh5cM6eDlGb2659w3qAhigXSufwOePb1Yfpgb1T09sDKRC42BGoj7JoIuqUzSBlbsGPrIVGzW9ecjE-EwoMA5HbaZLxT4-mu6jcIk/s1600/tempat-sampah.png) no-repeat 2% 50%;
color:#ccc;
line-height: 22px;
padding:8px 15px 8px 45px;
margin:5px 0;
display: block;
border:1px solid #ddd;
    position:relative;
    font-size:13px;
}

.comment-form p {
background: #222;
padding: 15px 15px 14px 15px;
margin: 45px 0 5px 0;
color: #fff;
font-size:13px;
line-height: 20px;
    font-weight:400
}
5. cari kode dibawah ini 
<b:includable id='comments' var='post'>...</b:includable>

Lalu ganti dengan kode dibawah ini
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h3>
     <a class='click-comment' href='#comment-form' title='comments'>Comments+</a>
      <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> <data:commentLabelPlural/>:
      </b:if>
    </h3>
        <b:if cond='data:post.allowComments'>           
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
                        
         <div class='clear'/>
         <div id='comment_block'>
          <b:loop values='data:post.comments' var='comment'>
           <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'> 
            <b:if cond='data:post.adminClass == data:comment.adminClass'>
             &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
            <b:else/>
             &lt;div class=&#39;comment_inner&#39;&gt;
            </b:if>
 <b:if cond='data:comment.isDeleted'>
  <b:else/>
<div id='comment_box'>
             <div class='comment_header'>
             <div class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
                    
             </div> 
             <div class='comment_body'>
        
              

              <div class='comment_service'>
  <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> 
               <b:if cond='data:comment.author == data:post.author'>
                 <span class='comment_author_flag'><i class='icon-user'/></span>
               </b:if> 
              <a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a> 
 
              </div>
 </div>
              <div class='clear'/>
              <span class='comment_arrow'/>
         
               <p><data:comment.body/></p>
 <div class='comment_intime'>
 <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaRdAZqQCJnV01zfhzhFuEVHCSpsrUYxdjfvfiVN9Zz6GvOqoZAFTvScsqLaP2ApJLtA6eHn8Cvu4vgblG6lQnB4mGfQtEp00TYK-SoPt3VDalvqhchDmabwHC8GS6JkbHUP-D4V_h_s/s1600/delete4.png' title='Hapus Komentar'/>
</a>

<div class='comment_reply'>
  <a expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a></div> 
               </div>
<div class='clear'/>                                                                                        
             </div>
<div class='clear'/>
</div>
</b:if>
<b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'>
    <data:comment.body/>
  </span>
</b:if>  
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            
            <div class='comment_child'/>
            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>               
           </div>
          </b:loop>               
         </div>     
         <div class='clear'/>
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
         <div class='clear'/>
         <div class='comment_form'>          
          
          <b:if cond='data:post.embedCommentForm'>
           <b:if cond='data:post.allowNewComments'>
                                                           
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
            <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;//How threaded level that you want
        Display_Emo = true;//Display emoticon or not? set "false" to no display
        Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
        Replace_Image_Link = true;//Auto replace an image link  choose "false" to disable.
                                Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
        
        //Config emoticons declare
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_hbGgnqNhG7SyA2jAxytgFSkGcPW1MQgKvBLvwKjbFnfpntt7f0j-2NnX_aRKXQUVUbFy5vJNoGppuEmvamJEWBWDvz9i7fhwdPZ9xbPHd1zLGI2VKB8gP07ZyMnxMgD8k-Hzxl49Us/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoVpy-4FESDUFvdSFJR-n_1T_XyErSRT6g5d36tCUF0C5iF73OFh85_JKG0t8xiVTufo9F37PIiiex0hyphenhyphenyG46Ih69CIawEWeDdk1KkapNr9uFDWuMfJ99OYU7y93E3Ris9qIE2vGFDKhg/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tYRzyKWF2bM0dqNwNXyrhJI3rOgG4-gm9L5-vVHM4nIPATUWjvCQEIDfszpRFlCvCw_OQr9PxgR0g1qH63aDvlMzD3Q04j7RDW1Cbjn5AYubYwXOsbBM9K83PcsMYdgcIM5rl_aTL0s/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQg_KtbDu5GuBdQlA80p1n08QNthL0RCL6p-Q0YCJCAWaYO5gkpCyp0Uz6FwFByVks07zMfN8TF4ZlryWO-EKDky98n8cu77wxnXeR9fHLFs1Ij81Ls5CfL9esm2s9bhB1xvnsUS20tIc/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0EwSkmVBjpoCUsc4jXk-2vLeErS_rxqPtUyZla4mT37fezksF-HxA04iIMeY00u46pYuXjG4Rn_ucq14c_tr1z-SftXOgAW3AWgqqJjTvFIcoY0KTRSzvsnnIINjh0dh0HwE-LThIJ0/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinaxSHeUIavYCHqiPJGCUik611smkWKDsJnC35WH9W5d9Pnc_oNm5Xx4mM8waQlFLwT0ARXr6NFYWmKNEBXoCvP63qPA1MRtUXkILV5wdl4jBLvgAWjd93aOupxtjqmTzfwnIx-Hs9Gj0/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrsAzNubGpcOUBRMvPxvckQyaZZ_wt1HXW1VHNK9zmeUnW9kdMbq6om2EnNTiAe2-cSwm-qOqHZQ4u0W3whBfrBplYXosYImE_He2p5JQMXVr5nQfYP70mO1gZuBH9YlFAa0PbyG-q6h4/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSkC22Cic5fELGD8km-3z-x3L4Z6ig3jS1fGiV6bRh0ryTzjLMSgEG8EWM3JKWmSW6iw-4iMUy1nJphLtbvM4IMabFd2_LX-sDhX3YZTWGogzmUeq6ZByJRmlfGoszjxT7D2OyWpyKEU/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZM0Rx0RTZcLZf_PdEJ90402LRsfpucz9tQB4fkLWlRdVx-LHTKIR1V1dta6NPzeCRxFdACOE7ClzclUOW75bzqPb0Kb45WcnXxa8SEbJRHzcgcz_Pep7Z6zWBnE4KLH3zS9q4Afn2ukY/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgszTkjkm2NbzupFncUVhhbBFazHGLT02vd9HVF-H-OvP5cuj-VhpP6SnBIcBes-NeD11855TXbYxSWAuKcnCUh6Rzg6uyXtk_cEr6FDyHjj_uI4HcZPxz-GiQwkyrIEse2eE8MJ_F-7FE/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjZThkOapgfGohjRaX_StobjypWOiL4SxxwGhsqHSvWVjI0PzUwCnnFxKWdkipyiKNs1OzwwyJ5G-2rHusx5gqv0POX-h7q2vAnRc5blbKo-jeM6ptHtsTO4fXylMPVfTnO2542SDtnk/s1600/thumbsup.gif', 
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAA1YQ_S8GBbLk-xPEk122RetCcqYjCJRx_0tTjF1mG-cqQx2VRndvYSKcEChWIM2nwXxyOBPTNr9VMENf3_l6xWk476TZrTN8re9sWj6egA05qL7BvnfaVtKr5l6vs-gYowxmLw_J9Y/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 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
       //]]>
         </script>
</b:includable>
    
6. Simpan Template.

Ikuti dengan benar langkah-langkahnya, jika hasilnya berbeda beri tau lewat komentar.
Sekian, Terima kasih 

Load comments