Komentar bawahan Blogger memang membosankan melihat tampilannya. Tujuan dari pembuatan Threaded Comment ialah untuk memperindah dan mempercantik tampilan komentar pada postingan blog anda. Setelah anda menciptakan sebuah blogger baru, tentunya semuanya serba Default. Maksud disini ialah semuanya masih bawahan Blogger. Sekarang saatnya untuk anda menciptakan dan menyesuaikan dengan mode komentar yang mengesankan untuk pembaca blog anda. Perlu diketahui, bahwa komentar bawahan blogger tidak dapat membedakan mana Admin/Aurthor, Jutru tujuan dari pembuatan ini ialah untuk menciptakan 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 isyarat dibawah ini. <CTRL + F>
Wajib Baca :
Jika kode <b:include data='post' name='threaded_comments'/> lebih dari satu, silakan anda ganti keduanya dengan isyarat dibawah ini
2. Jika sudah ketemu? silakan anda ganti dengan isyarat dibawah ini.
3. Jika isyarat diatas sudah diganti, selanjutnya temukan isyarat ibarat dibawah ini.
4. Jika sudah ketemu? Copy&paste isyarat berikut ini dan silakan anda ganti dengan isyarat dibawah ini.
6. Copy&paste isyarat berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
10. Kemudian ganti isyarat diatas dengan isyarat berikut ini.
Demikianlah Tutorial Blogger kali ini, kalau terjadi kesalahan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda kemudian berkomentar untuk mencobanya. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Threaded Comment Plus Emoticon di Blogger
1. Temukan isyarat 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 isyarat dibawah ini
2. Jika sudah ketemu? silakan anda ganti dengan isyarat dibawah ini.
<b:include data='post' name='comments'/>3. Jika isyarat diatas sudah diganti, selanjutnya temukan isyarat ibarat dibawah ini.
<b:includable id='comments' var='post'>...</b:includable>4. Jika sudah ketemu? Copy&paste isyarat berikut ini dan silakan anda ganti dengan isyarat 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/AVvXsEiGr13GAf8u3Ml4NDsmlyXjl-kDlDyK9MpomCjFTAMGnygwShGwUBWcTbJi2PAEVLQ8eSSMGhyphenhyphen8sjaMpgQpnmV2eYTTZNcq_8tTrJC0bIrXVzX3O5KsJMdyOUgDfUb0A05b8TIdfYs5pQcZ/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/AVvXsEhEfrXPlwJuAE0QfaP_SIrCC4JxjA9P6228yQ62j6bCzVjtQArDcskLUhUE7yjLe3qFeOXK7WM9xthQIViFD-AjaknNu8vzm_YS25tiST8RYNYiqYqqD5IMoRIu_gCVMb8Hy6zfWSFNDAJ2/s1600/thumbs-up-yahoo-emoticon.gif', ':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDRmtx1qDoNsd3e3awsVHVUrK3yE3UbNZmp6hWJM7EHB5Cc4kE-n0tOaf4H7uPs6zWphxxYYLTSupG2w7eybl27aJptLB1371AA4naerzcQQ8Adb8c6Gf7VlvTvUoLXDoKvulrywIxNs/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="Cara Membuat Threaded Comment Plus Emoticon di Blogger">','<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 isyarat 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 isyarat diatas dengan isyarat 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, kalau terjadi kesalahan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda kemudian berkomentar untuk mencobanya. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Threaded Comment Plus Emoticon di Blogger
