Cara Membuat Threaded Comment Plus Emoticon di Blogger
Komentar bawahan Blogger memang membosankan melihat tampilannya. Tujuan dari pembuatan Threaded Comment adalah untuk memperindah dan mempercantik tampilan komentar pada postingan blog anda. Setelah anda membuat sebuah blogger baru, tentunya semuanya serba Default. Maksud disini adalah semuanya masih bawahan Blogger. Sekarang saatnya untuk anda membuat dan menyesuaikan dengan mode komentar yang mengesankan untuk pembaca blog anda. Perlu diketahui, bahwa komentar bawahan blogger tidak bisa membedakan mana Admin/Aurthor, Jutru tujuan dari pembuatan ini adalah untuk membuat lencana dalam membedakan mana Admin/Aurthor dan mana pembaca komentar.
Screenshoot :
Cara Membuat Threaded Comment Plus Emoticon di Blogger
Cara Pertama :
1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML
Proses Pembuatan :
1. Temukan kode dibawah ini. <CTRL + F>
Wajib Baca :
Jika kode <b:include data='post' name='threaded_comments'/> lebih dari satu, silakan anda ganti keduanya dengan kode dibawah ini
2. Jika sudah ketemu? silakan anda ganti dengan kode dibawah ini.
3. Jika kode diatas sudah diganti, selanjutnya temukan kode seperti dibawah ini.
4. Jika sudah ketemu? Copy&paste kode berikut ini dan silakan anda ganti dengan kode dibawah ini.
6. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
10. Kemudian ganti kode diatas dengan kode berikut ini.
Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda lalu berkomentar untuk mencobanya. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Threaded Comment Plus Emoticon di Blogger
1. Temukan kode dibawah ini. <CTRL + F>
<b:include data='post' name='threaded_comments'/>Wajib Baca :
Jika kode <b:include data='post' name='threaded_comments'/> lebih dari satu, silakan anda ganti keduanya dengan kode dibawah ini
2. Jika sudah ketemu? silakan anda ganti dengan kode dibawah ini.
<b:include data='post' name='comments'/>3. Jika kode diatas sudah diganti, selanjutnya temukan kode seperti dibawah ini.
<b:includable id='comments' var='post'>...</b:includable>4. Jika sudah ketemu? Copy&paste kode berikut ini dan silakan anda ganti dengan kode dibawah ini.
<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>
<a class='click-comment' expr:title='data:commentLabelPlural' href='#comment-form'>Write <data:commentLabelPlural/></a>
</b:if>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><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:post.adminClass == data:comment.adminClass'>
<div class='comment_inner comment_admin'>
<b:else/>
<div class='comment_inner'>
</b:if>
<div class='comment_body'>
<div class='comment_header'>
<div class='comment_avatar_wrap'>
</div>
<div class='clear'/>
</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>
<div class='comment_author_flag'>AUTHOR</div>
</div>
<span class='comment_service'>
<span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
<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='Reply'>Reply</a>
<div class='clear'/>
</b:if>
<div class='comment_avatar'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
</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'/>
</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' expr:title='data:post.oldestLinkText'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl' expr:title='data:post.olderLinkText'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl' expr:title='data:post.newerLinkText'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl' expr:title='data:post.newestLinkText'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='comment_form' id='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' 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 = {'maxThreadDepth':'0'};
</b:if>
//<![CDATA[
//Global setting
Config.maxThreadDepth = 3;
Display_Emo = true;
Replace_Youtube_Link = false;
Replace_Image_Link = false;
Replace_Force_Tag = false;
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];
//Pengaturan Emoticon
Emo_List = [
':)' ,'http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png',
':(' ,'http://4.bp.blogspot.com/-RDtah-TXteU/VJNblptXyEI/AAAAAAAAH70/GGZg4MMUVxA/s1600/sad.png',
' =(' ,'http://1.bp.blogspot.com/-dzENpgankUY/VJNbcfrM59I/AAAAAAAAH6A/UC7FJQwT-9E/s1600/disappointed.png',
'^_^' ,'http://2.bp.blogspot.com/-eeLWBWx7zaI/VJNbnR-JhoI/AAAAAAAAH8E/4vUZ3j_GoEg/s1600/shy.png',
' :D' ,'http://2.bp.blogspot.com/-rvM5sSYqd2k/VJNbjkemjyI/AAAAAAAAH7k/QcT_8JETczs/s1600/noprob.png',
'=D' ,'http://1.bp.blogspot.com/-DB0TS3jw6n8/VJNbgab1A_I/AAAAAAAAH7I/4Cr8aYd6AmU/s1600/happy.png',
'*' ,'http://1.bp.blogspot.com/-mz0Rl1l5ZYw/VJNbm0HqcDI/AAAAAAAAH8I/yu8XBAQmYOI/s1600/shit.png',
'|o|' ,'http://3.bp.blogspot.com/-i5w-i1jFe0U/VJNbaQxedgI/AAAAAAAAH5o/z7LK9qxEebs/s1600/clap.png',
'@@,' ,'http://2.bp.blogspot.com/-lbZ9iDF66F8/VJNbqSG8yNI/AAAAAAAAH9A/bnAQmQrrrZo/s1600/surprise.png',
' ;)' ,'http://1.bp.blogspot.com/-Q--_b4-u1ZY/VJNbrI3A3LI/AAAAAAAAH8w/xshqjz4f3cs/s1600/trope.png',
'(y)' ,'http://3.bp.blogspot.com/-_lM3w2ZD7K8/VJNbiIf2PII/AAAAAAAAH7g/U5qLOVDZg8c/s1600/like.png',
'(n)' ,'http://4.bp.blogspot.com/-EdvYpWDdZPI/VJNbc2J75FI/AAAAAAAAH6I/kcpuLO7TXFg/s1600/dislike.png',
' -_-' ,'http://4.bp.blogspot.com/-Y2KF1cqsEiQ/VJNbolnNw1I/AAAAAAAAH8Y/mzpdmmt9lp4/s1600/sigh.png',
':-*' ,'http://2.bp.blogspot.com/-A_W5lI-_J8I/VJNbi2oXwjI/AAAAAAAAH7c/wlxM7CETbhI/s1600/love.png',
':;)' ,'http://4.bp.blogspot.com/-J7s7flyAolE/U6tMYuCWJjI/AAAAAAAAD-g/ktLPs0sF0zM/s1600/smile.png',
':=)','http://1.bp.blogspot.com/-1BqZVIOmokE/U6tP_zEGUXI/AAAAAAAAD-4/Ykfh8PqPa74/s1600/Frown.png',
' =/(' ,'http://2.bp.blogspot.com/-SL2PzXhI6-I/U6tMUbl4uBI/AAAAAAAAD9c/HmgkQTi81jc/s1600/berduka.gif',
';;)' ,'http://2.bp.blogspot.com/-6JEoWkFJtMU/U6tMYfYjHJI/AAAAAAAAD-U/ggiVnSMQWEc/s1600/sm_smile.gif',
' :wkwk:' ,'http://3.bp.blogspot.com/-alzlBnNEQmI/U6tMWxMCe_I/AAAAAAAAD-E/upslDYz1T3o/s1600/laugh.png',
'=D' ,'http://1.bp.blogspot.com/-iVpfzVgecII/U6tQBGbBVNI/AAAAAAAAD_Q/yM9i3ANzAh4/s1600/Laughing.png',
'=)D' ,'http://1.bp.blogspot.com/-pdpnmWqSHyE/U6tQCnfbjeI/AAAAAAAAD_o/NfPqVrNVV-E/s1600/Yuck.png',
'|-o-|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwqkGTnU8sFEFEk14e5TnWJ_7XvPXh6JcNxlyjVLhQCR6P6GFT90_uYEgrHjWeHPjR1ZCx5oZbbeth7bTvi4q6XgHjDLLGZcrxhlRJBXz1V_OWHMJ3vkTU-kbYAvf3geC8Y6iy5IX1RVPJ/s1600/applause-yahoo-emoticon.gif',
'(@@)' ,'http://1.bp.blogspot.com/-nb5zqf7iKBE/U6tMUWl6XcI/AAAAAAAAD9Y/V9qG-QRDslU/s1600/bingung.gif',
' ;)' ,'http://2.bp.blogspot.com/-EvSfZMZuwKo/U6tMVvRUL1I/AAAAAAAAD9w/1zzRy8EUC5A/s1600/cool.png',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimLkybTN_CByvjJN7U1Dx9trUMOqeeRP449n68j_gOwQeAneqRke0oRXHx5PFVb22dhNrzYHQWB_Nm-Q2OHx4U8gEUCbRlBMJfWFNG6l_Gvfyhh9R0sJj276tuE-kMZsFpX9B4kj_UPwJ5/s1600/thumbs-up-yahoo-emoticon.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHE4KnhsYPOXUhYj3BUwjt4v3bSrU2rd9gAsaJ-dumqoO4n0m4ELu8J9s-gqfvypZVHa6-ltfm1b0-GWs3oT9ELY1AGOkWOWKGoViQzIWfz5zBcG3jLdpaKeNFbGF0b37-7v4fGWyTby0/s1600/thumbsup.gif',
' :p' ,'http://2.bp.blogspot.com/-Ex1KikUVM2Q/U6tMVfiivCI/AAAAAAAAD9s/dKyvB1R6F8I/s1600/capede.gif',
':ng' ,'http://4.bp.blogspot.com/-SLdFsLn7w00/U6tMXp7KTGI/AAAAAAAAD-I/MFuTw6CkbfI/s1600/ngakak.gif',
':lv' ,'http://3.bp.blogspot.com/-KMdDgs2xyr4/U6tMV-juTSI/AAAAAAAAD90/jadn4_Ji8js/s1600/heart.png',
];
//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 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)?\//,"/s100-c/"));
});
//]]>
</script>
</b:includable>6. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
/* CSS Comments */
#comments{background:#fff;clear:both;margin:20px auto 0;line-height:1em;padding:20px;border:1px solid #e6e6e6;}
#comments h3{display:inline;line-height:20px;margin-bottom:20px;margin-top:-20px;margin-left:-20px;font-family:'Arimo',sans-serif;font-size:14px;position:absolute;background:#fff;color:#999;font-weight:700;text-transform:uppercase;padding:10px 20px 10px 50px;border:1px solid #e6e6e6;border-top:none;border-left:none;}
#comments h3:before {font-family:fontawesome;content:"\f086";margin-right:10px;font-size:20px;padding:10px 15px;position:absolute;left:0;top:0;font-weight:normal;}
#comments .click-comment{background:#fafafa;color:#999;float:right;text-decoration:none;display:inline;line-height:20px;margin-bottom:20px;margin-top:-20px;margin-right:-20px;font-family:'Arimo',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;padding:10px 20px;border:1px solid #e6e6e6;border-top:none;border-right:none;}
#comments .click-comment:hover{background:#ff9934;color:#fff;}
.comment_avatar_wrap{border-radius:10%;width:46px;height:46px;border:none;background:none;text-align:center;padding:0;overflow:hidden;}
#comments .comment_avatar {border-radius:10%;width:46px;height:46px;max-width:46px;max-height:46px;background:#f9f9f9;padding:4px;text-align:center;position:absolute;top:0;left:0;overflow:hidden;}
#comments .comment_admin .comment_avatar{border-radius:10%;width:46px;height:46px;max-width:46px;max-height:46px;padding:4px;text-align:center;position:absolute;top:0;left:0;overflow:hidden;}
#comments .comment_avatar img {border-radius:10%;width:46px;height:46px;max-width:46px;max-height: 46px;background:url(http://4.bp.blogspot.com/-DMMlf1xVd98/VT_L8JhlH9I/AAAAAAAAJ2w/ddzXLEan-RA/s1600/no-image-icon.png) no-repeat;overflow:hidden;}
.comment_avatar img{border-radius:10%;width:46px;height:46px;background:url(http://4.bp.blogspot.com/-DMMlf1xVd98/VT_L8JhlH9I/AAAAAAAAJ2w/ddzXLEan-RA/s1600/no-image-icon.png) no-repeat;overflow:hidden;}
.comment_name a{font-family:'Arimo',sans-serif;font-weight:700;font-size:15px;padding:5px 0;color:#666;text-decoration:none}
.comment_child .comment_name a{color:#666;}
.comment_child .comment_name a:hover {color:#29abe2;}
.comment_admin .comment_name{background:#fff;padding:0 20px 0 65px;left:5px;top:10px;display:inline;font-weight:700;font-size:16px;font-family:'Arimo',sans-serif;text-decoration:none;border-radius:3px;}
.comment_admin .comment_date{left:10px;font-weight:700;font-size:11px;}
.comment_name{font-size:16px;background:#fff;font-family:'Arimo',sans-serif;font-weight:700;padding:0 20px 0 65px;position:absolute;left:5px;top:10px;display:inline;line-height:35px;border-radius:3px;transition:all .3s ease-out;}
.comment_name:hover,.comment_name a:hover,.comment_admin .comment_name a:hover,.comment_admin .comment_name:hover{color:#29abe2;}
.comment_service{position:absolute;top:31px;right:0;}
.item-control {display:inline-block;}
.comment_date a{font-size:11px;font-weight:400;text-transform:none;text-decoration:initial;
color:#666!important;text-align:center;padding:1px 6px;opacity:0.9;transition:all .3s ease-out;}
.comment_date a:hover{color:#29abe2!important;}
.comment-delete{font-family:'Arimo';font-size:11px;color:#666!important;opacity:0.9;}
.comment-delete:hover{color:#29abe2!important;}
.comment_body{margin:20px 0;padding:0;position:relative;}
.comment_body p{line-height:1.6em;color:#666;font-size:14px;font-family:'Arimo',Helvetica,Arial,sans-serif;word-wrap:break-word;background:#fafafa;padding:30px 20px;position:relative;margin-top:25px;border-radius:6px;box-shadow:0 0 0 1px #ddd;transition:all .3s ease-out;}
.comment_body p:before, .comment_body p:after {bottom:100%;left:5%;border:solid transparent;
content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.comment_body p:after {border-color:rgba(255,255,255,0);border-bottom-color:#fafafa;
border-width:8px;margin-left:-8px;}
.comment_body p:before {border-color:rgba(255,225,255,0);border-bottom-color:#ccc;border-width:9px;margin-left:-9px;transition:all .3s ease-out;}
.comment_child .comment_body p{color:#666;}
.comment_body p img{vertical-align:middle;margin:0 5px;}
.comment_body p:hover{box-shadow:0 0 0 1px #bbb;}
.comment_body p:hover:before {border-bottom-color:#999;}
.comment_inner{padding-bottom:5px;margin:5px 0}
.comment_child .comment_wrap{padding-left:7%}
.comment_child .comment_body{margin-top:-15px;}
.comment_reply{display:inline-block;background:#fdfdfd;color:#999!important;text-align:center;
font-family:'Arimo';font-size:11px;margin:0;padding:2px 6px 4px 6px;border-radius:2px;border:1px solid #ccc;}
.comment_reply:hover{text-decoration:none!important;background:#fff;color:#444!important;border-color:#999;}
.comment-form{width:100%;max-width:100%;margin-bottom:10px;padding:0;}
.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#666}
#comment-editor{width:103%!important;background:url('http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif') no-repeat 50% 25%;position:relative;margin-left:-8px;margin-top:-15px}
.comment-form p{position:relative;background:#374760;color:#fff;font-size:14px;font-family:'Arimo',Helvetica,Arial,sans-serif;line-height:1.5em;margin-bottom:20px;padding:15px;border-radius:3px;}
.comment-form p:after, .comment-form p:before {top:100%;left:8%;border:solid transparent;
content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.comment-form p:after {border-color:rgba(68,68,68,0);border-top-color:#374760;border-width:9px;margin-left:-9px;}
.comment-form p:before {border-color:rgba(221,221,221,0);border-top-color:transparent;border-width:10px;margin-left:-10px;transition:all .3s ease-out;}
.comment_reply_form{padding:0 0 0 7%}
.comment_reply_form .comment-form{width:100%}
.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:0 0 10px;}
.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#666}
.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img{max-width:100%!important}
#respond{overflow:hidden;padding-left:10px;clear:both}
.unneeded-paging-control,.comment_author_flag{display:none}
.comment_admin .comment_author_flag {display:inline;font-family:'Arimo';font-size:10px;font-weight:400;background:#ff9934;color:#fff;text-align:center;position:relative;padding:2px 6px;line-height:normal;border-radius:2px;margin-left:10px;}
.comment_child .comment_admin .comment_author_flag {color:#fff;}
.spammer-detected{font-size:14px!important;color:#fff!important;background:#5cb0d8!important;margin:25px;
display:inline-block;padding:10px 15px!important;}
.deleted-comment{display:inline-block;color:#999;word-wrap:break-word;background:#f9f9f9;margin-top:20px;padding:10px;font-size:13px;font-family:'Arimo',Helvetica,Arial,sans-serif;border-radius:3px;opacity:1;}
iframe{border:none;overflow:hidden}
.paging-control-container{text-align:center;margin:0 0 0 25%;}
.paging-control-container a{text-align:center;margin:0 auto;background:#666;padding:5px 10px;
color:#fff;transition:all .3s ease-out}
.paging-control-container a:hover{background:#e6ae48;color:#fff;}
.comment_header {padding:0;}
.comment_child .comment_header {padding:0;}
#emo-box,#hide-emo {display:none}
.small-button1 a {font-size:12px;font-family:'Arimo';cursor:pointer;font-weight:400;margin:10px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;color:#fff;padding:2px 10px;cursor:pointer;border-radius:2px;background-color:rgba(255,255,255,0.3);transition: all 0.3s ease-out;}
.small-button1:hover a{background-color:rgba(255,255,255,0.2);color:#fff;display:inline-block;}
span.small-button1 {text-align:left;display:inline-block;}
/* CSS Fixed Inner */
.widget ul {line-height:1.4em;}
.rich-snippet {padding:10px;margin:15px 0 0;border:3px solid #e6e6e6;font-size:12px;}
#Attribution1 {height:0px;visibility:hidden;display:none;}
.status-msg-wrap {width:100%;margin:20px auto;}
.status-msg-body {padding:20px 2%;width:96%;background:#fff;}
.status-msg-border {border:none;opacity:1;width:auto;}
.status-msg-bg {background-color:#fff;}
.status-msg-hidden {padding:20px 2%;}
.rich-snippet {padding:10px;margin:15px 0 0;border:none;font-size:12px;}
#Profile1 .widget-content {display:inline-block;}
.Profile img {margin:0 10px 0 0;border-radius:5px;}
a.profile-name-link.g-profile,a.profile-link {color:#666;float:left;margin:0 0 5px 0;}
.profile-textblock {color:#666;}
.Profile .profile-datablock {margin:0 0 .5em;display:inline-block;}
.quickedit{display:none;visibility:hidden}
span.post-count {font-size:11px;color:#666;}
#ArchiveList a.post-count-link, #ArchiveList a.post-count-link:link, #ArchiveList a.post-count-link:visited {text-decoration:none;color:#666;}
select#BlogArchive1_ArchiveMenu {width:100%;padding:10px;font-family:'Arimo';background:#fff;color:#999;border:1px solid #e6e6e6;border-radius:2px;text-transform:uppercase;}
select#BlogArchive1_ArchiveMenu:active, select#BlogArchive1_ArchiveMenu:focus {outline:none;
box-shadow:none;}
select#BlogArchive1_ArchiveMenu:after {content:" ";position:absolute;top:50%;margin-top:-2px;
right:8px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #aaa;}
.comment-post-message a,.small-button1 a {font-size:13px;font-family:'Open Sans';cursor:pointer;font-weight:400;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;background-color:#2ba6e1;color:#fff;padding:4px 10px;cursor:pointer;border-radius:3px;}
.comment-post-message:hover a,.small-button1:hover a{text-shadow:none;display:inline-block;background-color:#2797cc;color:#fff;}
#comment-editor{width:100%!important;}<b:includable id='comment-form' var='post'>...</b:includable><b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable><b:includable id='threaded-comment-form' var='post'>...</b:includable>10. Kemudian ganti kode diatas dengan kode berikut ini.
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:else/>
<h4 id='comment-post-message'>Tambahkan Komentar</h4>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
<span class='small-button1'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none'' title='Show Emoticon'>Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block'' title='Hide Emoticon'>Emoticon</a></span>
</span>
</p>
<div id='emo-box'>
<div class='comment_emo_list'/>
</div>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda lalu berkomentar untuk mencobanya. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Threaded Comment Plus Emoticon di Blogger
Related Post
test emo :)
ReplyDelete