» » Blogger Threaded Comment Hack Valid HTML5

Blogger Threaded Comment Hack Valid HTML5

Kamis, 08 Mei 2014 - 13.15 with 27 comments
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

27 komentar Tambahkan komentar

avatar
Primamulia Teguh
8 Mei 2014 pukul 16.47 ✖

keren gan threaded commentnya
kalo ane pake yang bawaan template droidpluss

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 16.56 ✖

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

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 16.58 ✖

ijin nyoba sob

Balas
avatar
seru2banget
8 Mei 2014 pukul 17.26 ✖

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

Balas
avatar
ResepKita
8 Mei 2014 pukul 17.31 ✖

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

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 17.40 ✖

ini nih yang ane cari ijin nyoba dulu

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.26 ✖

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

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.28 ✖

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

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.29 ✖

silahkan dicoba mas.. biar tambah mantap blognya

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.30 ✖

silahkan dicoba sob

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.30 ✖

silahkan aja diprektekkin di lapak mas helmy

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.31 ✖

silahkan dicoba mas.

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.32 ✖

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

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.33 ✖

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

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.34 ✖

yg dicari ya. Silahkan dicoba mas,..

Balas
avatar
Unknown Admin
8 Mei 2014 pukul 18.34 ✖

silahkan dicoba gan...

Balas
avatar
Unknown Admin
14 Mei 2014 pukul 13.41 ✖

bisa di aplikasiin nih di blog ane

Balas
avatar
Unknown Admin
14 Mei 2014 pukul 15.10 ✖

silahkan sob cabe-cabean diaplikasikan di blog ente

Balas
avatar
Mang Lembu
17 Mei 2014 pukul 15.58 ✖

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

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

Balas
avatar
Unknown Admin
17 Mei 2014 pukul 16.07 ✖

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

Balas
avatar
Unknown Admin
8 Juni 2014 pukul 19.48 ✖

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

Balas
avatar
Unknown Admin
8 Juni 2014 pukul 19.51 ✖

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

Balas
avatar
Fauzan A
29 November 2018 pukul 06.21 ✖

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

Balas
avatar
Debi
7 April 2019 pukul 00.36 ✖

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
avatar
x
15 November 2019 pukul 18.31 ✖

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


:)
:(
=(
^_^
:D
=D
|o|
@@,
;)
:-bd
:-d
:p
:ng