Selamat malam sobat blogger semua, pada malam yang dingin ini, saya coba akan berbagi, Trik, Threaded Comment... 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 Kang Ismet dan ini adalah yang terupdate alias terbaru yang telah di sempurnakan oleh Kang Ismet sendiri. Langsung saja ini kodenya silahkan di simak...
Caranya
1. Masuk ke Blogger.com
2. Template dan pilih Edit Template (Jangan Lupa Back Up dulu Templatenya)
3. Cari Kode berikut di bawah ini
<b:include data='post' name='threaded_comments'/>
5. Kalau udah ketemu silahkan sobat ganti dengan ini
<b:include data='post' name='comments'/>
6. Kemudian cari kode ini
<b:includable id='comments' var='post'>...</b:includable>
7. Ganti semua kode di atas tadi dengan kode di bawah ini
<b:includable id='comments' var='post'>
<b:if cond='data:post.allowComments'>
<aside class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
<meta content="UserComments:
<b:if cond='data:post.numComments != 0'>
<data:post.numComments/>
</b:if>" itemprop="interactionCount"/>
<meta expr:content='data:post.title' itemprop='about' />
<h5><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></h5>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<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>
</span>
</b:if>
<div class='clear' />
<div id='comment-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.authorUrl != "https://www.blogger.com/profile/########"'>
<b:if cond='data:comment.authorUrl != "https://www.blogger.com/profile/########"'>
<div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<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_area'>
<div class='comment_header'>
<div class='comment_avatar'>
<img expr:alt='data:comment.author' 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'>
<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 class='comment_date' expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<a class='comment-delete' expr:href='"https://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>✖</a>
</div>
<div class='clear' />
</div>
<div class='comment_body'>
<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='Reply Comment'>Reply</a>
</div>
</div>
<div class='clear' /> </div>
<div class='clear' />
<div class='comment_child' />
<div class='comment_reply_form' expr:id='"r_f_"+data:comment.anchorName' />
</b:if>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<div class='clear' />
</b:if>
</div>
</b:if>
</b:if>
</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.olderLinkUrl'><data:post.olderLinkText/></a>
<data:post.commentRangeText/>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></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>
</aside>
<b:include data='post' name='threaded_comment_js' />
</b:if>
</b:includable>
8. Kalau sudah jangan lupa untuk memasukan kode
CSS. Copy semua kode di bawah ini dan letakan tepat di atas
]]></b:skin>#comments .comment_name {
font-weight: bold;
color: #555;
margin-top: 8px;
}
#comments .comment_name a {
color: #555;
text-decoration: none;
transition: all 400ms ease-in-out;
}
#comments .comment_name a:hover {
color: #e74c3c;
text-decoration: none;
}
#comments .comment_service {
float: right;
margin-top: -25px;
position: relative;
}
#comments .comment_body {
margin: 5px 0 10px;
padding: 0 60px 0 38px;
position: relative;
}
#comments .comment_body p {
line-height: 1.3em;
color: #666;
}
#comments .comment_date {
color: #999;
font-style: italic;
font-size: 12px;
line-height: 25px;
font-weight: normal;
margin-right: 20px;
}
#comments .comment_area {
border: 1px solid #bdc3c7;
margin-bottom: 10px;
margin-left: 30px;
padding-right: 10px;
transition: all 400ms ease-in-out;
min-height: 80px;
}
#comments .comment_area:hover {
border: 1px solid #666;
}
#comments .comment_area:hover .comment_avatar img {
border: 1px solid #666;
}
#comments .comment_area:hover .comment_reply {
opacity: 1;
top: 6px;
}
#comments .comment_child .comment_wrap {
padding-left: 5%;
}
#comments .comment_reply {
display: inline-block;
color: #fff;
font-family: Arial;
font-size: 11px;
font-weight: bold;
padding: 4px 16px;
float: right;
position: absolute;
right: 0;
top: -20px;
opacity: 0;
transition: all 400ms ease-in-out;
background: #e74c3c;
}
#comments .comment_reply:hover {
text-decoration: none;
background: #c0392b;
}
#comments .comment_reply:active {
margin-top: 1px;
}
#comments .unneeded-paging-control {
display: none;
}
#comments .comment_reply_form .comment-form {
width: 100%;
}
#comments .comment-delete {
float: right;
position: absolute;
top: 4px;
right: 0;
font-size: 16px;
color: #999;
}
#comments .comment-delete:hover {
color: #c0392b;
}
#comments .comment-form {
max-width: 100%;
margin-top: 25px;
}
#comments .comment-form p {
background: #2c3e50;
padding: 10px;
margin: 5px 0;
color: #eee;
border-radius: 4px;
position: relative;
line-height: 1.4em;
}
#comments .comment-form p:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -15px;
left: 15px;
border: 8px solid transparent;
border-color: #2c3e50 transparent transparent;
}
#comments .deleted-comment {
position: relative;
display: block;
background: url('http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSfpCyUsnOWIpQBEkfqeBPTD7OWKU9lVqu3kUhFCvMg_TpjpF5jJNaEPAQKkijMuO1hDDrnB5HlPh03NE_vBY-6ak6fN4A8nWYIWgIPycDEtqwxi4-Q-GPhxslYCKFULQlIJXapMCqwM/w14-h18/tempat-sampah.png') 15px center no-repeat scroll #db6161;
color: rgba(0, 0, 0, .3);
margin: 0 0 10px;
padding: 15px 20px 15px 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: left;
}
#comments #comment-editor {
background: url('http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefxQ7mXTRXWV9UlRy95Kcztdx0yUhE5xDXK6A-M07539qmZvAzwtls3m8-_TS-iRsrSH83QliiBVHw9pg2kcgAW3XD9BJEJ99pf6fo1Ufar_woxi_Ul_A4UDOhBGl8qCQ1Oihqkc80uA/s1600/ajax-loader.gif') no-repeat center;
width: 100% !important;
}
#comments iframe {
border: none;
overflow: hidden;
}9. Silahkan sobat cari kode
<b:includable id='threaded_comment_js' var='post'>...</b:includable>, jika sudah ketemu ganti dengan kode bawah ini
<b:includable id='threaded_comment_js' var='post'>
<script type='text/javascript'>
if (typeof(jQuery) == & #39;undefined&# 39;) {
document.write( & quot; & lt; scr & quot; + & quot; ipt type = \ & quot; text / javascript\ & quot; src = \ & quot; 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>
<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 >
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}('5 6=\'.x\';5 y=$(\'#q-z\').b(\'g\');7 15(d){5 J=\' \\n\\r\\t\\f\\16\\17\\18\\19\\1a\\1b\\1c\\1d\\1e\\1f\\1g\\1h\\1i\\1j\\1k\\1l\\1m\\1n\\1o\\1p\\1q\\1r\\1s\';K(5 i=0;i<d.A;i++){8(J.j(d.1t(i))!=-1){d=d.k(0,i);1u}}l d}$(\'.L .1v p\').3(7(i,h){B=h.1w();m=B.j(\'@<a C="#c\');8(m!=-1){D=B.j(\'</a>\',m);8(D!=-1){h=h.k(0,m)+h.k(D+4)}}l h});7 M(2){r=2.j(\'c\');8(r!=-1)2=2.k(r+1);l 2}7 N(2){2=\'&1x=\'+2+\'#%O\';P=y.Q(/#%O/,2);l P}7 R(){3=$(6).3();$(6).3(\'\');6=\'.x\';$(6).3(3);$(\'#q-z\').b(\'g\',y)}7 S(e){2=$(e).b(\'E\');2=M(2);3=$(6).3();8(6==\'.x\'){T=\'<a C="#U" 1y="R()">\'+1z.1A+\'</a><a 1B="U"/>\';$(6).3(T)}1C{$(6).3(\'\')}6=\'#1D\'+2;$(6).3(3);$(\'#q-z\').b(\'g\',N(2))}F=1E.1F.C;G=\'#q-1G\';H=F.j(G);8(H!=-1){V=F.k(H+G.A);S(\'#1H\'+V)}K(5 i=0;i<u.A;i++){8(\'W\'1I u[i]){5 2=u[i].W;5 I=1J($(\'#c\'+2+\':v\').b(\'X-Y\'));$(\'#c\'+2+\' .1K:v\').3(7(m,Z){5 o=u[i].E;8(I>=1L.1M){$(\'#c\'+o+\':v .1N\').10()}5 w=$(\'#c\'+o+\':v\').3();w=\'<11 1O="L" E="c\'+o+\'" X-Y="\'+(I+1)+\'">\'+w+\'</11>\';$(\'#c\'+o).10();l(Z+w)})}}5 12=$("#1P");12.1Q(\'.1R 1S\').1T(7(){5 13=$(14).b(\'g\');$(14).1U().b(\'g\',13.Q(/\\/s[0-9]+(\\-c)?\\//,"/1V-c/"))});',62,120,'||par_id|html||var|Cur_Cform_Hdr|function|if|||attr||str|||src|||indexOf|substring|return|index||child_id||comment||||Items|first|child_html|comment_form|Cur_Cform_Url|editor|length|temp|href|index_tail|id|cur_url|search_formid|search_index|par_level|whitespace|for|comment_wrap|Valid_Par_Id|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|reset_html|origin_cform|ret_id|parentId|data|level|oldhtml|remove|div|avatar|ava|this|trim|x5b|x5d|x7c|x7d|x3c|x3e|x0b|xa0|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u200b|u2028|u2029|u3000|charAt|break|comment_body|toLowerCase|parentID|onclick|Msgs|addComment|name|else|r_f_c|window|location|form_|rc|in|parseInt|comment_child|Config|maxThreadDepth|comment_reply|class|comments|find|comment_avatar|img|each|show|s45'.split('|'),0,{}))
</script>
</b:includable>
Terakhir "Save" template sobat..
Sekian tutorial mengenai Blogger Threaded Comments Hack ini. Semoga bermanfaat untuk sobat blogger semua.
