Membuat Threaded Comments Blogger Ala Blog Mas Andes - Cara mengubah tampilan komentar blog. Menjadi seorang blogger tentunya harus mengerti tentang design web blognya, Salah satu elemen penting dalam design blog adalah Threaded Comments. Threaded Comments adalah interfaces dari komentar atau responden blog agan. Di kesempatan kali ini saya akan memberikan satu tips tentang Threaded Comments itu sendiri. Bukan sembarang Threaded Comments, saya akan membagi tentang cara Membuat Threaded Comments Blogger Ala Blog Mas Andes. Tau kan Blog Mas Andes? Dia adalah salah satu guru saya dalam dunia interfaces blog. Jika belum tahu Buka dulu Blognya yang mantepp banget http://mas-andes.blogspot.com/. Langsung saja ini cara Membuat Threaded Comments Blogger Ala Blog Mas Andes.
1. Masuk akun Blogger sobat.
2. Klik Template >> Edit HTML.
3. Cari kode seperti ini.
<b:include data='post' name='threaded_comments'/>
<b:include data='post' name='comments'/>
5. Jika langkah diatas sudah dipenuhi, cari kode seperti ini.
<b:includable id='comments' var='post'>
Catatan: Hapus kode diatas sampai penutup </b:includable>
6. Lalu ganti dengan kode berikut ini.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<h3>
<b:if cond='data:post.numComments == 1'>
<span><i class='fa fa-comments'/></span> 1 Response to "<data:post.title/>"
<b:else/>
<span><i class='fa fa-comments'/></span> <data:post.numComments/> Response to "<data:post.title/>"
</b:if>
</h3>
<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'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</div>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<b:if cond='data:comment.author == data:post.author'>
<span class='comment_author_flag'><i class='fa fa-exchange'/> ADMIN</span>
</b:if>
</div>
<div class='comment_service'>
<a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>
<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'><i class='fa fa-trash-o'/></a>
</div>
<div class='clear'/>
</div>
<div class='comment_body'>
<span class='comment_arrow'/>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas Komentar'><i class='fa fa-reply-all'/> Balas</a> <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'><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 = 4;//How threaded level that you want
Display_Emo = true;//Display emoticon or not? set "false" to no display
Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
Replace_Image_Link = true;//Auto replace an image link choose "false" to disable.
Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
//Config emoticons declare
Emo_List = [
':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqLWcrMBJNBfHaEVUfnBgqYb0Gf09VhMlXLQK7EHuTdJLyItbcQ2lc7NEBpYU5dPx21E1MxGRt1duLwKuYrjzsWyboyC9dE66Ta3tg8nf0gvaNsQyrrZUdaJ2cZL4TH2D-epLuvmMUJY/s1600/smile1.gif',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4F_KOv0Zd4to-n4sCWk4owO3v4mmpsYeGNJufliRLCiS_mklBaJQoAHE5arRb4u1IJFyT1Y60syzB19FPUFxRutMU1qA68jC9ccQfOD3FfF3CDM8ec0tpieok3cDtyMCnjxiUgDQ3_4E/s1600/sad.gif',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEiPFbrtXmWfmuzwz_2PcceLzQL_9O2irF3xAYckNwS6L-yUmniNpXNf6t6FiTLB7m8YW9jcyguQIZJzwECCKzb1cStE14kHl6qkiEGm7L6vfuVS_tQHnr-WUm1awrDodjZY7_X6-QCA/s1600/sadanimated.gif',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBBmmsUNpZOTKAOV-FoCtz5tKvCc0EZouNRG6OY0BJK93WMS3iskXjlSj6Itk94VzBR6aWQ22hKM4ZLvrXF9xi2iTXpP_aRGJof41YLvoTE80GmHKChy-H0Gw3s7bOunbRuRSuaF_9-o/s1600/smile.gif',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZS1I4COH1Rihvgsxq3Lwd04vGvbGBkngfUkR6FAy-1AprMZqR7t17h8ZaaPGgTd3fLDBtRyk0Twt1_2IkaNzcz2ewZJOCL4S51-EHJVtLTNujF9yloCG3-Qs6v1F9Gxg4qyNbFyZOIM/s1600/icon_smile.gif',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2BkdjeeNi12pLxYgXanXxiF9M8_dPtfFomFQt80bFWyaFjhLYTmnNHA7lgyIHiVz9cQNFWFCvXyeGIpkmFXy4Mcd0234_VEtPLIMtaHDaxDm3_Uh5whrcd_sxoK9C7Kv69Hb3V1bzrhI/s1600/hihi.gif',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09IbzguArFu-p30X6s7FcercM9c-V9_VNqrkhZE-g6tMYIq5Zn3ueltLFigis3WMlho9IL0kv3IfpEySqPbPeTYBTLGjac7OVJ_byOXUIovL_-47GKhUBmGiibgZw-cIsjVIpviYZewY/s1600/applause.gif',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEUR4tMbniGPs33VAbC1YcCTJtDEMf4c_dj7zMhxWeaTfGFyvdftwUWNq7CLCdFCYT4VQJ9VEB6_9jZvyBvE7KwIIf76HdNvpvL_bhqFNRIn4AOLK5uav4GzE65Rt6Lspz5nG2XMDzsU/s1600/rolleyes.gif',
';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRF6L7uo1pNnf2LI8OmvIj2J7UEVxNktv2AzICry4Mu_fmSgsHDxlodrQsAJDlQbhQ7qM_Hsdlez8mG7I3DSSrOtFn_UnhPo7kyuVGM3KPLnZIX76hT_Q06jgta7wdDZtUMHVh4oWbgyo/s1600/wink.gif',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcrbG-jpjRlgtGPPgF1E_25rc7UVDmeB4LMqWJDOj4r0t7zhYIgo8k4tY_g10lGq8CS4Fr20gJyHSZtNWpjIgxyir9u7FJHiNTRmrQ0Taur893huRoWNp8C4gPVvstiiYBcelXUI-TKdY/s1600/thumb.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEY8namy00DcQunHvxRmTp4OIGKXwV7kXCf-7bKjRt0g5Rf3a8JhffPr3WrzPgwvF_Lv0BBkVnRpiNYdDeyfsNEAOQfDbpfnbww7QNe7keJo86pgeywsYJL67Nhxo51WoBDXN8pB0_wY/s1600/thumbsup.gif',
':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ-arpbwYmyC0WWQwRGbQAvtJWFBTQUYjeJSMcUH8ytCB-duDd4AEJlNBIJ9zKJt75N_tx-8myKzqwLF09sxPATeqDjBmoiKmVtMarpIdqpZr1nUMw8AhwhGZuZMC1nfgXiHmJXLiFVRg/s1600/wee.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>
7. Terakhir, Cari kode ]]></b:skin> Lalu letakkan kode berikut tepat diatasnya.
/* Comment */
#comments{background:#95A5A6;margin:0;padding:0}
#comments h3{display:block;position:relative;background:#7F8C8D;color:#fff;font-size:22px;line-height:40px;text-transform:uppercase;margin:0 0 10px;padding:0 10px}
#comments h3 span{margin-right:10px}
#comment_block{margin:0 10px}
.comment_inner{background:#708090}
.comment_body{background:#fff;margin:0 0 10px 50px;position:relative;padding:10px 10px 23px}
.comment_body p{font-size:13px;margin:0}
.comment_avatar{height:50px;width:50px;background:#FF6600;float:left;margin-right:10px;overflow:hidden}
.comment_avatar *{display:block;width:50px;height:50px;margin-right:10px}
.comment_child .comment_avatar,.comment_child .comment_avatar *{width:50px;height:50px;float:left;margin-right:10px}
.comment_child .comment_wrap{padding-left:50px;margin-top:-10px}
.comment_child .comment_body{margin-bottom:10px}
.comment_name a{font-family:'Yanone Kaffeesatz',sans-serif;font-size:16px;color:#fff;text-transform:uppercase;padding:5px 0 0}
.comment_name{line-height:24px;letter-spacing:1px}
.comment_inner.comment_admin {background:#7F8C8D}
.comment_admin .comment_author_flag{font-size:16px;color:#fff;font-family:'Yanone Kaffeesatz',sans-serif}
.comment-delete{float:right;color:#fff;margin-left:10px;position:absolute;margin-top:2px}
.comment_date{color:#fff;font-size:12px;line-height:25px}
.comment-menu{float:right;list-style:none;width:0;height:0}
.comment_reply{font-size:11px;background:#B4BABE;color:#000;float:right;position:absolute;right:0;bottom:0;padding:4px 10px;border-radius:10px 0 0}
.comment_reply:hover{background:#222;color:#ff0}
.comment_reply_form .comment-form{width:100%}
.comment_youtube{padding-top:10px;padding-bottom:10px;max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_form a{display:block;background:#F53404;color:#fff;text-decoration:none;text-transform:capitalize;text-align:center;border-radius:10px 10px 0 0}
.comment_emo_list .item{float:left;width:40px;text-align:center;height:40px;margin:10px 10px 0 0}
.comment_emo_list span{display:block;font-weight:700;font-size:11px;letter-spacing:1px}
.comment_img{max-width:100%!important}
.deleted-comment{font-size:13px;color:#f00}
#comments iframe{border:none;overflow:hidden}
div:target .comment_body{background:#f55865;color:#fff}
p .spammers{background:#e9fbe9}
#comments textarea{background:#e9fbe9;border:1px solid #52e052;outline:none;width:96%;height:80px;overflow:auto;display:block;margin:10px auto;padding:10px}
.unneeded-paging-control,.comment_emo_list{display:none}
.comment_form{padding:0 10px}
#comment-editor{margin-left:-9px;width:103%!important}
#respond{overflow:hidden;padding-left:10px;clear:both}
#form-comment{position:relative;width:auto;font-size:12px;background:#222;color:#c5c5c5;padding:10px}
#form-comment ul{background:#f5f5f5;border:3px solid #c5c5c5;padding:10px}
#form-comment li{list-style-type:square;margin-left:15px;color:#222}
#form-comment:before{top:100%;border:transparent solid;content:'';height:0;width:0;position:absolute;border-top-color:#222;left:10%;margin-left:-36px;border-width:15px}
#form-comment .tombols{display:inline-block;background:#ff0;color:#222;font-size:12px;text-transform:capitalize;margin:5px 2px 0 0;padding:5px 10px;cursor:pointer;box-shadow:1px 1px 1px #222;border-radius:0!important}
#form-comment .tombols:hover{background:#F53404;color:#fff}
8. Terakhir, Simpan template anda.
Bagaimana? Simple kan? Demikian Tutorial yang dapat saya bagikan di kesempatan hari ini. Semoga bermanfaat.
Thanks God!!
2 komentar
Wah keren nih... Bisa di coba, bosan dengan tampilan default -_-
BalasHampir mirip dengan threaded komentarnya Kang Ismet :D
Praktekin dulu Gan!
iyaa kang.... :)
Balas✔ Berkomentarlah Dengan Baik dan Sopan.
✔ Mohon Tinggalkan Komentar Sesuai Artikel di Atas.
✘ Dilarang Memasukkan Link Hidup Pada Saat Berkomentar.
✘ Komentar yang bersifat spam, sara dan ancaman akan langsung di hapus.