Modifikasi Komentar Blog Dengan Threaded Comments

Modifikasi Tampilan Komentar Blog Dengan Threaded Comments. Sobat Blogger, pada artikel saya kali ini, kembali ingin membuat sebuah tutorial tentang cara membuat atau memodifikasi tampilan kolom komentar dengan system threaded comment hack blogger, meski tutorial nya banyak sekali, ya apasalhnya untuk melengkapinya.

Modifikasi Komentar Blog Dengan Threaded Comments
Apa sih komentar dengan system threaded comment hack itu, menurut info yang saya dapat, sytem threaded itu adalah system komentar bertingkat, ya seperti contoh gambar di atas, menurut saya selain dalam style nya yang simple dan keren, system komentar dengan threaded comment hack ini juga bisa di bilang SEO, karena ada sebuah fermalink yang menunjukan sebuah title posting tersebut dan juga penambahan title pada link yang bisa mengurangi error di website link.


Untuk sobat blogger yang suka mendesain templatenya, saya rasa tampilan komentar dengan system threaded comment ini sangat di rekomendasikan untuk sobat pasang di blog sobat, untuk tutorialnya , silahkan simak baik-baik ya.  


Penting : Hal pertama diharapkan untuk membackup dahulu template sobat untuk mengatasi terjadi kesalahan

Memasang Kometar dengan Threaded Comment Hack Blogger

1. Buka akun blogger sobat.
2. Pilih template >> klik edit HTML
3. Silahkan cari kode seperti di bawah ini, gunakan CTRL+F
<b:include data='post' name='threaded_comments'/>
4. Jika sudah ditemukan, silahkan ganti dengan kode dibawah ini.
 <b:include data='post' name='comments'/>
5. Selanjutnya sobat cari kode seperti dibawah ini.
<b:includable id='comments' var='post'>....</b:includable> 
6. Jika sudah ditemukan, ganti semua kode didalamnya dengan kode di bawah ini sampai kode </b:includable> jangan lupa ya.
 <b:includable id='comments' var='post'>     <div class='comments' id='comments'>        <b:if cond='data:post.allowComments'>          <h5> <b:if cond='data:post.numComments == 0'> <span itemprop='interactionCount'>0</span>comments on &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> <span itemprop='interactionCount'>1</span>comments on &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <span itemprop='interactionCount'><data:post.numComments/></span>comments on &quot;<data:blog.pageName/>&quot; </b:if> </h5>    <b:if cond='data:post.commentPagingRequired'>      <span class='paging-control-container'>        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>          <data:post.oldestLinkText/>        </a>        &#160;        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>          <data:post.olderLinkText/>        </a>        &#160;        <data:post.commentRangeText/>        &#160;        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>          <data:post.newerLinkText/>        </a>        &#160;        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>          <data:post.newestLinkText/>        </a>      </span>    </b:if>    <div class='clear'/>    <div id='comment_block'>      <b:loop values='data:post.comments' var='comment'>         <div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>          <b:if cond='data:comment.isDeleted'>            <span class='deleted-comment'>              <data:comment.body/> - <a class='comment_remove' 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'>                Clear              </a>            </span>            <b:else/>            <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_header'>              <div class='comment_avatar'>                <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>              </div> <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='Reply'>REPLY</a>            </div>            <div class='comment_body'><div class='cm_head'><div class='cm_infonm'>              <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'/>              </div>              <div class='comment_service'>                <a expr:href='data:comment.url' rel='nofollow' title='Permalink'>                   <span class='comment_date'>                      <data:comment.timestamp/>                    </span>                </a>              </div></div><a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'><img alt='delete' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='Delete Comment'/></a> </div>              <p><data:comment.body/></p>            </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'/>          </b:if>        </div>      </b:loop>    </div>    <div class='clear'/>    <b:if cond='data:post.commentPagingRequired'>      <span class='paging-control-container'>        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>          <data:post.oldestLinkText/>        </a>        &#160;        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>          <data:post.olderLinkText/>        </a>        &#160;        <data:post.commentRangeText/>        &#160;        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>          <data:post.newerLinkText/>        </a>        &#160;        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>          <data:post.newestLinkText/>        </a>      </span>    </b:if>    <div class='clear'/>    <div class='comment_form'>      <b:if cond='data:post.embedCommentForm'>        <b:if cond='data:post.allowNewComments'>          <div class='comment_emo_list'/>          <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>  </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;//Depth level threaded comment        Display_Emo = false;//Show emoticons? type "false" to hide        Replace_Youtube_Link = true;//Embed YouTube videos, type "false" to disable        Replace_Image_Link = true;//Auto replace the image link, type "false" to disable.        Replace_Force_Tag = false;//Auto replace virtual tag example: [pre] becomes <pre>, and [/ pre] becomes </ pre>, if one writes, will not work        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only works when Replace_Image_Link = true            //Setting Emoticon        Emo_List = [        ':)'  ,'http://1.bp.blogspot.com/-J1TEANUAMK4/Usv4ENimvMI/AAAAAAAAayM/7urGKDBLEuo/s1600/happy-yahoo-emoticon.gif',        ':('  ,'http://1.bp.blogspot.com/-FW1IVGP2pqk/Usv61gJ8N9I/AAAAAAAAayw/V4hKPeZ2hy0/s1600/sad-yahoo-emoticon.gif',        ' =('  ,'http://1.bp.blogspot.com/-cfHIERSKvlQ/Usv09Va9OtI/AAAAAAAAaxw/my629OUiaow/s1600/crying-yahoo-emoticon.gif',        '^_^'  ,'http://3.bp.blogspot.com/-IL1z6OuP6GA/Usv9usPQiFI/AAAAAAAAazQ/yjGEdNfV7Js/s1600/batting-eyelashes-yahoo-emoticon.gif',        ' :D'  ,'http://3.bp.blogspot.com/-5pETvu9ZKAI/Us5WLRJdTNI/AAAAAAAAa08/RnS6PR5yofM/s1600/hee-hee-yahoo-emoticon.gif',        '=D'  ,'http://2.bp.blogspot.com/-UQ2-qdSIt-E/Us5VQZGUGVI/AAAAAAAAa0w/efzrujZKS9Q/s1600/big-grin-yahoo-emoticon.gif',        '=)D' ,'http://4.bp.blogspot.com/-UkNU89Q6LFE/Usv5DvcNuqI/AAAAAAAAayY/jNLF_5oDleg/s1600/laughing-yahoo-emoticon.gif',        '|o|'  ,'http://1.bp.blogspot.com/-VzxVDD6dmB4/Usv09aIonRI/AAAAAAAAax0/ETH5TeQiIpA/s1600/applause-yahoo-emoticon.gif',        '@@,'  ,'http://2.bp.blogspot.com/-BzIvdT6wipo/Usv8JPfFpYI/AAAAAAAAay8/zfFmYLaiJaM/s1600/hypnotized-yahoo-emoticon.gif',        ' ;)'  ,'http://4.bp.blogspot.com/-eCP0RnsR_f4/Usv5uK7xgeI/AAAAAAAAayg/nYHrqrBULCo/s1600/winking-yahoo-emoticon.gif',        ':-bd'  ,'http://2.bp.blogspot.com/-vfCgwSm88J4/Usv6OF4cZQI/AAAAAAAAayo/S46Z5eUFmzA/s1600/thumbs-up-yahoo-emoticon.gif',        ':-d'  ,'http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif',        ' :p'  ,'http://1.bp.blogspot.com/-7PFAViaiLW4/Usv8rM60qNI/AAAAAAAAazE/u5ft5_skvEI/s1600/silly-yahoo-emoticon.gif',        ':ng'  ,'http://2.bp.blogspot.com/-2aWDnxBYYY8/Usv09ssnSEI/AAAAAAAAayA/JCaQT9ZPnC8/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> 
7. Sekarang sobat letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> 
#comments{background:#fff;border:1px solid #ccc;margin:20px  0 0;padding:20px}#comments h5{color:#000;margin:0;padding:0 0 5px;font-size:160%}.comment_inner{margin:20px 0;padding:0;overflow:hidden}.comment_header{float:left;width:67px}.cm_head{position:relative;background:#fff;border-bottom:1px solid #ccc;margin:-10px -10px 0;padding:5px 10px 8px;}.comment_avatar{border:1px solid #ccc;margin:0;padding:5px 5px 0;}.comment_avatar img{width:55px;height:55px;padding:0;text-align:center;margin:0;background:#8ED557 url(https://1.bp.blogspot.com/-2JmONejk4IA/Vt7rbaMQMnI/AAAAAAAAFkk/FrrZF3UaEeg/s1600/no-image-available-bloggersstand-comments.jpg) no-repeat}div.comment_avatar img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;]{content:url(https://1.bp.blogspot.com/-2JmONejk4IA/Vt7rbaMQMnI/AAAAAAAAFkk/FrrZF3UaEeg/s1600/no-image-available-bloggersstand-comments.jpg)}.comment_name,.comment_name a{font-family:Roboto,Helvetica;padding:0;margin:0 0 7px 0;font-weight:500;font-size:15px;text-transform:uppercase;}.comment_service{margin-top:0}.comment_date{margin:0;color:#333;font-size:14px;text-transform:uppercase}.respond{float:right;margin:0;padding:0}.comment_date:hover{color:#8ED557;text-decoration:underline}.comment_body{background:#fff;border:1px solid #ccc;margin-left:77px;padding:10px;}.comment_body p{line-height:1.2;margin:15px 0 5px;color:#666;font-size:14px;word-wrap:break-word;padding:0;}.comment_child .comment_wrap{padding-left:78px}.comment-delete{position:absolute;float:right;top:10px;right:10px;margin:0;padding:0}.infonm{float:left}.comment_reply{display:block;font-weight:700;margin:10px 0 0;padding:7px 0;color:#fff!important;text-align:center;text-decoration:none!important;background:#3498db;}.comment_reply:hover{text-decoration:none;background:#333}.comment_remove{font-weight:700;margin:0;padding:0;color:#fff!important;text-decoration:none;}.comment_remove:hover{text-decoration:none;color:#000!important}.unneeded-paging-control{display:none}.comment-form{max-width:100%!important}#comment-editor{width:100%!important;background:#fff url(&#39;data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7&#39;) no-repeat 50% 40%;margin-bottom:0;margin-top:5px}.comment_form a{text-decoration:none;font-weight:bold;font-size:14px}.comment-form p{background:#fff;padding:10px;margin:5px 0 5px 0;color:#000;font-size:14px;line-height:20px;position:relative}.comment_reply_form{padding:0 0 0 70px}.comment_reply_form .comment-form{width:100%}iframe{border:none;overflow:hidden}.deleted-comment{background:#e74c3c;color:#fff;padding:20px;margin:5px 0;display:block}iframe{border:none;overflow:hidden}

8. Sekarang save template sobat dan lihat hasilnya.

Nah itulah sobat, tutorial cara membuat commentar dengan system threaded comment hack, lebih dan kurangnya saya mohon maaf.


EmoticonEmoticon