Selamat sore sahabat blogger semua "Salam Sejahtera", pada sore yang
dingin ini karena abis hujan setelah ditimpa kemarau yang panjang, saya
coba akan berbagi, Trik, membuat Threaded Comment Hack. Artikel ini sebenarnya
udah populer di kalangan blogger, tapi apa salahnya untuk berbagi ilmu
kepada sobat blogger semua. Threaded comment, atau kita sebut komentar
berurutan, maksud nya kita buat kolom atau kita edit form komentar
standar blog dengan custom css threaded comment, agar menjadi sebuah
halaman komentar blog kita elegan dan tertata rapih, dengan accessories,
komentar Threaded Comment, buat sobat yang berminat, silahkan simak
tutorial nya di bawah ini.. Tutorial ini saya temukan beberapa bulan
yang lalu di Blog nya sahabat saya yaitu
Kang Ismet
dan ini adalah yang terupdate alias terbaru yang telah di sempurnakan
oleh Kang Ismet sendiri. Langsung saja ini kodenya silahkan di simak...
1. Masuk ke Blogger.com
2. Template dan pilih Edit Template (Jangan Lupa Back Up dulu Templatenya)
3. Cari Kode berikut di bawah ini
5. Kalau udah ketemu silahkan sobat ganti dengan ini
6. Kemudian cari kode ini
7. Ganti semua kode di atas tadi dengan kode di bawah ini
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<h3>
<b:if cond='data:post.numComments == 0'> 0 Comments </b:if>
<b:if cond='data:post.numComments == 1'> 1 Comments </b:if>
<b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
</h3>
<b:if cond='data:post.allowComments'>
<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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<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 class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<div class='comment_header'>
<div class='comment_avatar_wrap'>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>
</div>
<div class='clear'/>
</div>
<div class='comment_body'>
<span class='comment_arrow'/>
<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'/>
</b:if>
<span class='comment_service'>
<a class='comment-delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpWPCdHIU9ySlm4oM_7SBwebE6BHES0LRkS2pWExHVxBPhulW0O-cAnLZRAkPeoAnlK5Sj22Kek6lT3w-YAzs41RbCgUZeqo486ba0IPti7z-uyYFiYGQfL06ELKrv_laaGF1FO3Gd2Q/s1600/delete4.png' title='Hapus Komentar'/>
</a>
<span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
</span></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<div class='clear'/>
</b:if>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
<div class='comment_child'/>
<div class='comment_reply_form' expr:id='"r_f_"+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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<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'>
<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' expr:src='data:post.commentSrc' 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 = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
//Global setting
Config.maxThreadDepth = 6;//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 = true;//Auto replace link image, ketik "false" untuk mendisable.
Replace_Force_Tag = true;//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/AVvXsEh05l4jfPlcHd1CMsr6Q7_sOHQqKCp-2DquY0eap6hu7pHS-RahCNb3kKxGsmM7VQISTdQVyP5kLXdftzhq49jIAL26tTzKNM-Rbk1A8bRBnJCKqMYZFoqZJC_iRefnkInCO3j3USyzhMo/s1600/smile1.gif',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzHXUDvy1oz80DfTeIyqrhUw7briw2GKRTqJpWeEhp3TJ8Mn9OZmWWgJ17TVaIbF-VRWOaGO9ckrYD3UaLkA-zDcOY9a4k6ZZhR-1QfC1FAVH85vCsY9GosPoYO_wW_nigq73aVd_dqbA/s1600/sad.gif',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxlYAX8ZDxWqCZ_ml1E-hp7M0jENvvgUT07PfEJY-rtCRl5RBDH4uuNq202Sw36HOfB1weibzNAMARgNSLr1MDpzKR_waCCFsEEa1s4M9X8nVkCyFik00BK67HrZ3giALq6eXgpySfN0/s1600/sadanimated.gif',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgybJQMf9_T90idnS0IHYbGgCU0GTtAVG1AA6OwaPieke2vnvQT-sk0MxMTYhAEtBNvKwCqM_3A0EO9LZzj638VfIZTI8tieZg01MjvFJmwoeAqamzq_pMMzAd4fyd0ueKppJ2UyZiox4A/s1600/smile.gif',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpuqcEkHZo88_bSc-cJkjXlzNoVxhVPpwmxW2XOtAwTMm3NG3SYt8VAoJGnbjHLvyIQt91ZbfWcxnCCdNEpemwz3HuooVDL-sMme6_4EYArB5OCqhfuRS2UAA3fjYMHvEQauBMKOWE-E/s1600/icon_smile.gif',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoR-rMEhQIuZPXl58TG8yMfhsAebjxhJJRtrCvj5yGqWXajSHzbNi04W9ym_pAQyT0i7Wxynd4LJxgDJ9FXghsIbUGZQREXdlesDjvifJLwlpa-IOchtEEf9H7BlEUZTupA4hqS3D1PQw/s1600/hihi.gif',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju9gPKmnuye0SpkYsakBjmH-0r5E_BnXuCyvutALLEDqqe6aFXlDD_WjInskJjHqFoLR0z9lp1dr07NPVvSWJ4EYXw_0G6keaKJgli_HlUxf90d-RG_eXUOCK6DljFoqJecsBrMlr6EZ0/s1600/applause.gif',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUONsU5kH-RHym_Uq37QUbXs8EQQzEV5G3gaFcr1jdfq31V3p_IO2pLnOP471a4wTGbALtR8s5OGn7OKoFOri1LC31dac5ZgH6bSvMJxVx4YhNvK3WkVY9bqV8t6-MmBSsHsg-GiAL-J0/s1600/rolleyes.gif',
';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilgiiu9ihOB8-niDrThosEfFMeNt-y-_5G9YZ8m76mTuttGC3IE88osMer8eAF9-wYrjbEepB376POe119DRP9HqLpQ5e33qTpK7Xo6NISxS2k8_6ttAEimVl50RD80D-0eNjq1tWgzS0/s1600/wink.gif',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iusyYnwHb744N98hUqO0D6jdFuTSdjzwhPnw1FGvoGb80ZG5j4L2FBTSY1X3X491pU1x5jgR4FJwo7eU13IH3t_X74fOXTiyzxgLgaVnUrOLRzjjbuhxwfcQjBpcEk2cfoagwvsAf0w/s1600/thumb.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVNboJkUnu7FWXjb6p8Q_gjKW53xOrCu0RgmphEY-3TM7hBxtmrVAOaz2snUv6_SWh6xhKuVRQQHM1MIXQive6j83ZNaojcbp_j9DjqN3wD2X4PDXKqhlUgxufOgKAzHvwd8zYcVVQI4/s1600/thumbsup.gif',
':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Fgp0lnVK0yT8s3Gg4tprdduUCRIKAwrIGrRpRRcGHAOudmYnuxeQzYzPS04AkimuupluaZiJ8lAeMXIiFcnMv8cKDZzjuiKXVoD3q8Si4P_S6druQJOvvwb3g9mcFbuFPcjJOE7Nmmo/s1600/wee.gif',
':a01:', 'http://www.freesmileys.org/smileys/smiley-laughing021.gif',
':b02:', 'http://www.freesmileys.org/smileys/smiley-signs003.gif',
':c03:', 'http://www.freesmileys.org/smileys/smiley-signs001.gif',
':d04:', 'http://www.freesmileys.org/smileys/smiley-love008.gif',
':e05:', 'http://www.freesmileys.org/smileys/smiley-scared009.gif',
':f06:', 'http://www.freesmileys.org/smileys/smiley-shocked004.gif',
':g07:', 'http://www.freesmileys.org/smileys/smiley-devil09.gif',
':h08:', 'http://www.freesmileys.org/smileys/smiley-confused005.gif',
];
//Config Force tag list, define all in lower case
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
'<pre class="brush: plain; title: ; notranslate" title="">','<code>',
'</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>
</b:includable>
8. Kalau sudah jangan lupa untuk memasukan kode CSS. Copy semua kode di
bawah ini dan letakan tepat di atas ]]></b:skin>
