Beranda  ›  Blogger  ›  Tutorial

Cara Memodifikasi Kolom Komentar Blogger

Cara Memodifikasi Kolom Komentar Blogger

Nyampling ~ Pada setiap postingan blog tentu memerlukan kritik dan saran ataupun pendapat dari setiap pengunjung blog. Apalagi blog tersebut masih baru di untuk membangun sebuah blog maka sangat penting adanya masukan dari para pengunjung supaya mereka betah berlama - lama di blog kita. Salah satu sarana untuk interaksi antara pemilik dengan pengunjung adalah kolom komentar di postingan.

Kolom komentar blog pada template web yang masih menggunakan platform blogspot pada umumnya memiliki tampilan yang begitu sederhana, minimalis, dan apa adanya tanpa memperhatikan bentuk serta kualitas kolom komentar yang akan membuat tampilan blog kurang maksimal.

Hal ini juga dapat membuat kebanyakan pengunjung hanya berniat untuk membaca yang kita tuliskan, tanpa meninggalkan feedback apapun, baik itu berupa ucapan terimakasih maupun bertanya sesuatu terkait artikel yang Anda tuliskan. Kolom komentar yang keren dan enak dilihat biasanya menjadi nilai plus untuk blog kita.

Untuk memodifikasi kolom komentar coba kalian ikuti langkah - langkah berikut ini :

A. Memodifikasi Kolom Komentar

1. Silahkan masuk ke Blogger >> Tema >> Edit html >> Ctrl + F

2. Cari kode html berikut <b:include data='post' name='threaded_comments'/>

3. Ganti kode Html diatas dengan kode berikut 
<b:include data='post' name='comments'/>

4. Cari kode ]]></b:skin> Kemudian tempel kode berikut diatasnya
#comments {} #comments h3 {background:#35404d;border:1px solid #1d2630;display:inline;margin-bottom:25px;padding:5px;line-height:40px;position:relative;text-transform:uppercase;color:#fff;font:13px Oswald;border-radius:3px;} #comments h3:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #35404d;border-right:20px solid transparent;width:0;height:0;line-height:0} .comment_avatar_wrap{ width:42px; height:42px; border: 1px solid #151d26; background:#25303c; padding:4px; 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; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwU1JSWBl_jpD1KfkHCn1f5xjOM9FUbHe6rdnVJGIioIpAhxTMdmHXXNv1NH1tIcptANZawhE-BWhtgmjkibGlKK6mzznNraW5HHg267TX-wCZ9371NNZ_ocZ7Fe9hyphenhyphenD3x-YrSwoYctwwM/s1600/anon.jpg) no-repeat; } .comment_name a { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; text-decoration: none; } .comment_admin .comment_name { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; text-decoration: none; } .comment_admin .comment_date { font-weight: normal; font-size:11px; } .comment_name { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; font-weight:normal; position:relative; } .comment_service{ margin-top:5px } .comment_date { color: #999; float:right; font-size:11px; font-weight:normal; } .comment_date a{ color: #a9a9a9; float:right; font-size:11px; font-weight:normal; } .comment_date a:active{ color: #a9a9a9; text-decoration:none; } .comment_body{ margin-top:-72px; margin-left:65px; background:#25303c; border:1px solid #1d2630; border-top:1px solid #171f28; border-left:1px solid #171f28; padding:15px; } div.comment_inner.comment_admin{ background:#394549; } .comment_body p { line-height: 1.5em; margin: 5px 0 0 0; color: #999; font-size: 13px; word-wrap:break-word; padding-bottom:10px; } .comment_inner { padding: 15px; margin: 5px 0 5px 0; background-color:#35404d; } .comment_child .comment_wrap {padding-left: 5%;} .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: #54687c; font: 11px/18px sans-serif; transition: background-color 1s ease-out 0s; } .comment_reply:active { text-decoration: none !important;; background: #627c96; } .unneeded-paging-control {display: none;} #comment-editor {width:100% !important;background:#e1e3e6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguw7WOpujvOldMsS_06wR-l1L7JANYIo7uMz7Zz5GStiNCj-R6WwnXdgQ4ZWQ_HbnMg-tzx8YIM6GuQ_RVZ-GIgGZ8BhRqRxNXpCAHBqFSGxDl_oAZgEAifOjnRbYOip8O2KiVBIR7qsk/s1600/kangis-loader.gif') no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative;} .comment-form {max-width: 100% !important;} .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:active {text-decoration: underline;} .comment_reply_form { padding: 0 0 0 70px; } .comment_reply_form .comment-form {width: 99%;} img.comment_emo {margin:0;padding:0;vertical-align:middle} .comment_emo_list{ display:none; } .comment_emo_list .item { 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_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto} .comment_img {max-width:100%!important;} .comment_header{width:50px} #respond { overflow: hidden; padding-left: 10px; clear: both; } .comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwU1JSWBl_jpD1KfkHCn1f5xjOM9FUbHe6rdnVJGIioIpAhxTMdmHXXNv1NH1tIcptANZawhE-BWhtgmjkibGlKK6mzznNraW5HHg267TX-wCZ9371NNZ_ocZ7Fe9hyphenhyphenD3x-YrSwoYctwwM/s1600/anon.jpg) no-repeat} .comment-delete img{float:right;margin-left:15px;margin-top:3px;} .comment_author_flag {display:none} .comment_admin .comment_author_flag {display:inline;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;} iframe{border:none;overflow:hidden} .deleted-comment { background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnA02gifp2aXXJIb6H-yXi6A9_QYMgGY_NzBJIJdXD6-XCjjTQtFeqGAWmP13HxyVnW8xIk84xTtEP9o1HVm3_w4tBvqW9XyXqzGkuhamBLowt4gNOYiIHc32tBVOQNHqu2I9GeAngj0/s1600/tempat-sampah.png) no-repeat 2% 50%; color:#efd4d4; line-height: 22px; border: 1px solid #c44d4d; padding:12px 15px 12px 45px; margin:5px 0; display: block; } .comment-form p { background: #54687c; padding: 15px 15px 14px 15px; margin: 5px 0 5px 0; color: #f4f4f4; font-size: 13px; line-height: 20px; border-radius:4px; position:relative; } div.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtL7Baf9O2nGdcV1E3IUQrudTebNxswXJN-9B1nj-aW8W52twL5hw5s2DFV-K0TAN5_1BkSS2u1rAV2pkuQmnd170RYRogS3ucDYZuvDfa8Xt6M9z489n4GmorPwe1j03fZw9LhJPVYo/s45-c/gravatar.png); } div:target .comment_inner{background:#346656;transition:all 15s ease-out;} div:target .comment_child .comment_wrap .comment_inner{background:#404c5c;} iframe{border:none;overflow:hidden}

5. Selanjutkan cari kode html <b:includable id='comments' var='post'> ... sampai... </b:includable>, ganti dengan kode berikut :
<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> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> &#160; <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'> &lt;div class=&#39;comment_inner comment_admin&#39;&gt; <b:else/> &lt;div class=&#39;comment_inner&#39;&gt; </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='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</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='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'> <img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jR0brNOtNErH7NB_d5GB1RrZzkrlieueOizQOklrPzaX9_q6-BZUIkYAw9e8HRhnIspLMtN5IwmBQq3BWNhCOrsW6xPCdLBq5MGvP4wpdWAxJPfctZFThKJ3nG2-AkYRNcITUBRSxf0/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'/> &lt;/div&gt; <div class='clear'/> <div class='comment_child'/> <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+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> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> &#160; <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 = {&#39;maxThreadDepth&#39;:&#39;0&#39;}; </b:if> //<![CDATA[ //Global setting Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable Replace_Image_Link = false;//Auto replace link image, ketik "false" untuk mendisable. Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true //Pengaturan Emoticon Emo_List = [ ':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiFGX-VRqChOfau2w6PcclFi-8UHlMAr8yAho167PIDR9b-3SUpMIBMP_4XfMcxHPadxNccNO2JAvJQTo5toRHsO4-Po86jtgO-71NqrysQBK1mAd3qollUYKR13kijubvSQ2C6yMq-SM/s1600/smile1.gif', ':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQGyaLCgQymcjcPROa9Bkh4F6umyKc0hM3nm60P0K85Aq2tr3G0kco1ypQYQLpA7923T9nkof1kCpjQP6M-y87YjQvfIHd7Yk7il1952NkDHyeqsBlwolXqq_DDWZ6zNZSMz2BGOLIPZw/s1600/sad.gif', '=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpaLNouz6ZgOav-Q7Aa87OBXHLyda-IjYYARwFoWdRo2c1i77BacyOSR2HwP7d-DrQjNNYo6Z_Vst1wFKocEIfBQR7XOeRM5kLnAGZ6d788sio0TCYep296z9PHR2T7XidcwJ6LWP0rg/s1600/sadanimated.gif', '^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUfF9NYinbAM0DTSPU-30Giy8sBPmhgRm32c_pDHo8JAhmCN8lSQlWNoZAoBw34zq0E-QY9D2uMh9kPn3sUN04L3Kv-3FbhCLfCl5lAnAhSAxkWXRLMO3FfaVwM6qVIRd14bmOr1eQho8/s1600/smile.gif', ':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2WTEXT6SJAOGw3qzK5t3x5ThFn6jZMYi850CNjBfQWgPXYi4RdcPBjKwAcnhVmnDiWbxWdUBhVWbuHMT6nodc5UQsC-X4oCZ06Nl1PfeTHrJEO6kv4ChywDRFxL3iaA39P3DVdcV6VD0/s1600/icon_smile.gif', '=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1EtCp6OPwYP6MGCQEJCw6053Umvdy1eKbRolJEu3q1QGMdsdjwGkC4mhJUqnmT_qqcwovxGr2SJT7710MCebVuaqRCqEUCCqMbuZKKzPPeEMsWQucpv8Mxa3-RfyNpOmqD2CNiv8ac0/s1600/hihi.gif', '@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSP1gzSYlYbvg2XPUC7XzGeT0H3AVC2gfLoYaoh_m03T_I5GYg0qeTDH5F3iwT9dvNJ2a5ckCBJGj7vvDqeRc85OEFpwGe00GHhC0peFtYEq8_EiFZN2FlzeKYm-WJUavhQNYJSemIQug/s1600/rolleyes.gif', ';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcedeIEqTTPSt4CYD4QovbXLTc6XGRDirUQPWje_zhmjQie9hCp9Xuu5Zhd9vzHT8Ynclo1wKSwJy9vcSQbGpFfca2z8kvSn3-o8x8NsjCepugKyv63X9szMB6-Kjgk3V76b39gxFUw30/s1600/wink.gif', ':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJ_Nf4n-3hCndSailyGYE09_0CfoCHSak8jd1YPPtmmIWWpwEqyPYY9FvU5SV3QbSkb73YG0TQqbwBjr9eOuC8SrndnyVU_5O5cJyTtC7Gfpsv-oA_eEiApUbqkKQieOINeglERphPc4/s1600/thumb.gif', ':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErvd_221lQpPyIjDWgjp_oSjrYBCGXPun018Vo8kv7MkfR0xKCmxiprNPrnq_T845vvyLk5hFlEOlWzb6XWz6vBH7_JSe3vfNlFs5IPCjrYU0tNpiIeGjbjwZB6qaG7PyFwLBXt9wqJc/s1600/thumbsup.gif', ':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS7OXWSu7OcSiLqQ0KrugeyZiit_7T8wGIGxJUlSObMYMj38F7vlLEw7ZjBKmj4c4jqc43Xe74DTChveVCP0mGphHCQ3EoOJ71iR2Zg51ugprcGjWKjRs62v156NMUM-S4FJm0SA-2Vk/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="">','&lt;code&gt;', '</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)?\//,"/s45-c/")); }); //]]> </script> </b:includable>

6. Kemudian Simpan Template,

Menambahkan pesan di atas kolom komentar

Untuk menambahkan pesan kita tinggal edit melalui settingan blogger dengan mengakses  Setelan >> Post, Komentar dan Berbagi >> Mengisi Pesan Formulir Komentar.


Tapi hasilnya bisa kalian lihat sendiri di pratinjau, karena serasa kurang enak dilihat maka sekarang kita akan memodifikasi sedikit pesan diatas komentar tersebut biar enak dilihat. Langkah - langkahnya sebagai berikut :

1. Silahkan masuk ke Blogger >> Tema >> Edit html >> Ctrl + F.

2. Cari kode  ]]></b:skin>, Silahkan tempelkan kode berikut tepat diatasnya
/* Pesan Komentar */
.pesan-komentar{background:#fff;padding:0;width:auto;margin:10px auto 0 auto;line-height:normal;position:relative;font-weight:400;color:#888;box-shadow:inset 0 0 1px 0 #aaa;}
.pesan-komentar h5{font-size:14px;margin:0;background:#f8695f;color:#fff;padding:15px 20px;font-weight:700;position:relative;text-transform:uppercase;overflow:hidden;}
.pesan-komentar h5:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#e85e54;color:#fff;top:0;right:0;padding:15px 20px;position:absolute}
.pesan-komentar .strike{text-decoration:line-through;display:inline;padding:0;}
.pesan-komentar ul{padding:20px}
.pesan-komentar ul li{list-style:none;padding:5px 0;}
.pesan-komentar ul li:first-child{padding:0 0 5px 0;}
.pesan-komentar ul li:last-child{padding:5px 0 0 0;}
.pesan-komentar ul li code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#888;}

2. Kemudian cari kode <p><data:blogCommentMessage/></p>. Biasanya terdapat 4 buah kode ini, perhatikan kode no. 2 dan no. 4 ya....karena kita akan mengedit 2 kode tersebut.

3. Setelah kode diatas ketemu, kurang lebih seperti ini penampakannya 
<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%'/>

4. Bungkus dengan kode berikut 
<div id='threaded-comment-form'>
...kode di atas...
</div>

sehingga tampilannya seperti screenshot dibawah ini :

Cara Memodofikasi Kolom Komentar Blogger
NOTE : Lakukan hal yang sama untuk <p><data:blogCommentMessage/></p> Untuk no. 2 dan 4

5. Setelah itu, tempelkan kode berikut tepat diatas <p><data:blogCommentMessage/></p> Untuk no. 2 dan 4. 
<div class="pesan-komentar"><h5>Catatan Sebelum Berkomentar</h5>
<ul>
<li>Harap berkomentar sesuai dengan judul artikel.</li>
<li>Tidak diperbolehkan untuk mempromosikan barang atau berjualan.</li>
<li>Tidak perlu nulis link di komentar, yang sudah komentar akan saya kunjungi balik lewat profil anda.</li>
<li><i>*Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.</i></li>
</ul>
</div>
NOTE : Kalian bisa menambah pesan yang akan disampaikan sesuai keinginan.
Tampilan screenshotnya:

Cara Memodofikasi Kolom Komentar Blogger

6. Terakhir, kalian cari kode document.getElementById(domId).insertBefore(replybox, null); kemudian ganti dengan kode berikut
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

7. Selesai, simpan template, dan lihat hasilnya dikolom komentar kalian. Jika langkah yang kalian lakukan berhasil maka kolom komentar akan otomatis berubah seperti kolom komentar blog saya ini.



Penutup


Demikian sedikit postingan tentang "Cara Memodifikasi Kolom Komentar Blogger"  Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel