7 Langkah Modifikasi Threaded Comments Hack

Threaded Comments Hack

Di postingan kali ini akan membahas 7 Langkah Modifikasi Threaded Comments Hack, bekerjsama cara ini cukup sederhana disini kita akan berkreasi lebih jauh mengenai tampilan yang akan kita sajikan kepada pengunjung khususnya di bab komentar. Ada penambahan sekaligus Emoticon, Konversi arahan dan sedikit trik show hide Author pada Threaded Coment Hack ini jadi sahabat tidak usah menambahkan lagi konversi kodenya. 

Meskipun banyak yang akan ditampilkan namun akan kita buat lebih sederhana sehingga tidak menambah beban pada loading blog nantinya dan tidak menghipnotis perenderan terutama pada SEO blog. Bagi sahabat yang mau mencobanya silahkan simak berikut ini.

Sebelum memulai ada baiknya sahabat backup terlebih dahulu templatednya antisipasi jikalau terjadi error atau kesalahan dalam menerapkan cara ini.


Langkah Pertama
Silahkan sahabat salin arahan CSS dibawah ini lalu ganti arahan CSS komentar yang ada di template blog sahabat dengan arahan CSS ini.

#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/AVvXsEi7AOvjzWjCMgHKWMqURQYNMqmhv-Ikjs4flxNWsSge1joxv9ykRgej4b4kfBJlVxfnvjWexqtg46cadqGaAMfhbu7IHsXOH-EtJyNo6MF-8KR3byXVEAxm92SlvPZGZBql7hhJ9wyyLfnI/s1600/anon.jpg) no-repeat;} .comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7AOvjzWjCMgHKWMqURQYNMqmhv-Ikjs4flxNWsSge1joxv9ykRgej4b4kfBJlVxfnvjWexqtg46cadqGaAMfhbu7IHsXOH-EtJyNo6MF-8KR3byXVEAxm92SlvPZGZBql7hhJ9wyyLfnI/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 CSS Comment ini sudah termasuk Emoticon dan Konversi arahan yang ditampilkan Show hide.


Langkah Ke Dua
Silahkan sahabat cari arahan HTML dibawah ini

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

Lalu silahkan ganti dengan arahan 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/AVvXsEiAcKdvqMukGOvDKdyMYoRYrDYZpZzlqEY2eUoR3TIN4U0WWbRHqxJh5er2k-h37ZsWf7nc2d9pswXy4fMuFvOLLWOpNjMrpFp0rGQ0XUHUNr5R6RSsBTvYvjuOTNue48lhQUWXOEa7lTWw/s1600/happy-yahoo-emoticon.gif',         ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtM0rIg76QPFSFSaUs80892ErRZtYVmuowrw40M2maagSGai4IW2gRugEUG6H4aZ4asWbhpHG1H17wxNA_7i3taP1nU2WL7xnOKujovfbKJG63Uh-LWcFL7PIioh1V7TZNRVn0oh_-68Xd/s1600/sad-yahoo-emoticon.gif',         ' =('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU7syKLKAx6FTg0lmuzWArDaNE3mi7EyPrPzOytKWFPuMGv02EP-2wQROJu3qLACwK_Dr109b3LUMpw5FCX9op19mGzMtNnDqWP-QsopuSbxBro6aoSLfqjUpAcex6Rjcpzjp8LYaZscO/s1600/crying-yahoo-emoticon.gif',         '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzI9dqd-kaLApYXsomgy9GwaMNMk91VZmRRGiQdUOT96kMS_g9F76MhVch_tKTFkVTcDp9jebp1Id8pnMbGxlfMcGxi38cVtgVNiIjJY0SH_HSzUW6h30P2HZyw04WNWNiqQXLDhjHWGAk/s1600/batting-eyelashes-yahoo-emoticon.gif',         ' :D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfvHwADJsh9voCIpfCb5QjCEv0_7b0GkRdsc4CmvlQQYx0Eg7LHbHWN_h4AZ_d7WTa0V8uQFbC95IWmXfoJFhNiJifcbMSiTeWArU6mjsHJV-mG1iviuGf4U55FB8FR6VV85zkqveh80m/s1600/hee-hee-yahoo-emoticon.gif',         '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZr8Fda9sTwC-RoXJjruSlQSymMnOwwaesttNp-IBfZW7qpoI8eO6f2URYy8xqVq7y2j4CKW7cZvJt41hBO8uZIKq02jEK08Lde4jySGbCIRWTt95Fag0R7xF6sEPwTn2LPF6469c0UBXR/s1600/big-grin-yahoo-emoticon.gif',         '=)D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGSgq2C4p0fG1fM-9yxeRzN-NJdLX-NwDnABtznYpvggQdu1CgIL7vM2N6ZRUDha-IctUSP0AZFKDkW5OVtRSkQJBjedLuyq824iFRYlkZ5sgFweVXeWa919-QKsHiIemI4ZzTExje1JE/s1600/laughing-yahoo-emoticon.gif',         '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRenlV39ETQLZBp62MUXSQavP6Ai2fEoKdw86gmhJvKNfMG4CK4PwEfytA9gzM2aZaCArn97pFOjWQhgfW7udkPq69TvZd30DDYITrk9zflcSeNlrDniRmt98j3F2jn27jZEtzupsXmjnu/s1600/applause-yahoo-emoticon.gif',         '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMQx7-KcPeZIw7UWPpNpLRnh7Y6-sgcdsVjqOWbsSauZhzB_7Vz3_Ydree4O3w5Ecn794ohdwkEXdcSuuxxifrPhqW-ZrU5-uhS4-BikgQl-49gXf50Jw2C47yIJA34zUI0nFBx1VH9EL/s1600/hypnotized-yahoo-emoticon.gif',         ' ;)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjre4wxeF0HIoO_MHmcN_5zFNb94cq0h5BF3INXSgOtgmx8kywYKGZ0wIS7dgHJDcxRxT676iPVICWkmznZnYx8gU1HpJP49jvDrCUsOQOk8O8lExzY93gqAs-AGGP26WaYFZ5DEd65cfQW/s1600/winking-yahoo-emoticon.gif',         ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinOPOys_NjCQEFol1FuUYEqGAAmkYkhdOmSY4OanyVW-2BnKhKCuwhQE7UhTKrx-iYP5TZSqH3k9e2bUyx9Tx1upeMunGpIi76_QPIW1YxY5Ew_60eU4j7LG1dIhUc2TkjAaZhcNsNJMY/s1600/thumbs-up-yahoo-emoticon.gif',         ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJTKeAaGQCXGtpM78-RGH6_jpUDzs1nq-3egqetex8C3gHO1lYqiC5UcGMff1dveS2oFrifksWbNZZCCbmdjkAayp_DgCswLjrbsTfMTYHlf0OXwA_zSac5L00c2bYhcPE2nQeDqeUtvg/s1600/thumbsup.gif',         ' :p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi87g46mgFlHc9npqGa1uTLavNoZZMdn4Fu1S2rWUpGYMUIAnRNYJm32kOMiYzNQ3zJ4sfvRPZR3O4yATy8-MO1e5RMGReJZMYCA4_1k6oYPZQYs5K_Qh27XjpJpvQFGMiTVXgoBitVAeQw/s1600/silly-yahoo-emoticon.gif',         ':ng'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8Y2Vmxn4Box4P2bZrAaZHwbaB0D6L8UbmjIMNtuhCedlM24te4Rp1tn0lsnjK3vQ5sQTCWOlJPkMtTLW9wjBW7AUcT9GGwKH0Pu95mPUJDrAOn5rGFZrwbD6R_tpHq4NPB9qZowKq4DX/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>


Langkah Ke Tiga
Silahkan sahabat cari kembali arahan menyerupai ini

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

Lalu silahkan sahabat ganti arahan tersebut dengan arahan dibawah 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>


Langkah Ke Empat
Silahkan sahabat cari kembali arahan menyerupai ini

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

Lalu silahkan sahabat ganti arahan tersebut dengan arahan dibawah 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 arahan 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>

Perhatikan arahan yang ditandai # dengan URL bebas atau menyerupai laman Out off Topic


Langkah Ke Lima
Silahkan cari kembali arahan menyerupai dibawah ini

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

Lalu silahkan ganti arahan tersebut menggunakan arahan dibawah 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 arahan 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>

Silahkan perhatikan kembali arahan yang ditandai # silahkan sahabat ganti dengan URL Out Off Topic atau laman bebas.


Langkah Ke Enam
Silahkan sahabat cari arahan <b:include data='post' name='post'/> yang tampilan lengkapnya menyerupai dibawah ini, jikalau berbeda isinya silahkan samakan.

<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>


Langkah Ke Tujuh
Silahkan sahabat salin arahan javascript dibawah ini lalu letakkan diatas arahan </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>

Kode ini berfungsi untuk menjalankan Konversi kode, lalu silahkan sahabat SAVE dan selesai, selamat mencoba.

Comments