Threaded Comments Hack Ala Kompi Ajaib

Komentar Valid HTML5 Widget

Posted by: Admin On: 03/07/14

Selamat siang, semoga di siang yang terik ini anda masih bersemangat untuk menjalani ibadah puasa dibulan ramadhan tahun ini, untuk sambil menunggu sore dan sambil ngebuburit kali ini saya akan berbagi Threaded Comment Hack Ala Kompiajaib.com, Threaded Comment Hack yang dimodifikasi oleh kang adhy suryadi ini sangat keren karena dimodifikasi dengan style show hide pada foto komentar dan muncul saat kursor diarahkan.
Threaded Comment Hack ini juga sudah dilengkapi dengan Show Hide Kenversi Kode dan Emoticon, jadi sudah lengkap.
Untuk yang berminat memasangnya silahkan ikuti langkah-langkah dibawah ini:

Kode CSS

Silahkan ganti kode CSS komentar blog Anda dengan kode CSS di bawah ini (sudah termasuk dengan tombol show hide konversi kode dan emoticon).

#comments{background:#fff;clear:both;margin:10px auto 0;line-height:1em;padding:20px;}
#comments h3{display:inline-block;margin-bottom:15px;margin-top:0;padding:0;font-family: 'Trebuchet MS', sans-serif;font-size:22px;text-transform:uppercase;position:absolute;color:#333;font-weight:700}
#comments .click-comment{float:right;display:inline-block;margin-bottom:15px;padding:0;font-family: 'Trebuchet MS', sans-serif;font-size:16px;text-transform:none;position:relative;color:#333;font-weight:700;text-decoration:none}
#comments .click-comment:hover{color:red}
.comment_avatar_wrap{width:0;height:35px;border:none;background:none;text-align:center;margin-bottom:10px;padding:0;}
#comments .comment_avatar {width: 42px;height: 42px;max-width:42px;max-height:42px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;background:#fcfcfc;padding:4px;border-radius: 2px;text-align:center;position:absolute;top:0;right:40%;opacity:0;transition:all .3s ease-in-out}
#comments .comment_admin .comment_avatar{width: 42px;height: 42px;max-width:42px;max-height:42px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;background:#fcfcfc;padding:4px 4px 19px;border-radius: 2px;text-align:center;position:absolute;top:0;right:40%;opacity:0;transition:all .3s ease-in-out}
#comments .comment_body:hover .comment_avatar{opacity:1;right:0}
#comments .comment_avatar img {width: 42px;height: 42px;max-width: 42px;max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfLNnQKN17WhzG6TTCtvSt9BgtNYkxERm5WcJzfL2nwrHuewdynhY1anofV-5pDIfOPmIz-CiimWfxKUYGuGo3wdLTWEIjy3CuveYqpiwqE7W9G6MlLWiDQxC6Lg04WN4KKgcHlQo936Hm/s1600/anon.jpg) no-repeat;}
.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfLNnQKN17WhzG6TTCtvSt9BgtNYkxERm5WcJzfL2nwrHuewdynhY1anofV-5pDIfOPmIz-CiimWfxKUYGuGo3wdLTWEIjy3CuveYqpiwqE7W9G6MlLWiDQxC6Lg04WN4KKgcHlQo936Hm/s1600/anon.jpg) no-repeat}
.comment_name a{font-family: 'Trebuchet MS', sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;padding:5px 0;color:#111;text-decoration:none}
.comment_name a:hover{color:red}
.comment_admin .comment_name{font-weight:700;font-size:22px;font-family: 'Trebuchet MS', sans-serif;text-decoration:none;background:none;padding:5px 0;text-transform:uppercase}
.comment_admin .comment_date{font-weight:400;font-size:11px;}
.comment_name{background:none;font-size:22px;font-family: 'Trebuchet MS', sans-serif;font-weight:700;padding:5px 0;position:absolute;top:10px;left:0;text-transform:uppercase;display:inline}
.comment_name,.comment_admin .comment_name{left:0;top:10px}
.comment_service{position:absolute;top:35px;left:0;}
.comment_date a{font-size:11px;font-weight:400;text-transform:none;color:#666;text-decoration:none}
.comment_body{margin-top:20px;background:none;border:none;padding:10px 0;position:relative;transition:all .3s ease-in-out}
.comment_body p{line-height:1.6em;color:#333;border:1px solid #d5d5d5;border-left:5px solid #333;font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;word-wrap:break-word;background:#fff;margin-top:10px;padding:10px}
.comment_child .comment_body p{border-left:5px solid #d5d5d5}
.comment_body p img{vertical-align:middle}
.comment_inner{padding-bottom:5px;margin:5px 0}
.comment_child .comment_wrap{padding-left:7%}
.comment_child .comment_body{margin-top:-15px;background:none;border:none}
.comment_reply{float:left;display:inline-block;margin-top:-8px;border:1px solid #333;color:#fff!important;text-align:center;text-decoration:none;background:#444;font:11px/18px sans-serif;padding:1px 11px}
.comment_reply:hover{text-decoration:none!important;background:#777;color:#111!important;text-shadow:none}
.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0}
.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Arial, Helvetica, Garuda, sans-serif;font-size:15px;color:#333}
#comment-editor{width:103%!important;background:#fff url('data:image/gif;base64,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') no-repeat 50% 25%;position:relative;margin-left:-8px;margin-top:-15px}
.comment-form p{background:#edebeb;border:1px solid #d5d5d5;color:#333;font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;line-height:1.2em;margin-bottom:15px;padding:7px 10px;}
.comment_reply_form{padding:0 0 0 7%}
.comment_reply_form .comment-form{width:100%}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-left:10px;clear:both}
.comment-delete{position:absolute;display:none;top:0;right:-25px;color:red!important;text-align:center;text-decoration:none;font-family: Arial;font-size:20px;font-weight:700;padding:0;transition:all .3s ease-in-out}
.comment_body:hover .comment-delete{display:inline-block;}
.comment-delete:hover{color:#333!important}
.unneeded-paging-control,.comment_author_flag{display:none}
.comment_admin .comment_author_flag {display:block;background:#444;font-family: 'Trebuchet MS', sans-serif;font-size:12px;font-weight:400;width:42px;height:15px;line-height:15px;position:absolute;right:4px;bottom:4px;color:#fff;text-align:center;text-transform:uppercase;}
.spammer-detected{font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;}
.deleted-comment{display:block;color:#333;word-wrap:break-word;background:#FE8080;margin-top:10px;padding:10px;font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif}
iframe{border:none;overflow:hidden}
.paging-control-container{text-align:center;margin:0 0 0 25%;}
.paging-control-container a{text-align:center;margin:0 auto;background:#ccc;border:1px solid #bbb;border-radius:3px;padding:3px 10px}

#konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}
#konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:1px solid #ccc;width:98%;height:200px;display:block;background-color:#ddd;border-radius:3px;font:normal 12px 'Courier New',Monospace;margin:7px 0 10px;padding:5px}
#codes:focus{background-color:#fff;color:#666;border:1px solid #ddd;outline:none}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{font-size:12px;font-family:Arial;font-weight:normal;border-radius:3px;border:1px solid #49a5bf;padding:3px 10px;text-decoration:none;background:linear-gradient(to bottom, #93cede 0%, #75bdd1 41%, #49a5bf 100%);color:#ffffff;display:inline-block;text-shadow:1px 1px 0px #528ecc;box-shadow:inset 1px 1px 0px 0px #bbdaf7;cursor:pointer}
button:hover{color:#000}
button:active{color:#000}
button[disabled],button[disabled]:active{color:#000;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}

.small-button a,.small-button1 a {border:1px solid #333;color:#fff;font:13px Tahoma;cursor:pointer;font-weight:400;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:inline-block;background-color:#444;padding:2px 8px;cursor:pointer}
.small-button:hover a,.small-button1:hover a{color:#111;text-shadow:none;border:1px solid #333;border-radius:2px;display:inline-block;background-color:#777}

Kode HTML

Silahkan cari kode seperti di bawah ini.

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

Kemudian ganti dengan kode dibawah ini.

<b:includable id='comments' var='post'>
<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>
<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'>Click here for <data:commentLabelPlural/></a>
  </b:if>
               
  <b:if cond='data:post.commentPagingRequired'>
   <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><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>
         
    <div class='comment_body'>
    <div class='comment_header'>
     <div class='comment_avatar_wrap'>
   
     </div>
                         
     <div class='clear'/>
    </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>
</div>
<span class='comment_service'>
      <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                  <data:comment.timestamp/>
                </a></span>
<b:include data='comment' name='commentDeleteIcon'/>
  </span>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
<b:if cond='data:post.numComments == 1'>
  <div expr:class='&quot;item-control &quot; + data:comment.adminClass' style='margin:-7px 0 10px;border:1px solid #c94a36;background:#e55e48;padding:5px 10px;color:#FFF;border-radius:2px'>Selamat <b><data:comment.author/></b> dapat PERTAMAX...! Silahkan antri di pom terdekat heheheh...</div>
</b:if>
<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 class='comment_avatar'>
      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
<div class='comment_author_flag'>admin</div>
              </div>                                         
    </div>                         
     <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' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
       &#160;
       <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
       &#160;
       <data:post.commentRangeText/>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
       &#160;
       <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><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' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
    <div class='thanks' style='float:right;margin-top:-54px;margin-right:2px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;position:relative;background:#fff'>Terima kasih sudah berkomentar</div>
  </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 = 3;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
        Replace_Force_Tag = false;//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/AVvXsEhRCx84q2zGrvjXbBED3zDK42TGmcvPpvg5227BLCLRUoaeQAtfbww6sz2fswV5Ms-ynDWIQhZxwIU1q-iYuMMYONCLY9ab-ZyL7AMKH-_o62N2AtV7GFm7jRGO7Y-X1oCoOoOiVaxvGkvq/s1600/happy-yahoo-emoticon.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVaC3g-Re5Ps_gVIgp6lTu1xHSfddX-isKIoGi8VbYXwtA9JUrrmhU4GorI2Xm1jNxXPo2Mnd3bX0e4zmf8d7JU-J9cFkzbHVY-Uz2BrXBVS3ATFsOZLDhIdACFdqf044farSZ2CQil_em/s1600/sad-yahoo-emoticon.gif',
        ' =('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Y7bg5oweQzCiFV-k9w5SbWRqG_GJL3uLnoZLDTYP41FCj33UtFWzS_VPOxTHpuxQh6homxXMLeYrlApLn9htJyJd-wuSCMf0WB-qDU2uLmoKZlJ8AJTzT5X65rxoqjdF8yUVAJ9wCaB5/s1600/crying-yahoo-emoticon.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tuBohs58uZgHE9THJMSFLECorwiy6gJNiTfH7MGyI_bMj5ShV_93C8sB7xEeRIw-eVzEvyoP1tTqCshNjTfL40Bjjc0XCylXXJ0Yi7G7XPGZVXRgqgNEmmh1tdmi1Gol7sDfeq7UEyAD/s1600/batting-eyelashes-yahoo-emoticon.gif',
        ' :D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdWopyMqqfl3j315j8uXROypUuDT4mq_gpByI1a66i5Bj7N9H92o6KN8KfZhsJPZOFv7cZIUfywlRHJhrkJKDn37HFv3Dw7Ma1bJ9G0UyMIAT7TJcEsogMb7vaiDQVzTjw2gvMTsIGkYB/s1600/hee-hee-yahoo-emoticon.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi53g1fwHVRNCameFAfCSZcGrl6rfrRggwqP8wKdxvmH9L0Nue3QPjiEfY4DiUg3CXgcGCf9m1MPXYnAF8HzAKDv_hl4smpgTBwOgfdM5APnXXttLeKx9yoJkFPWSerI-hePXY4j6uKiwnC/s1600/big-grin-yahoo-emoticon.gif',
        '=)D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0c6iDjx7NRzNy6hwds54Vgwcx3ulf8sSt2J-623lNGza9S5Ad_Cg019EHe7zwH-X7E29vy6sHcmepxpKlSCADi5Z0UDvdb2vA0cnppOs6dNt6QDz6d6MOMonkTQsjQTRb5dHht_DwZ30A/s1600/laughing-yahoo-emoticon.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xmyuQuzhGIjujIcdiDz1I-AymquurkvDscqLIlnNcCiv9ZJ0lD6WLTE6Q1zdXGUv8nulv-21dt90-m0nUXRBxi0YYzUPI9SVNh_o0U9erWpW-plEcgngSqxgg2K6xl8AXX6Z2DgEo6tO/s1600/applause-yahoo-emoticon.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvojSKcMabArisEHGU9uVh2PpI4UeJcbNAOd6I7eIT2zH3tKdmri7uQAh52gc3FSCgTzfIwvWkLDErSkxuWS6E0YWemzIz39Ii5lOenT0QBCFU4LP_eeL28rJsDEmbNZvfLb6duz73wC1O/s1600/hypnotized-yahoo-emoticon.gif',
        ' ;)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilfeqvaMZDx1zBeRYMsvs893I1zRAaHRCcxryxb4yNjJ9xKSLoU5OP2tMu2mKzWmUu6YkS_6vcOmrRDFAI185xk1LgIb9ytWKJh90pte1CaARQHC6nV4VRCA9_96tQf7diDDfWoRcTjRiz/s1600/winking-yahoo-emoticon.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicOeOL8RJ-l7bxWMGlPgCiEOzl2ygXzFfyce0oPsummUsZ1FDgbK67ENzhsSy7vuQp93RdjXrrrTOfbZxIhhGtLA_JMHqY0gQwRAHPmQAnGLgqzHc3GA4luvWE7fcg4QZwZqHOSugAgOAa/s1600/thumbs-up-yahoo-emoticon.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhint7nCdyMZEhU3BbB2cPHb0LNIg2QJRqWfEmG28pgMoYQBgLeg4rt0pvj8SQNuY1GI9cUz3ZAsyqGUPPqagQgIHbUr9lXwbCtsHiEKeE9j-TAgikmpFZWBQChQMltZLJG98xmb0RMR50/s1600/thumbsup.gif',
        ' :p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmnF-dk56ahXuKDbMAT9wGVpJ4u2LqdSQfb4aw7oB80-XdgBaVNI3fmPk4A1HwEKwRiL8Th3h6lKV32s8qPlx871Zt95ERhF90qA8j1H4_kOCPZx7zU-oCJD4H2QyhFNeRCRhku631ZyJ/s1600/silly-yahoo-emoticon.gif',
        ':ng'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzV8qMdVuImOgr_W2TtpmO-4SN65b1uMpZGeFU_ruOR4OcL3x9lk7CNIuRwIV-Uu8iqLRV7YIcSHUVfTnP5JiwC6r4jla1aspgkzjlcR1_eSUiAgp_HghsY09AffIKhaFPnInd0YGOVezD/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 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,{}))   
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/"));
});      
    //]]>
</script>
</b:includable>

Kemudian cari kode dibawah ini.

<b:includable id='commentDeleteIcon' var='comment'>
.......
.......
.......
</b:includable>

Ganti dengan kode ini.

<b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <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' title='delete comment'>&#215;</a>
    </b:if>
  </span>
</b:includable>

Lalu cari kode seperti ini.

<b:includable id='comment-form' var='post'>
.......
.......
.......
</b:includable>

Kemudian ganti dengan ini.

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='display: none'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button1'>
        <a href='#' target='_blank' title='Out Of Topic'>Out Of Topic</a>
  </span>
<span class='small-button'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;' title='Show Konversi Kode'>Show Konversi Kode</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;inline-block&apos;' title='Hide Konversi Kode'>Hide Konversi Kode</a></span>
</span>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'>Show Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'>Hide Emoticon</a></span>
</span>
  </p>
<div id='konversi-box'>
    <textarea id='codes' placeholder='Tulis/paste kode di sini lalu klik &apos;Konversi&apos;' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Konversi</button>
<button onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
</div>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
      <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
      </div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Silahkan ganti kode # dengan URL postingan out of topic atau lainnya pada kode berikut
 <a href='#' target='_blank' title='Out Of Topic'>Out Of Topic</a>

Kemudian cari lagi kode seperti di bawah ini

<b:includable id='threaded-comment-form' var='post'>
.......
.......
.......
</b:includable>

Lalu ganti dengan ini.

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
<div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='display: none'/>
    <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button1'>
        <a href='#' target='_blank' title='Out Of Topic'>Out Of Topic</a>
        </span>
<span class='small-button'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;' title='Show Konversi Kode'>Show Konversi Kode</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;inline-block&apos;' title='Hide Konversi Kode'>Hide Konversi Kode</a></span>
</span>
<span class='small-button'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'>Show Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'>Hide Emoticon</a></span>
</span>
  </p>
<div id='konversi-box'>
    <textarea id='codes' placeholder='Tulis/paste kode di sini lalu klik &apos;Konversi&apos;' spellcheck='false'/>
<span class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Konversi</button>
<button onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/> <input id='opt2' type='checkbox'/> <input id='opt3' type='checkbox'/> <input checked='' id='opt4' type='checkbox'/> <input checked='' id='opt5' type='checkbox'/></span>
</div>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
      <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
      </div>
    </b:if>
</div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Sama seperti pada kode sebelumnya, silahkan ganti kode # dengan URL postingan out of topic atau lainnya pada kode berikut <a href='#' target='_blank' title='Out Of Topic'>Out Of Topic</a>

Kemudian cari lagi kode seperti berikut <b:include data='post' name='post'/> dan pastikan kode di bawahnya seperti berikut.

<b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>

Kemudian tambahkan kode javascript untuk konversi kodenya di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<i rel=\"pre\">");
    } else {
        cv = cv.replace(/^/, "<i rel=\"code\">");
    }
    cv = cv.replace(/$/, "</i>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
//]]>
</script>

Terakhir SAVE dan lihat hasilnya seperti demo dibawah ini.


DEMO

Sumber Artikel :

http://www.kompiajaib.com/2014/06/modifikasi-threaded-comments-hack-ala-kompi-ajaib.html