Home Blog Blogspot Membuat Template Widget Blog 2 Cara Membuat Tampilan Kolom Komentar Keren Di Blog

2 Cara Membuat Tampilan Kolom Komentar Keren Di Blog

Zona Internetku 7 Comments September 24, 2018

Cara Mengubah Tampilan Kolom Komentar Di Blogger Agar Menjadi Lebih Keren. Kolom komentar merupakan sebuah tempat untuk berbagi saran dan juga kritik, sehingga para pengunjung dan juga pengelola blog bisa saling berdiskusi.
Tapi pembahasan kali ini kita akan membahas cara untuk mengubah tampilan komentar blog kita menjadi lebih keren. Pastikan kalian mengikuti tutorial ini dengan benar, karena tutorial mengandung banyak sekali kode didalamnya, berikut ini adalah tutorialnya

Cara Mengubah Tampilan Kolom Komentar Di Blogger Agar Menjadi Lebih Keren

Cara Membuat Kolom Komentar Bertingkat Seperti FaceBook dan WordPress

1. Pertama, pastikan kalian sudah masuk ke dalam blog kalian sendiri
2. Kedua, klik menu "Tema" dan pilih "Edit HTML"
3. Selanjutnya, kalian cari kode berikut ini

<b:include data='post' name='comments'/>

4. Jika sudah ketemu, silahkan ganti kode tersebut dengan kode berikut ini

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

5. Kemudian kalian cari kode </head> dan letakkan kode berikut ini di atas kode </head>

<style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
</style>

6. Terakhir, kalian klik "Simpan Tema" untuk menyimpan perubahan tersebut

Untuk menghilangkan atau menyembunyikan tanggal pada kolom komentar, ganti kode:

.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}

menjadi seperti di bawah ini

.comments .comments-content .datetime {display:none}

Baca juga :
Cara Membuat Widget Recent Comments Di Blog
Cara Menambahkan Widget Random Post Di Blog
Cara Membuat Featured Post Di Homepage Blog

Cara Mmemodifikasi Kolom Komentar Blogger Menjadi Multi-Level (nested)

1. Pertama, pastikan kalian sudah masuk ke dalam blog kalian sendiri
2. Kedua, klik menu "Tema" dan pilih "Edit HTML"
3. Selanjutnya, kalian cari kode </head> dan letakkan kode berikut ini di atasnya

<style>
#comments h3{margin-bottom:15px;font-size:18px}.comment_avatar_wrap{width:42px;height:42px;border:1px solid #C4C4C4;border-top-color:#E4E4E4;border-left-color:#E4E4E4;background:#fcfcfc;padding:4px;border-radius:2px;text-align:center;margin-bottom:20px}#comments .avatar-image-container{float:left;margin:0 10px 0 0;width:42px;height:42px;max-width:42px;max-height:42px;padding:0;margin-bottom:10px}#comments .avatar-image-container img{width:42px;height:42px;max-width:42px;max-height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiupGkc_Xwp9XghNifBEJ0UzrKDHX1eIJ3RUrIVxKePhU2vnLi4_FFUwnkx7LAuvHfsLNClR0imgZHrq65NuVyJNkqlRvK1F3Wg6zb39Celi6UL7eRxdVIur7ikywBs15WUArWSZ2a66abN/s1600/anon.jpg) no-repeat}.comment_name a{font-weight:700;padding:5px 0 0;font-size:13px;text-decoration:none}.comment_admin .comment_name{font-weight:700;padding:10px;font-size:13px;text-decoration:none;background:#eee}.comment_admin .comment_date{font-weight:400;font-size:11px}.comment_name{background:#eee;padding:10px;font-size:13px;font-weight:700;position:relative}.comment_service{margin-top:5px}.comment_date{color:#a9a9a9;float:right;font-size:11px;font-weight:400;margin-top:-3px}.comment_date a{color:#a9a9a9;float:right;font-size:11px;font-weight:400}.comment_date a:hover{color:#a9a9a9;text-decoration:none}.comment_body{margin-left:66px;margin-top:-72px;background:#fcfcfc;border:1px solid #d1d1d1;padding:10px;border-radius:2px}.comment_body p{line-height:1.5em;margin:5px 0 0;color:#666;border:1px solid #eee;font-size:13px;word-wrap:break-word;background:#fff;padding:10px}.comment_inner{padding-bottom:5px;margin:5px 0}.comment_child .comment_wrap{padding-left:7%}.comment_reply{display:inline-block;margin-top:8px;margin-left:-5px;padding:1px 12px;color:#fff!important;text-align:center;text-decoration:none;border-radius:2px;background:#bababa;font:11px/18px sans-serif;transition:background-color 1s ease-out 0}.comment_reply:hover{text-decoration:none!important;background:#056b95}.unneeded-paging-control{display:none}.comment-form{max-width:100%}#comment-editor{width:103%!important;background:transparent url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) no-repeat 50% 30%}.comment_form a{text-decoration:none;text-transform:uppercase;font-weight:700;font-family:Arial,Helvetica,Garuda,sans-serif;font-size:15px}.comment_form a:hover{text-decoration:underline}.comment-form p{background:#666;padding:10px;margin:5px 0;color:#eee;font-size:13px;line-height:20px;width:97%;border-radius:3px;position:relative}.comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-16px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent}.comment_reply_form{padding:0 0 0 70px}.comment_reply_form .comment-form{width:99%}.comment_emo_list{display:none}.comment_emo_list .item{float:left;text-align:center;margin:10px 10px 0 0;height:40px;width:41px}.comment_emo_list span{display:block;font-weight:700;font-size:11px;letter-spacing:1px;display:block;font-weight:bold;font-size:11px;letter-spacing:1px}.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}.comment_img{max-width:100%!important}.deleted-comment{padding:10px;display:block;color:#CCC}.comment_arrow{display:block;width:9px;height:18px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLg8Oj2orL7wHd2wxXs3NSL2HW6eHJ_8vF2rRwKuU7WHrna7rFLXqDi3HK0gEUZs1tzOKx_VoqTi866mQ3aaM3MypnvKjRMBDw4XBED1g8l6eqcxEgAK716TGzVLhx2R0IpGpgDh-3HgA/s1600/comment-arrow.gif) no-repeat;position:absolute;margin-left:-19px}.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/AVvXsEiupGkc_Xwp9XghNifBEJ0UzrKDHX1eIJ3RUrIVxKePhU2vnLi4_FFUwnkx7LAuvHfsLNClR0imgZHrq65NuVyJNkqlRvK1F3Wg6zb39Celi6UL7eRxdVIur7ikywBs15WUArWSZ2a66abN/s1600/anon.jpg) no-repeat}.comment-delete img{float:right;margin-left:15px;margin-top:3px;margin-right:10px}.comment_author_flag{display:none}.comment_admin .comment_author_flag{display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_R_hLCgVEkG-Qdp7tysqPpiTqgnQMUfgTbQHII53sN2G9cxsk2qBoDLEQ6IWdS5Qtw7653fwbI31pqlpoZjz3ARlMyJ5saLUkmu9qQcHC_pYgoISvhNvyzyDy1gYrtkG_vK101Mkw0E0/s1600/author.png)no-repeat;font-size:13px;font-weight:400;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}
</style>

4. Cari kode <b:includable id='comments' var='post'> ada banyak kode di dalam sini </b:includable>
Kemudian ganti kode tersebut dengan kode berikut 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>
  </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>
       <b:if cond='data:comment.author == data:post.author'>
         <span class='comment_author_flag'>Admin</span>
       </b:if>
                  <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/AVvXsEghgvl8YVN0Wmp90IhNN_EOqj77jZgm4JhPPJXhcN3aVoMEWBsPntr0DFU_F3HWFDsp5biCjROXJFqZNsldMyCl8D2W_SPOW3wim9AK9GxZtJWKYgZjt0eyYJSa7O2Ua9DzUHxMMvrCU30/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/AVvXsEgbPc9ZvNSJVNV8O-uYIrY9Wt9pUXij_8pfCGbKZSwTlHTx3viRFBv4Aq4VxRfQOnNfduIHxm9KABlHHE8AEUKbYC5bSXoCMPL9djxDrsztZVGZZwLyTLMuwnkSM6xlUxLYCJP-pmfF374/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi389SQ0-L0FakkcBdHCJHjQ9UloGPu_87HRMhuPUeMn17I__KvXKWZP_2o5sjmwn3cA-9Yj8ukN93vzyZwbxcjq5ijYXWHM07tHfsXUK04sBzLA0LEjBjAf4QiZvabWGjRqjd4rQsY1z4/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIqCK2HvFzwsI_wotwTX1bG6rK76Na0RBYwhuPQpRQ2rmSy9f39zVU639sV4hoaxW7Jex4mc1Nqrx56RAK15coeDWUgnGgOHWdRA_z2B3VfZnjNhU8hAXKx0tDGiPg4WILKjalBdIaHo/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPn1TIKqYSMw6rASkA7rxLrVG0jVL617FgqnORt8yMSYbxnKrw3leMEx4tmalExV7XW7UZbjikxHLMiokS6QQa0r4-up5mmbIWOQR5dOQbGVJ-fWOoHNtUlWdutkvspxeoMgKvn7rTLUE/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdIUZTYPfdpSGHoa8E48eD4xEmnc1mKZB-TN8FGBdaoNJ5pLKdSu2MEjZ8X8WJQAUAYLrKxhEVkAT5rg4RpzJN_-lWz_1bszMxFa_RCoZjJWf1IXLnaFPV48z-uLKKNf10IyA9_RPr4Y/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY-jSxgNO-mUOZS1wK1WerK1i483k2pjx3I_sIkmhD36bcpPYdEj17PDp0vCTx7ymepziJ2YwbvnFSBXw01eldmT80UMlAsv4Am93Eaj2qao7dTcSyc3441Ab6bVN_fKeqAaS-9Tj0H3M/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglSCmsRzNjkUZX6xm-Nvyu46q5zfzzZcNq74BQrVitHGwPRKPha9lkqJiza27-3CeEWGQbbT6LJTHWp0U84nzq8qDp2HW907qzef5J3nMVWhA95-W8mq2V1wtT-_O6ov-kXDCux5p9kmk/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglMFdI0mSQHddM6yVUmS4HCPUkas5KoVppZEH4OxQw_RFlRdmbHtQMQYA-Y4szR1w7mz3pHs7uX8GccuKtohg37fTOb0MlJ5HqKLDrTEjYsfZQSmWL63IDlOsTqskPBz294C2i3YPMwc0/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKtIvP2abaN6CUpM9rURwQSw1hYMGADh12Zw1izIpyLUw0jhHmvbHGOips57JJESRWTNtKDinMV5XrFb1-ZjMtPWcT63vh-1d7czQAOv_ouYfLCjPtOWsc8m9r4xGNXHOK95k3L567x4/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQlKBHzJ-S_EHEnZ5IocnqvG086nqrvI-GnJVPUyecibzVNI1ZB1nxxx7jxBDUD2kX9AqseI3En1eJ0PvHPkOzylVMT0SLZSx8plUBBAqW-rVRNuNrBCLaW_IyNf-RJBsiE37FljXHj0/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjILkJ88xyV8YLGXW2xf5Ce4bdAypfbMEQ-845Uv6mj5SXbKD9sOqWbwrq97C5mrXXAAcJqrBl4sKqpzyhZCX7SGJAz9cRbLHgTpvfaUi1y7QkqEFGkQThc5ivr7lxfbonrjOQ9h5DDs4M/s1600/thumbsup.gif',
        ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxBtF8ThNcuwFdSd8c8vgDoKZlaPs95s2dlPBxoW8DARWVasvMgcax7CN_mZmjOVFKjwe7JgMPLFTpGmjCnZWfCV4IxACrdZ-7GLrT2u0YrNikRtqOX-0KKjSzKNcmS6P9zB5MvWhEJ0/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 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))
    //]]>
</script>
</b:includable>

5. Kemudian kalian klik "Simpan Tema" untuk menyimpan perubahan tampilan komentar tersebut

Baca juga :
Tutorial Mengganti Older Post Menjadi Load More Di Blog
Cara Mengganti Older Dan Newer Post Menjadi Numbered Navigation Pada Blog
Cara Mengganti Tombol Next Prev Dengan Judul Postingan

Ok, cukup disini dulu pembahasan tentang Cara Membuat Tampilan Kolom Komentar Keren Di Blog yang dapat saya bagikan kepada kalian, semoga bermanfaat.

Referensi :
24 September 2018 https://www.contohblog.com/2016/04/cara-mengganti-kotak-komentar-blog-keren.html
24 September 2018 https://www.contohblog.com/2017/09/cara-membuat-kolom-komentar-blogger.html

Promo Menarik

Diskon Barang Elektronik Di Lazada Hingga 80%

Cek disini

Promo Cuci Gudang, Diskon Sampai 50%

Cek disini

Murah Pol - Barang Murah Berkualitas Mewah

Cek disini

Tampil Cantik Gak Perlu Mahal - Diskon 50%

Cek disini

Kumpulan Barang Untuk Kesehatan - Diskon 50%

Cek disini

7 comments:

SaifullahTV08 August, 2019 03:15
tes
ReplyDelete
Replies
Anonymous29 August, 2019 16:37
tes
ReplyDelete
Replies
Zona Internetku17 September, 2019 14:17
Perhatian! blog ini telah menggunakan komentar default dari blogger.com, jadi meskipun kalian komentar melakukan test komentar kemari maka hasilnya akan berbeda dengan apa yang ada di tutorial tersebut.

Terima kasih atas perhatiannya.
ReplyDelete
Replies
rippdunk_15 August, 2020 22:30
kak, kalo buat tombol like di artikel blog gimana ya? tolong buat tutorialnya kak...terima kasih atas waktu luangnya....
ReplyDelete
Replies
Octavianus Hasan04 March, 2021 11:26
Terima kasih banyak gan atas tutorialnya, sukses selalu yaa. Salam kenal.
ReplyDelete
Replies

Add comment

Komentar spam tidak akan di tampilkan !
Maka nikmat Tuhanmu yang manakah yang kamu dustakan?
Kembalilah ke jalan yang benar sebelum Allah sendiri yang memberikan peringatan kepadamu