1. Welcome, Guest
    Sekolah Blogger adalah sebuah situs yang didedikasikan bagi anda yang ingin mempelajari lebih lanjut seputar cara mendapatkan penghasilan di internet, terutama Blog.
    Dismiss Notice

Cara MEMODIFIKASI Tampilan Kolom Komentar Blog

Anak_Baru1Jan 21, 2017

Tags: Add Tags
  1. Anak_Baru1

    Anak_Baru1 Member

    Messages:
    295
    Like Diterima:
    6
    Trophy Points:
    18
    Joined
    Feb 14, 2016
    Untuk meningkatkan engage, atau interaksi pembaca terhadap setiap artikel yang dihadirkan di blog Anda, selain membuat konten yang berkualitas, Anda juga dapat memodifikasi tampilan kolom komentar untuk menarik perhatian pembaca untuk berkomentar.
    cara menambahkan pesan dibawah diatas komentar blog cara cara mengganti warna background kolom komentar cara memasang pesan diatas kotak komentar blog

    Kolom komentar blog pada template web yang masih menggunakan platform blogspot pada umumnya memiliki tampilan yang begitu sederhana, minimalis, dan tidak begitu menarik.

    Sehingga membuat kebanyakan pembaca hanya berniat untuk membaca yang Anda tuliskan, tanpa meninggalkan feedback apapun, baik itu berupa ucapan terimakasih maupun bertanya sesuatu terkait artikel yang Anda tuliskan.

    komentar yang keren dan enak dilihat cara menambahkan pesan untuk meminta pengunjung untuk berkomentar di blog cara memasang menambahkan pesan diatas kolom komentar blog

    Seumpama jika pembuat template blog tidak melakukan modifikasi pada kolom komentar blog menggunakan CSS dan meninggalkannya tetap default, kurang lebih inilah tampilan kolom komentar di blogspot:

    cara memodifikasi tampilan kolom komentar blog 2.JPG
    atau
    cara memodifikasi tampilan kolom komentar blog.JPG
    Terlihat sedikit membosankan bukan?

    Nah, karena itulah Anda dapat memodifikasi tampilan kolom komentar di blog Anda menjadi lebih menarik.


    Saat ini, sudah ada banyak cara yang dapat dilakukan untuk membuat tampilan kolom komentar menjadi terlihat lebih interaktif, mulai dari menambahkan pesan diatas kolom komentar, mengganti warna kolom komentar, mengganti judul sekte komentar, dan masih banyak lainnya


    Memodifikasi tampilan kolom komentar dengan CSS
    cara memodifikasi tampilan kolom komentar blog 11.JPG



    1. Pertama, silahkan masuk ke dashboard Blogger Anda seperti biasa
    2. Kemudian, masuk ke menu Template--> Edit HTML
    3. Tekan tombol CTRL+F secara bersamaan di keyboard, dan cari kode <b:include data='post' name='threaded_comments'/>
    4. Jika sudah, ganti kode <b:include data='post' name='threaded_comments'/> dengan kode <b:include data='post' name='comments'/>
    5. Setelah itu, silahkan cari kode ]]></b:skin>
    6. Jika sudah, silahkan copy-paste kode CSS berikut ini diatas kode tersebut:
      Code:
      #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(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/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('http://4.bp.blogspot.com/-TIf6ayZW9R4/UkxBo2beCQI/AAAAAAAAFsA/XR2DBWD3YG4/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(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/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(http://4.bp.blogspot.com/-Yj5ewidrX5Q/UkrG9s3fS5I/AAAAAAAAFrQ/rhhaMJwHDoc/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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}
    7. Selanjutnya, silahkan cari kode <b:includable id='comments' var='post'> ... sampai... </b:includable>
    8. Setelah Anda menemukan kode tersebut, silahkan ganti kode tersebut dengan kode dibawah ini:
      Code:
      <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='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/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 = [ ':)' ,'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' ,'http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif', '=D' ,'http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.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' ,'http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif', ':-d' ,'http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif', ':p' ,'http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/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>
    9. Terakhir, klik Simpan template
    10. Tada! Kini Anda telah berhasil memodifikasi tampilan kolom komentar blog Anda!


    Menambahkan pesan diatas kolom komentar


    Sesungguhnya, Anda dapat menambahkan pesan diatas kolom komentar di Blogger dengan mengakses menu Setelan--> Pos, komentar, dan berbagi--> kemudian mengisi Pesan Formulir Komentar seperti yang terlihat pada screenshoot dibawah ini:

    cara memodifikasi tampilan kolom komentar blog 8.JPG
    Basic/dasar menambahkan pesan pada formulir komentar

    Sayangnya, pesan yang muncul ketika Anda menambahkan pesan dengan cara polosan seperti itu akan menghasilkan tampilan yang polosan pula.

    Hal ini dikarenakan karena kita belum menambahkan style dengan menggunakan CSS untuk mempercantiknya.

    Jadi, jika Anda ingin menambahkan pesan diatas kolom komentar dengan tampilan yang menarik, silahkan ikuti salah satu tutorial berikut ini:


    Style 1
    cara memodifikasi tampilan kolom komentar blog 4.jpg



    1. Langkah pertama, silahkan pergi ke dashboard Blogger Anda seperti biasa
    2. Kemudian, silahkan masuk ke menu Template--> Edit HTML
    3. Tekan CTRL+F di keyboard secara bersamaan dan cari kode ]]></b:skin>
    4. Jika sudah, silahkan copy-paste kode dibawah ini sebelum kode ]]></b:skin>
      Code:
      /* 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;}
    5. Kemudian, cari kode <p><data:blogCommentMessage/></p>, biasanya dalam suatu template akan ada 4 kode ini, namun kita hanya akan mengedit kode ke-2 dan ke-4.
    6. Setelah Anda menemukan kode <p><data:blogCommentMessage/></p>, kurang lebih inilah kira kira penampakannya:
      Code:
      <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%'/>
    7. Tambahkan kode berikut ini pada kode diatas
      Code:
      <div id='threaded-comment-form'>
      ...kode di atas...
      </div>
    8. Sehingga hasilnya akan muncul seperti yang terlihat pada screenshoot dibawah ini:
      cara memodifikasi tampilan kolom komentar blog 6.JPG
    9. Setelah itu, silahkan copy-paste kode dibawah ini tepat sebelum kode <p><data:blogCommentMessage/></p> ke-2 dan ke-4
      Code:
      <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>
      Sehingga hasilnya sama seperti pada screenshoot dibawah ini
      cara memodifikasi tampilan kolom komentar blog 7.JPG
    10. Terakhir, cari kode document.getElementById(domId).insertBefore(replybox, null);, kemudian ganti kode tersebut dengan kode dibawah ini:
      Code:
      document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
    11. Klik Simpan template
    12. Tada! Anda kini telah berhasil menambahkan pesan diatas kolom komentar


    Style 2
    cara memodifikasi tampilan kolom komentar blog 9.jpg



    1. Langkah pertama, silahkan pergi ke dashboard Blogger Anda seperti biasa
    2. Kemudian, silahkan masuk ke menu Template--> Edit HTML
    3. Tekan CTRL+F di keyboard secara bersamaan dan cari kode ]]></b:skin>
    4. Jika sudah, silahkan copy-paste kode dibawah ini sebelum kode ]]></b:skin>
      Code:
      /*Pesan Komentar*/ #threaded-comment-form p {     position: relative;     background: #666;     border: 3px solid #000;     padding: 10px;     font-size: 11px;     line-height: 1.6em;     color: #fff;     margin-top: 10px;     font-size: 11px;border-radius:2px;     } #threaded-comment-form p::after, #threaded-comment-form p::before {     top: 100%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none     } #threaded-comment-form p::before {     border-top-color: #000;     border-width: 15px;     left: 10%;     margin-left: -35px;     } #threaded-comment-form p::after {     border-top-color: #666;     border-width: 10px;     left: 10%;     margin-left: -30px     }
      
    5. Selanjutnya, cari kode document.getElementById(domId).insertBefore(replybox, null);, kemudian ganti kode tersebut dengan kode dibawah ini:
      Code:
      document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
    6. Kemudian, cari kode <p><data:blogCommentMessage/></p>, biasanya dalam suatu template akan ada 4 kode ini, namun kita hanya akan mengedit kode ke-2 dan ke-4.
    7. Setelah Anda menemukan kode <p><data:blogCommentMessage/></p>, kurang lebih inilah kira kira penampakannya:
      Code:
      <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%'/>
    8. Tambahkan kode berikut ini pada kode diatas
      Code:
      <div id='threaded-comment-form'>
      ...kode di atas...
      </div>
    9. Sehingga hasilnya akan muncul seperti yang terlihat pada screenshoot dibawah ini:
      cara memodifikasi tampilan kolom komentar blog 6.JPG
    10. Terakhir, Simpan template.
    11. Pada titik ini, Anda dinyatakan sudah berhasil menyetel setelan dasar CSS dan agar pesan muncul diatas formulir komentar, langkah selanjutnya Anda hanya perlu mengisi pesan apa yang ingin Anda tampilkan di blog Anda.
    12. Untuk menambahkan pesan, silahkan klik menu Setelan--> Pos, komentar, dan berbagi--> klik Tambahkan pada Pesan Formulir Komentar, kemudian isi pesan yang ingin Anda tampilkan, seperti yang terlihat pada screenshoot dibawah ini:
      cara memodifikasi tampilan kolom komentar blog 10.JPG
    13. Kemudian, klik Simpan Setelan
    14. Tada! Kini Anda telah berhasil menambahkan pesan diatas kolom komentar.


    cara membuat kolom komentar facebook di blog cara membuat kotak komentar blog menjadi keren

    Penutup
    Kurang lebih, itulah sejumlah hal yang dapat saya sampaikan terkait bagaimana cara memodifikasi tampilan kolom komentar blog blogspot.

    Jika Anda merasa ragu, atau bigung dengan apa yang saya jelaskan pada aritkel diatas, jika berkenan, silahkan tinggalkan sebuah feedback di kolom komentar yang berisi rasa bingung Anda, dan jika memungkinkan, saya akan menjawab feedback yang Anda kirimkan secepat yang saya bisa.​
     
    Last edited: Jan 22, 2017
  2. jasatranslator

    jasatranslator New Member

    Messages:
    1
    Like Diterima:
    0
    Trophy Points:
    1
    Joined
    Jun 9, 2018
Verifikasi
Draft saved Draft deleted
.
Loading...