Hie Friends Today i will show u how you can change ur comments in blogger...:)
So Here we go
<b:include data='post' name='threaded_comments'/>
replace with this code:
<b:include data='post' name='comments'/>
STYLE 1
Save this code above ]]> </ b: skin>
# Comments {}
# Comments h3 {margin-bottom: 15px; font-size: 18px;}
. Comment_avatar_wrap {
width: 42px;
height: 42px;
border: 1px solid # c4c4c4;
border-top-color: # e4e4e4;
border-left-color: # e4e4e4;
background: # fcfcfc;
padding: 4px;
border-radius: 2px;
text-align: center;
margin-bottom: 20px;
}
# Comments. Avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
padding: 0;
margin-bottom: 10px;
}
# Comments. Avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
no-repeat;
}
. Comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
. Comment_admin. Comment_name {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background: # eee;
}
. Comment_admin. COMMENT_DATE {
font-weight: normal;
font-size: 11px;
}
. Comment_name {
background: # eee;
padding: 10px;
font-size: 13px;
font-weight: bold;
position: relative;
}
. Comment_service {
margin-top: 5px
}
. COMMENT_DATE {
color: # a9a9a9;
float: right;
font-size: 11px;
font-weight: normal;
margin-top:-3px;
}
. COMMENT_DATE a {
color: # a9a9a9;
float: right;
font-size: 11px;
font-weight: normal;
}
. COMMENT_DATE a: hover {
color: # a9a9a9;
text-decoration: none;
}
. Comment_body {
margin-top:-72px;
margin-left: 66px;
background: # fcfcfc;
border: 1px solid # d1d1d1;
padding: 10px;
border-radius: 2px;
}
. Comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: # 666;
border: 1px solid # eee;
font-size: 13px;
word-wrap: break-word;
background: # fff;
padding: 10px;
}
. Comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
. Comment_child. Comment_wrap {padding-left: 7%;}
. Comment_reply {
display: inline-block;
margin-top: 8px;
margin-left:-5px;
padding: 1px 12px;
color: # fff! important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: # Bababa;
font: 11px/18px sans-serif;
transition: background-color 1s ease-out 0s;
}
. Comment_reply: hover {
text-decoration: none! important;;
background: # 056b95;
}
. Unneeded-paging-control {display: none;}
. Comment-form {max-width: 100%;! Important;}
# Comment-editor {width: 103%! Important; background: transparent no-repeat 50% 30%}}
. Comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
. Comment_form a: hover {text-decoration: underline;}
. Comment-form p {
background: # 666;
padding: 10px;
margin: 5px 0 5px 0;
color: # eee;
font-size: 13px;
line-height: 20px;
width: 97%;
border-radius: 3px;
position: relative;
}
. Comment-form p: after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom:-16px;
left: 15px;
border: 8px solid transparent;
border-color: # 666 transparent transparent;
}
. Comment_reply_form {
padding: 0 0 0 70px;
}
. Comment_reply_form. Comment-form {width: 99%;}
. Comment_emo_list {
display: none;
}
. Comment_emo_list. Items {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width: 41px;
}
. Comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
. Comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
. Comment_youtube {max-width: 100%! Important; width: 400px; height: 225px; display: block; margin: auto}
. Comment_img {max-width: 100%! Important;}
. Deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: # CCC;
}
. Comment_arrow {
display: block;
width: 9px;
height: 18px;
background: no-repeat;
position: absolute;
margin-left:-19px;
}
. Comment_header {width: 50px}
# Respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
. Comment_avatar no-repeat}
. Comment-delete img {float: right; margin-left: 15px; margin-top: 3px; margin-right: 10px}
. Comment_author_flag {display: none}
. Comment_admin. Comment_author_flag
iframe {border: none; overflow: hidden}
Then replace the code:
<b:includable id='comments' var='post'> ... </ B: includable>
with this:
<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'> <data:commentLabel/> == 1:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</ B: if>
</ H3>
</ B: if>
<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 = 'Reply'> Reply </ 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>
<span class='comment_author_flag'/>
<span class='comment_service'>
<A class = 'comment-delete' expr: href = '"http://www.blogger.com/delete-comment.g?blogID =" + data: + blog.blogId "& postID =" + of data: the comment.id 'expr: title =' Data: the top.deleteCommentMsg '>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUgBzCfer76BGFrC91u_VT9fd6TkYWrlTYftZiiRnj-x7dZ47DsuGXFOCaMVjKbJOxqrNgjfmFFpoWO3QEe5sRH0wtptyRGrOoaYGDmtkKX9w2f7_35ILq-w8z9qf87VIQRXhFokpK_3A/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'>
<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' 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 settings
Config.maxThreadDepth = 6 ;/ / Depth-level threaded comment
Display_Emo = true ;/ / Show emoticons? types of "false" to hide
Replace_Youtube_Link = false ;/ / Embed YouTube video, type "false" to disable
Replace_Image_Link = false ;/ / Auto replace the image link, type "false" to disable.
Replace_Force_Tag = false ;/ / replace Auto virtual tag example: [pre] to <pre>, and [/ pre] to </ 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/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif',
': (', 'Http :/ / 4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif',
'= (', 'Http :/ / 1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif',
'^ _ ^', 'Http :/ / 1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif',
': D', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CTg5iFXw5AQ2ao9NfqbZfmiy2ROdAZKqF09nuJ_XKypQ0V1VntMtLyaqK8x-q7-rVwNvEEvyI9GH_WymHRQWWv-sr1xoqSJ6Joowexa3NFsPKs1PdZcMjTXuKIxcfnysxIe2OWYn5J8/s1600/icon_smile.gif',
'= D', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdCpF50Ou-qINh-7notqOTWeCZFdXpkNRMlqbTlZ8GRvCR6kC7jv9Ec9gPsyIP4rXcTAw80umavPLp_X4tTtHVwFzprYEC65EHC8nOAcKEocj1oAHf1uNCzh_UhAK5LH9Sv14d-N2Tkc/s1600/hihi.gif',
'| O |', 'http://reader-download.googlecode.com/svn/trunk/images/emo/applause.gif',
'@ @,', 'Http :/ / 4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif',
';)', 'Http :/ / 3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif',
':-Bd', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9lRdYUilSCGcrjaEKdB6dnko8bvUmPuIA8Vbi2_7FPeWWO4_n4ZVjCpTPgnSsJBcrFK2NUL63O0Et1-pH_S7Y6NR5FitQRSQPpTRv3JKTdBQF3Gze11jmUSj5fmSZKHvgfrHNtZ3ADY/s1600/thumb.gif',
':-D', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByxltgPPwH2gzWDWfzoLbStk_x8TqA7l56tpt3oO00yLm-r8UN2zDz9nmNHanpZBv5AfKfpYKBBd7r3XtXBKcS6YmZ-JmoZn6FGsWVguTgdnCuMNKN2-RPK6nukjSCvdX0v1RA178Jwg/s1600/thumbsup.gif',
': P', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBs2cK_q6W0J9kyJZs9d65EYuTEh7kCyLH_FiArcFK-5sJ8xJOAQ1ZZd1wKb0FkULS129bwGeB2aI8Jsqy0jhC1pxswjq3O4M6Ne8K7N11rJCZxgyiWsh3HjI6vxhF3I0J1uAd9Aj1OU/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>'
];
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 = \' .1 c \ '; 3 1b = $ (\' # O -19 \ '). G (\' A \ '); u 1l (F) {3 1j = \' i = 0; i <F.5; i + +) {9 (1j.d (F.1Q (i))! = -1) {F = Fb (0, i);}} z 11 F} $ (\ '# 1P .1 ip \'). j (u (y, 7) {9 (1J) {3 l = \ '1 v :/ / 13.VW/1y? v = \ '; 3 8 = 7.D (l), D (8! = -1) {1d = 7.b (8), J = 1l (1d), 3 X = Jd (\ '& \'); 3 N = \ '\'; 9 (X == -1) {N = Jb (L.5)} Y {N = Jb (L.5, X)} 3 1r = \ '<1u B = "1T" A = "1v :/ / 13 .VW/1U / \' + N + \ '? 1V = 1 "1W =" 0 "2w> </ 1u> \'; 7 = 7.b (0.8) r +1 +7. b (8 J + .5); 8 = 7.D (l), 9 (8 == -1) {l = \ '1 Z :/ / 13.VW/1y? v = \ '; 8 = 7.D (l)} 9}} (21) {3 Z = \ '\'; 3 s = 7; E (3 i = 0; i <1w.5; i + +) {3 l = \ '. \' +1 w [i]; 3 m = sC ( ); 3 8 = md (l), D (8! = -1) {k = sb (0.8 + L.5), m = kC (); 3 q = \ '2 h: / / \ '; 3 w = md (q); 3 A = '\' + k + \ '"B =" 2r "/> \'; s = sb (8 + L.5), m = sC (); 8 = md ( 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 = sd (R [i]); 9 (8! = -1) {7 = 7.b (0.8) + R [i +1] +7. b (8 + R [i] .5)} Y {11}} z 7}}}); $ (\ '.1 K \'). j (u (y, 7) {9 (1A) {3 5 = x.5; 9 (5% 2 == 1) {5 - 12} 3 = \ '\'; E (3 i = 0; i <5; i + = 2) {3 1e = \ '<1f> \' + x [i] + \ '</ 1f> \', 3 S = \ '<10 A =' \ '+ x [ i +1] + \ '"B =" 1B "/> \'; 12 + = \ '<QB="1O"> \' S +1 + e + \ '</ Q> \' z} 12} }); $ (\ '.1 .1 g ip \'). j (u (i, h) {t = hm (); y = Td (\ '@ <a U = "# c \'); 9 (y! = -1) {14 = Td (\ '</ a> \', y); 9 (14! = -1) {h = hb (0, y) + hb (14 +4) zh }}}); u 1k (g) {r = gd (\ 'c \'); 9 (r! = -1) g = gb (r +1);} zg u 1m (g) {g = \ '& 1X = \' g+ + \ '#% 1n \'; 1o = 1b.20 (/ #% 1n /, g);} uz 1o 1p () {j = $ (o). j (); $ (o). j (\ '\'); o = \ '.1 c \'; $ (o). j (j); $ (\ '# O -19 \'). G (\ 'A \', 1b)} u 1q (e) {g = $ (e). G (\ '15 \ '); g = 1k (g); j = $ (o). j (); 9 (o == \ '.1 c \') {1s = \ '<a U="#1t" 27="1p()"> \' +28.29 + \ '</ a> < a i = 0; i <P.5; i + +) {9 (\ '1 z \ '2 m P [i]) {3 g = P [i] .1 z; 3 1a = 2o ($ ( \ '# c \' g+ + \ ': L \'). G (\ '1 C \ ')); $ (\' # c \ '+ g+ \' .2 q: L \ '). j (u (y, 7) {3 H = P [i] .15; 9 (1a> = 2s.2t) {$ (\ '# c \' + H + \ ': L .2 u \') .1 h ()} 3 K = $ (\ '# c \' + H + \ ': L \'). j (); K = \ '<QB = "1g" 15 = "c \' + H + \ '"
var avatar = $ ("# comments");
avatar.find ('. comment_avatar img'). each (function () {
ava var = $ (this). attr ('src');
$ (This). Show (). Attr ('src', ava.replace (/ \ / s [0-9] + (\-c)? \ / /, "/ S45-c /"));
});
/ /]]>
</ Script>
</ B: includable>
STYLE 2
Save this code above ]]> </ b: skin>
# Comments {}
# Comments h3 {margin-bottom: 25px; font-size: 18px;}
. Comment-body-author {background: # FFFFFF; color: # 008000; border: 1px dotted # 008000; margin: 0; padding: 0 0 0 10px;}
. Comment_share {color: # 999999; cursor: pointer; font-family: Verdana; font-size: 10px; line-height: 1.5em; max-width: 100%; font-weight: normal; padding-left: 5px; # comment_rep} a: hover {text-decoration: none; color: # 464 646! important;}
. Comment_avatar {height: 48px; width: 48px; background: # F0F0F0 url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPrJ3tCg8xG-Mn1exeQyit_MX-jXPqtlA5ox6mqHW5MrZp0WS7UYrF4aZjOIKC4cY_CV8opvfBReryjLMzyJeFqnlrDbUUAhILCQXTxCrIbbt7-QdqU9E5vR_YzIQQGlEHn7xsdwONzZ8/s48/anon48.gif) no-repeat center center; float : left; margin-right: 10px;-webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px; overflow: hidden;}
. Comment_name {color: # 444; font-size: 18px; font-weight: normal; line-height: 19.5px; max-width: 100%; text-decoration: none; margin-top: 5px; text-transform: uppercase }. comment-menu {float: right; list-style: none; width: 0px; height: 0;}. comment_name a {text-transform: uppercase; font-size: 18px; color: # 444; text-decoration: none;}
. Comment_name a: hover {color: # 0088b2; text-decoration: none;}
. Comment_body p {font-size: 14px; line-height: 22px;}
. Comment_body {margin-top: 20px; margin-bottom: 20px; border: 1px solid # d2d2d2; padding: 20px 20px; position: relative;}
. COMMENT_DATE {color: # 999; font-style: italic; font-size: 13px; line-height: 25px; cursor: pointer; font-weight: normal;} # comments. Separate {color: # cccccc; font-family: 'Oswald', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 40px; padding-left: 5px; padding-right: 5px; line-height : 10px; t: 15px;} # comments. author-mark {background: # d2d2d2; color: white;-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px; padding: 2px 2px 6px 6px; font-size: 15px; line-height: 15px;}. comment-share {display: inline;}. comment-share li {display: inline;}. li.button a comment-share {background: # 555; color: white; padding: 0 5px 5px 2px;-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px; displays: none;}. li.button comment-share: hover a {background: # 000;} # comment_rep {margin-top:-27px; float: right;}. comment_child. comment_body {margin-top: 20px; margin-bottom: 30px;}. comment_child. comment_wrap {padding-left: 40px}
. Comment_reply {cursor: pointer; font-size: 11px; line-height: 1.5em; font-style: italic; max-width: 100%; background: # e1e1e2; font-weight: 400; padding: 2px 12px; color: # 999; float: right; position: absolute; right: 1px; bottom: 1px;}
. Comment_reply a {text-decoration: none; color: # 999! Important; float: right; position: absolute}
. Comment_admin. Avatar-image-container {}. Unneeded-paging-control {display: none;}. Comment-form {max-width: 100%;! Important; margin-top:-15px! Important} # comment-editor {width: 101%! important}. comment_reply_form. comment-form {width: 100%;}. comment_youtube {max-width: 100%! important; width: 400px; height: 225px; display: block; padding-top: 10px; padding-bottom: 10px;} # respond {overflow: hidden; padding-left: 10px; clear: both;}. comment_avatar * {max-width: 1000%! important; display: block; max-height: 1000%! important; width: 48px! important; height: 48px! important;-webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px; margin-right: 10px;}. comment_child. comment_avatar,. comment_child. comment_avatar * {width: 40px! important; height: 40px! important; float: left; margin-right: 10px;}. comment_form a {color: # 2f6986; text-decoration: none;}. comment_form a: hover {color: # 2f6986; text-decoration: underline;}
. Comment_author_flag {display: none}
. Comment_admin. Comment_author_flag {display: inline; background: # c9c9c9; font-size: 13px; font-weight: normal; padding: 2px 6px; margin-left: 8px; color: # fff; border-radius: 4px; text-transform: uppercase ; letter-spacing: .1 em}
. Comment-delete img {float: right; margin-left: 10px; position: absolute; margin-top: 7px;}
# Comment-editor {width: 103%! Important; background: transparent no-repeat 50% 30%}
. Comment-form {max-width: 100%;! Important; margin-top: 25px! Important}
. Comment_arrow {display: block; width: 18px; height: 9px; background: no-repeat; position: absolute; margin-top:-29px; margin-left:-5px;}
. Comment_emo_list. Items {
float: left; width: 40px; text-align: center; height: 40px; margin: 10px 10px 0 0;}
. Comment_emo_list span {display: block; font-weight: bold; font-size: 11px; letter-spacing: 1px;}
. Comment_youtube {max-width: 100%! Important; width: 400px; height: 225px; display: block; margin: auto}
. Comment_img {max-width: 100%! Important}
. Comment-form p {background: # 666; padding: 10px; margin: 5px 0 5px 0; color: # eee; font-size: 13px; line-height: 20px; width: 97%; border-radius: 3px; position : relative;}
. Comment-form p: after {content: ""; width: 0; height: 0; position: absolute; bottom:-16px; left: 15px; border: 8px solid transparent; border-color: # 666 transparent transparent;}
iframe {border: none; overflow: hidden}
Then replace the code:
<b:includable id='comments' var='post'> ... </ B: includable>
with this:
<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>
</ B: if>
<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' rel='nofollow' target='_blank'> <data:comment.author/> </ a>
<b:else/>
<data:comment.author/>
</ B: if> <span class='comment_author_flag'> Admin </ span>
</ 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 "& postID =" + of data: the comment.id 'expr: title =' Data: the top.deleteCommentMsg '>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUgBzCfer76BGFrC91u_VT9fd6TkYWrlTYftZiiRnj-x7dZ47DsuGXFOCaMVjKbJOxqrNgjfmFFpoWO3QEe5sRH0wtptyRGrOoaYGDmtkKX9w2f7_35ILq-w8z9qf87VIQRXhFokpK_3A/s1600/delete4.png' title='Hapus Komentar'/>
</ 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)'> Reply </ 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 settings
Config.maxThreadDepth = 6 ;/ / How threaded level that you want
Display_Emo = true ;/ / Display emoticons or not? set to "false" to no display
Replace_Youtube_Link = true ;/ / Auto replace iframe embedded youtube link to, choose "false" to disable
Replace_Image_Link = true ;/ / Auto replace an image link choose "false" to disable.
Replace_Force_Tag = true ;/ / replace Auto virtual tag an example: [pre] to <pre>, and [/ pre] </ pre>, If user input wrong, your layout will be gone. becare ful Then when enable this trap
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'] ;/ / (support: jpg, gif, png, bmp), effect only when Replace_Image_Link = true
/ / Config emoticons declare
Emo_List = [
':)', 'Http :/ / 1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif',
': (', 'Http :/ / 4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif',
'= (', 'Http :/ / 1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif',
'^ _ ^', 'Http :/ / 1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif',
': D', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CTg5iFXw5AQ2ao9NfqbZfmiy2ROdAZKqF09nuJ_XKypQ0V1VntMtLyaqK8x-q7-rVwNvEEvyI9GH_WymHRQWWv-sr1xoqSJ6Joowexa3NFsPKs1PdZcMjTXuKIxcfnysxIe2OWYn5J8/s1600/icon_smile.gif',
'= D', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdCpF50Ou-qINh-7notqOTWeCZFdXpkNRMlqbTlZ8GRvCR6kC7jv9Ec9gPsyIP4rXcTAw80umavPLp_X4tTtHVwFzprYEC65EHC8nOAcKEocj1oAHf1uNCzh_UhAK5LH9Sv14d-N2Tkc/s1600/hihi.gif',
'| O |', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjjR75zEpaEq2QPeMVPb3rBvfG0MtoXIlACOMghUmk2eQT7xRFwdIygKWaLDNsBisfyGlRyC9oL0zFLXn9wBM1g_BoZCRSbczj750eXN2Le_RuNf0nc2DnCUxKxDR5ej3pd_KKGpd_zo/s1600/applause.gif',
'@ @,', 'Http :/ / 4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif',
';)', 'Http :/ / 3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif',
':-Bd', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw9lRdYUilSCGcrjaEKdB6dnko8bvUmPuIA8Vbi2_7FPeWWO4_n4ZVjCpTPgnSsJBcrFK2NUL63O0Et1-pH_S7Y6NR5FitQRSQPpTRv3JKTdBQF3Gze11jmUSj5fmSZKHvgfrHNtZ3ADY/s1600/thumb.gif',
':-D', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByxltgPPwH2gzWDWfzoLbStk_x8TqA7l56tpt3oO00yLm-r8UN2zDz9nmNHanpZBv5AfKfpYKBBd7r3XtXBKcS6YmZ-JmoZn6FGsWVguTgdnCuMNKN2-RPK6nukjSCvdX0v1RA178Jwg/s1600/thumbsup.gif',
': P', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBs2cK_q6W0J9kyJZs9d65EYuTEh7kCyLH_FiArcFK-5sJ8xJOAQ1ZZd1wKb0FkULS129bwGeB2aI8Jsqy0jhC1pxswjq3O4M6Ne8K7N11rJCZxgyiWsh3HjI6vxhF3I0J1uAd9Aj1OU/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>'
];
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 = \' .1 c \ '; 3 1b = $ (\' # O -19 \ '). G (\' A \ '); u 1l (F) {3 1j = \' i = 0; i <F.5; i + +) {9 (1j.d (F.1Q (i))! = -1) {F = Fb (0, i);}} z 11 F} $ (\ '# 1P .1 ip \'). j (u (y, 7) {9 (1J) {3 l = \ '1 v :/ / 13.VW/1y? v = \ '; 3 8 = 7.D (l), D (8! = -1) {1d = 7.b (8), J = 1l (1d), 3 X = Jd (\ '& \'); 3 N = \ '\'; 9 (X == -1) {N = Jb (L.5)} Y {N = Jb (L.5, X)} 3 1r = \ '<1u B = "1T" A = "1v :/ / 13 .VW/1U / \' + N + \ '? 1V = 1 "1W =" 0 "2w> </ 1u> \'; 7 = 7.b (0.8) r +1 +7. b (8 J + .5); 8 = 7.D (l), 9 (8 == -1) {l = \ '1 Z :/ / 13.VW/1y? v = \ '; 8 = 7.D (l)} 9}} (21) {3 Z = \ '\'; 3 s = 7; E (3 i = 0; i <1w.5; i + +) {3 l = \ '. \' +1 w [i]; 3 m = sC ( ); 3 8 = md (l), D (8! = -1) {k = sb (0.8 + L.5), m = kC (); 3 q = \ '2 h: / / \ '; 3 w = md (q); 3 A = '\' + k + \ '"B =" 2r "/> \'; s = sb (8 + L.5), m = sC (); 8 = md ( 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 = sd (R [i]); 9 (8! = -1) {7 = 7.b (0.8) + R [i +1] +7. b (8 + R [i] .5)} Y {11}} z 7}}}); $ (\ '.1 K \'). j (u (y, 7) {9 (1A) {3 5 = x.5; 9 (5% 2 == 1) {5 - 12} 3 = \ '\'; E (3 i = 0; i <5; i + = 2) {3 1e = \ '<1f> \' + x [i] + \ '</ 1f> \', 3 S = \ '<10 A =' \ '+ x [ i +1] + \ '"B =" 1B "/> \'; 12 + = \ '<QB="1O"> \' S +1 + e + \ '</ Q> \' z} 12} }); $ (\ '.1 .1 g ip \'). j (u (i, h) {t = hm (); y = Td (\ '@ <a U = "# c \'); 9 (y! = -1) {14 = Td (\ '</ a> \', y); 9 (14! = -1) {h = hb (0, y) + hb (14 +4) zh }}}); u 1k (g) {r = gd (\ 'c \'); 9 (r! = -1) g = gb (r +1);} zg u 1m (g) {g = \ '& 1X = \' g+ + \ '#% 1n \'; 1o = 1b.20 (/ #% 1n /, g);} uz 1o 1p () {j = $ (o). j (); $ (o). j (\ '\'); o = \ '.1 c \'; $ (o). j (j); $ (\ '# O -19 \'). G (\ 'A \', 1b)} u 1q (e) {g = $ (e). G (\ '15 \ '); g = 1k (g); j = $ (o). j (); 9 (o == \ '.1 c \') {1s = \ '<a U="#1t" 27="1p()"> \' +28.29 + \ '</ a> < a i = 0; i <P.5; i + +) {9 (\ '1 z \ '2 m P [i]) {3 g = P [i] .1 z; 3 1a = 2o ($ ( \ '# c \' g+ + \ ': L \'). G (\ '1 C \ ')); $ (\' # c \ '+ g+ \' .2 q: L \ '). j (u (y, 7) {3 H = P [i] .15; 9 (1a> = 2s.2t) {$ (\ '# c \' + H + \ ': L .2 u \') .1 h ()} 3 K = $ (\ '# c \' + H + \ ': L \'). j (); K = \ '<QB = "1g" 15 = "c \' + H + \ '"
var avatar = $ ("# comments");
avatar.find ('. comment_avatar img'). each (function () {
ava var = $ (this). attr ('src');
$ (This). Show (). Attr ('src', ava.replace (/ \ / s [0-9] + (\-c)? \ / /, "/ S45-c /"));
});
/ /]]>
</ Script>
</ B: includable>
NOW THIS WAS TRICK HOW TO ADD THREADED COMMENTS ON BLOGGER
PLEASE SHARE THIS POST WITH UR FRIENDS AND SHOW YOUR LOVE 
