Blogger Threaded Comment Hack Valid HTML5

Threaded Comment

Blogger Threaded Comment Hack Valid HTML5 - Alhamdulillah, sekarang saya masih diberi kesempatan lagi untuk berbagi postingan seperti biasanya. Sudah sekian lama saya istirahat sementara dari dunia blogging karena harus melaksanakan berbagai aktivitas di sekolah, dan sekarang saya mencoba ingin berbagi sedikit, meskipun sebenarnya sudah banyak yang tau. Ya, kali ini saya akan berbagi tentang threaded comment hack yang valid HTML5. 

Tentu, semuanya sudah tau, bahwa style dari threaded comment ini adalah karya dari Kang +Adhy Suryadi seperti yang sedang saya pakai saat ini. Tetapi, di sini saya juga tidak hanya berbagi itu saja, saya juga ingin menjadikan threaded comment itu valid HTML5. Tentunya ada hal-hal yang harus diperbaiki. Untuk itu, silahkan ikuti langkah-langkah berikut.

CSS

#comments{margin:0;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd;background:#fff;}
#comments h3 {margin-bottom:25px;font:16px Oswald;padding:0;text-transform:uppercase}
.comment_name { color: #444;font-size: 20px; font-weight: normal; line-height: 20px; max-width: 100%; text-decoration: none; margin-left: 10px;margin-top: 5px;text-transform:uppercase }
.comment_avatar { height: 48px; width: 48px;max-height:48px;max-width:48px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcyqFhwq1G-SBoasvnA2_x9l5qy5ySeuhPQPfRjkICGlFOP9FErdfwJkctqFwafWg1oilXIZQ39zNhUTs6PtR0mTPcbamjuZqyEU48Mn0fk3mo4q5Ugar_QXS0p7XRJUIC4NtbSYDpNXE/s1600/anon40.gif) no-repeat center center;float:left;margin-top: 5px; margin-right: 10px; margin-left:10px;padding:0;overflow: hidden;transition:all 400ms ease-in-out }
.comment_name a { text-transform: uppercase; font: 20px Oswald; color:#444;text-decoration:none; transition:all 400ms ease-in-out}
.comment_name a:hover { color:#ef7f67;text-decoration:none; }
.comment_body p {font:16px 'PT Sans Narrow'; line-height: 1.3em;color: #666;background-color:#fff;border:1px solid #ccc;padding:10px;}
.comment_body{margin-top:5px;margin-bottom:10px;padding:5px 0 15px 10px}
.comment_date { color: #999; font-size: 11px; line-height: 11px; cursor: pointer; font-weight: normal;float:left;margin-left:0;margin-top:5px}
.comment_area {border:1px solid #ccc;margin-bottom:25px; padding-right:10px; transition:all 400ms ease-in-out;background:#ddd;position:relative}
.comment_child .comment_area { margin-top:-20px;background:#edebeb}
.comment_child .comment_wrap {padding-left: 40px}
.comment_reply {display:inline-block;cursor:pointer;color:#ffffff;font-family:arial;font-size:11px;font-weight:bold;padding:4px 10px;text-decoration:none;float:right; position:absolute; right:10px; bottom:10px; transition:all 400ms ease-in-out;background-color: #666}
.comment_reply:hover { text-decoration: none;background-color:#333}
.comment_reply:active {margin-top: 1px}
a.comment_reply {color:#fff}
.unneeded-paging-control {display: none;}
.comment_reply_form{padding:0 0 0 48px}
.comment_reply_form .comment-form {width: 100%}
.comment_form a { color: #2f6986; text-decoration: none; }
.comment_form a:hover {color: #2f6986; text-decoration: none;}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline-block;color:#ffffff;font:12px Oswald;font-weight:normal;padding:1px 8px;text-decoration:none;position:absolute;margin:3px 0 0 10px;background-color: #666}
a.comment-delete{position:absolute;top:5px;right:5px; font-size: 16px;color: #999}
a.comment-delete:hover{color: #ef7f67}
#comment-editor {width:102.3% !important;background:transparent url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%;margin-left:-8px}
.comment-form {max-width: 100%!important;margin-top:25px!important}
.comment_emo_list {display:none;clear:both;width:100%;}
.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}
.comment-form p {background: #edebeb;border: 1px solid #ddd;padding: 10px;margin: 5px 0 5px 0;color: #333;font:12px Arial, sans-serif;line-height:20px;width:97.3%;position:relative;}
.comment_child .comment-form p {width:95.5%;}
iframe{border:none;overflow:hidden}
.deleted-comment{display:block;color:#333;font:italic 13px Arial;word-wrap:break-word;margin-top:10px;}

Setelah itu, silahkan masukkan HTML-nya. Cari terlebih dahulu kode seperti berikut ini.

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

.........................
........................
........................


</b:includable>

Jika sebelumnya sudah terdapat HTML komentarnya, lebih baik diganti dengan berikut ini. Letakkan kode berikut ini di antara dua kode di atas.

<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'><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='1' 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_area'>
             <div class='comment_header'>
           <div class='comment_avatar'>
          <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
               <b:if cond='data:comment.author == data:post.author'>
                  <span class='comment_author_flag'>Admin</span>
               </b:if> 
              </div>            
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='comment permalink'><span class='comment_date'><data:comment.timestamp/></span></a>             
               <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'>&#10006;</a>
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>                                                            <div class='clear'/>                                         
              </b:if>                                       
             </div>
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            </div>
            <div class='comment_child'/>
            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>              
           </div>
          </b:loop>              
         </div>    
         <div class='clear'/>
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
         <div class='clear'/>
         <div class='comment_form' id='comment-form'>      
         
          <b:if cond='data:post.embedCommentForm'>
           <b:if cond='data:post.allowNewComments'>
                                                          
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
            <data:post.noNewCommentsText/>
           </b:if>
          <b:else/>
           <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>
      
             
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //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 = 6;//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/AVvXsEjJv23uAoTDDqf3ZqXil0jo4PObdg8emxFOHIXAYyaOhQDXQasBWUlXMoVdNHGrjZvdvL0ksdltC0IKwPq68DSy16kdZs9a27HxPkaTJL510kVczMeOrwmk3Wam5YrshwT0AvCVXOw_DUw/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzVZrJMmQ7b46VuR7GctSk7OBT5DMYQl_LPX93UhsJ9XpctPy8csfnhNHhdV7zBuXMuiIc-5h7lTZGLdMDsrmwruQOCnUkonDIfrOHE5urpZ5zWwmGWWc1_cE03QAeRsAGvoIP2-QyueY/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6LKxR0QcWFR4eoZhg9EUnlCC4WyBnUsZ5UZdv1mmtMbsETi65WkKSzrox75ljOjnXgEzktjGg9hNyjTQKY2aoqrcHatrj73cdr3o1AQXGMvqUIewV0sgqbDY9JrgSr7cU_oO39ryZNs/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbpz6CwJytUDoMXrbMkQaNrQr1hlEOkhWZY5J4N2Duw67YNZOtoGY1aEaICDUob3WQErrJFWf8CjbAQNBxivmW5mCbV7YuDncGkZejxddcK6e2pVyaEdn5uZZOWvVylEY8gSZmMDvZxE/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFFgiGLsHY0r32XfEdq22FZ812xcDnwRC3KUt7eftXzCMugDKhaJhrSYsmJmkBedAakTfQXWLhOM2wDcQ-uI98A4JT7mEmtNbS9AEWvFBXS2HeUW70agNxW1utZ8Tm1KCieHkTxt7VSZM/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnqPzRfxhHlAKs-h0rOxt5MileSbtANAoeMDa32WaIR_A6_h3G0gxfNgmxnRS0tnAKpLm2XgQ1JWE3liOEieRH8aT2BObgfaUQtjI3wsE6-XT4SVMeQvcHBEU7yeEWO34YmL-3Y_Ur34/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuTMF0yXGrCpADp6BIhdszbEWSgNYrQo7PQiw-vIceN_jp4DD-qVh8WZ3BukxToPIO1TmkvrLs51aQZpRIwW2k97pd-Qe1xOffPo6tBqrMYHkspinS0X_gTxmV5yJSezqo0NXvCGfQZ8g/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfyUwU5zB9szTuUA63LGPUaXXyFYanN2tt3oGBmikW34eL9gH7xfkVo5w1Z-nWqBOXf_QPeIrRo-Tkhp0dd3hmQvxLxQW02QR05FuI3ki7Og6OT0-rBJlob5S8ZyIID1ceoXIcFE9FstM/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6Fls8GgvLQqkTs6rsCE2SX5FqEzfc_RCqS70Z8s0-mGvHMhp7nX3EaiC_MHDkYhVZd7nWFOnsnGX8YhaWvqab8_5VogKhtlTo6uGTAzM-FsHpY31-PSDHKDgePmH3AR2PEIMyzZm09w/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijTrWSWeIU9dSmAsAcQCXimtv0cnjQG1Q3Bx52IZO2edwSyr3nB5ePIw9yxneGqZBbmkp8CIg5By2nXAaQWftca5IfEi9BaGmHSk0ix2-o5HPiWaMBleNq2EZ1QGws3S6Em5YZOcKT5yw/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0NrNHq84oErP6HCog5m76mWTcUx9zlG9uiremNksfl-hf3w8Hs5SUwaVZY7GiJFE0wBxsCnc_bpU4hVGyalIBpvHb_eqlwTeKqu4hJ5m7clVOEzAL68gpaSAeL_kIZCyIpRbelD1q0Pg/s1600/thumbsup.gif',
        ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy2O1Qpox2xCOXdDqA76HBo3EYXnTNknZpdYoAc1-gx3ksAACiMMq75LJ4dAKOeIqOuzWK-cGOnUfkyhLsQ28oYl9hZNY9aCF2bTwcKLMBv7nAf1MeZIdPiqUPsPWWUJQOg8NqloIYusg/s1600/wee.gif', 
        ':ng'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_Q7gODwETjC9ItMtyek7z0-Ieqw4Oq82O5RbvENz6PFxCB9_dK4Pnx4Fej7yGdOLfzY6Qw0SRvHXpAanM7YH2p5f7B0QsmrLyVZSKPtQJZVdkfdMih8iyODWK97-Uj1hkNZrfDEOXobi/s1600/rolling-yahoo-emoticon.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>

Silahkan lihat lagi kode yang saya beri warna merah tersebut. Kode tersebut-lah yang sudah diperbaiki. Untuk kode merah yang pertama, itu berfungsi untuk membatasi jumlah komentar berbalas yang akan muncul. Dikarenakan kode  Config.maxThreadDepth=6 itu tidak berfungsi dengan baik. Jika tidak berfungsi dengan baik, nanti akan menimbulkan permasalahan error pada validasi HTML5-nya. Untuk itu perlu menambahkan kode ini di HTML komentarnya. Dan silahkan ubah kode data-level='1' sesuai keinginan.

Untuk kode merah yang kedua, itu berfungsi agar tidak terjadi error validasi HTML5 pada threaded comment ketika postingan belum atau tidak ada komentar. Tapi, silahkan lihat dulu dengan "view page source" pada halaman postingan blog anda yang sudah ada komentarnya, untuk memastikan benar atau tidaknya kode yang yang saya beri warna tersebut.

Caranya, setelah berada di "page source" dan cari kode <script async='async' yang nanti akan muncul kode seperti kode merah kedua tersebut.

Untuk emoticon-nya, anda bisa ganti sesuai selera. Atau, jika sebelumnya anda sudah memasang emoticon komentarnya maka tidak usah diganti ya tidak apa-apa.

Selesai. semoga bermanfaat....

Referensi : http://blog.kangismet.net/2013/11/perbaikan-threaded-comments-hack-v3.html
                  http://www.kompiajaib.com/2013/10/memperbaiki-error-pada-threaded-comment.html
Enter your email address to get update from Fathoni16.
Print PDF

30 komentar Tambahkan komentar

Makasih untuk infonya sob

http://dongeng7even.blogspot.com/2014/05/tempat-tempat-biasa-oknum-polisi.html

Balas

keren gan threaded commentnya :)
kalo ane pake yang bawaan template droidpluss :)

Balas

waah, mantap nih gan.. :) boleh dicoba dong gan., izin coba nih gann :)

Balas

ijin nyoba sob

Balas

keren-keren,, ane mau praktekin di lapak ane

Balas

ooh ini yang dipakai kompiajaib dulu ya sob, akhirnya di share juga..
thanks tutorialnya sob!
keep blogging..

Balas

punya saya sudah dipasang sob tapi beda dari cara diatas. Apakah setiap template memiliki cara yang berbeda2.

Balas

ini nih yang ane cari :D ijin nyoba dulu :D

Balas

Keren Gan :D Coba Dulu Deh :D

Balas

ini sebenarnya juga bukan info sob. ini hanya trik agar threaded comment nya valid html5 :p

Balas

iya sob. itu sesuai selera pemakainya. kalo ane lebih suka style yg ini sih

Balas

silahkan dicoba mas.. biar tambah mantap blognya :)

Balas

silahkan dicoba sob :D

Balas

silahkan aja diprektekkin di lapak mas helmy :)

Balas

silahkan dicoba mas.

Balas

iya sob. ini yg dipakai di kompiajaib. Tapi, sekarang memang sudah dishare.
:D sama-sama mas.

Balas

bisa jadi sob. karena struktur setiap template aja berbeda-beda. Tapi, saya juga beri tips lagi agar threaded comment-nya valid html5 sob.

Balas

yg dicari ya. :D Silahkan dicoba mas,.. :D

Balas

silahkan dicoba gan...

Balas

bisa di aplikasiin nih di blog ane :D

Balas

silahkan sob cabe-cabean diaplikasikan di blog ente :D

Balas

hahay...saya juga pake komen yang beginian, baru tau kalau ini valid HTML5

keren dan emang semua juga tau kalau saya emang keren kan?...:p

Balas

iya kang. Itu memang sudah valid HTML5.
:p Hehehe... iya. Semua orang tau kok kalo kang cilembu itu memang keren :D

Balas

nah kalo untuk responsivenya gmn gan? Ane kurang faham :v

Balas

nah kalo untuk responsivenya gmn gan? Ane kurang faham :v

Balas

Do you realize that the delete comment link is showing to the viewer and who are clicking is by mistake.

Balas

Sekarang threaded yang model ini, tombol reply nya sudah gak fungsi ya

Balas

DonacoPoker Aman dan Terpercaya

Sedang mencari situs judi online yang aman dan terpercaya kami ada solusinya. DonacoPoker menjamin setiap kemenangan anda pasti akan terbayarkan dan juga memberikan kesempatan menang lebih besar dibanding situs-situs lainnya. Jadi jangan ragu lagi segera hubungi kami di :
WA : +6281333555662
atau langsung di Livechat kami di : donacopkr(titik)com

>>>DAFTAR<<<

Situs Judi Online

Balas

ok but yo have any widget more easy function with comment?

Balas

Dilarang menyertakan link aktif, iklan, ataupun titip link dalam berkomentar di Blog Fathoni16. Silahkan berkomentar tanpa ada kata-kata kotor.

Konversi KodeEmoticon