Mengubah Tampilan Kolom Komentar Blog

Pada artikel saya sebelumnya yang membahas tentang "Cara Membuat Night Mode di Blog" yang direquest oleh salah satu pengguna facebook. Dan setelah saya memposting artikel tersebut., beliau meminta saya lagi untuk di buatkan tutorial yang membahas tentang. Membuat Tampilan Kolom Komentar Seperti yang ada pada Blog Saya ini.

Baiklah, kita langsung saja ke pembahasannya. Tapi sebelumnya, berhubung ada beberapa salah satu pengguna yang masih bingung dengan peletakkan script di blog, kali ini akan saya lebih perjelas lagi untuk peletakkan serta pergantian script pada blog, semoga saja tutorial kali ini dapat dengan mudah dimengerti oleh para pembaca ya.

Point dari artikel ini.
1. Login ke Blog kalian.
2. Pilih Tema/Themes > Edit HTML
3. Lalu tambahkan CSS komennya di atas </head>

<style type='text/css'>
/* CSS Comments myabdurrahim.com */
        .comments h3 {
          line-height:normal;
          text-transform:uppercase;
          color:#333;
          font-weight:bold;
          margin:0 0 20px 0;
          font-size:14px;
          padding:0 0 0 0;
        }
        h4#comment-post-message {
          display:none;
          margin:0 0 0 0;
        }
        .comments{
          background: #fff;
    position: relative;
border-radius: 10px;
padding:20px 20px 0 20px;
        }
        .comments .comments-content{
          font-size:13px;
          margin-bottom:8px
        }
        .comments .comments-content .comment-thread ol{
          text-align:left;
          margin:13px 0;
          padding:0
        }
        .comments .comment-block{background:#fff;padding:18px 20px;line-height:26px;border-radius:10px;margin-bottom:20px;position:relative;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 5px 2px}
        .comments .comment-block:before {
              content: &#39;&#39;;
    right: 100%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: rgba(0,0,0,0.05);
    border-width: 10px;
        }
.comments .comment-block:after {
content: &#39;&#39;;
    top: 19px;
    right: 99.9%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #fff;
    border-width: 9px;
}
        .comments .comments-content .comment-replies{
          margin:8px 0;
          margin-left:60px
        }
        .comments .comments-content .comment-thread:empty{
          display:none
        }
        .comments .comment-replybox-single {
          background:#f0f0f0;
          padding:0;
          margin:8px 0;
          margin-left:60px
        }
        .comments .comment-replybox-thread {
          background:#f0f0f0;
          margin:8px 0 0 0;
          padding:0;
        }
        .comments .comments-content .comment{
          margin-bottom:6px;
          padding:0
        }
        .comments .comments-content .comment:first-child {
          padding:0;
          margin:0
        }
        .comments .comments-content .comment:last-child {
          padding:0;
          margin:0
        }
        .comments .comment-thread.inline-thread .comment, .comments .comment-thread.inline-thread .comment:last-child {
          margin:0px 0px 5px 30%
        }
        .comment .comment-thread.inline-thread .comment:nth-child(6) {
          margin:0px 0px 5px 25%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(5) {
          margin:0px 0px 5px 20%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(4) {
          margin:0px 0px 5px 15%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(3) {
          margin:0px 0px 5px 10%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(2) {
          margin:0px 0px 5px 5%;
        }
        .comment .comment-thread.inline-thread .comment:nth-child(1) {
          margin:0px 0px 5px 0;
        }
        .comments .comments-content .comment-thread{
          margin:0;
          padding:0
        }
        .comments .comments-content .inline-thread{
        }
        .comments .comments-content .icon.blog-author {
          display:inline;
        }
  .comments .avatar-image-container{border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 5px 2px;width:auto}
        .comments .comments-content .icon.blog-author:before {
          content:&#39;\f058&#39;;font-family:fontawesome;color: #00c4ff;
        }
        .comment-header {
          font-size:13px;
        }
        .comments .comments-content .datetime {
          margin-left: 6px;
        }
        .comments .comments-content .datetime a {
          color:#bdbdbd;
    float: right;
    font-size: 10px;
        }
        .comments .comment .comment-actions a {
          display:inline-block;
          color:#333;
          font-weight:bold;
          font-size:12px;
          line-height:15px;
          margin:4px 8px 0 0;
        }
        .comments .continue a {
          color:#333;
          display:inline-block;
          font-size:10px;
        }
        .comments .comment .comment-actions a:hover, .comments .continue a:hover{
          text-decoration:underline;
        }
</style>

Dan jangan lupa, Hapus CSS Komen kalian yang lama dan ganti dengan yang diatas.

4. Selanjutnya, Cari tag dibawah ini

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

Lalu Ganti dengan tag dibawah ini.

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

Ubah tag yang dibagian atasnya saja.
Dan tiap template mungkin tagnya bisa berbeda-beda.

Jika, Bingung Lihat Gambar dibawah.

5. Lakukan lagi langkah 4.
Sampai kalian mengubah 4 kali, pada tag dibawah ini. Lihat Gambar dibawah ini.

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

Setiap template kadang berbeda, contohnya template dari blogger yang versi terbarunya.
kalian tidak perlu mengubah tag komen lagi, dan kalian cukup mengubah CSSnya saja dengan CSS diatas.
karna dari template blogger tagnya sudah ada yaitu : 'threadedcomments'
sedangkan di template saya ini, yaitu : 'comments'. harus diubah ke 'threaded_comments'

Jadi jika kalian pengguna template blogger, kalian hanya perlu bermain di CSSnya saja.
Tapi jika kalian pengguna template lain, seperti template buatanya arlina, kalian harus mengganti tag comment tersebut yang ada pada langkah 4.

Jika sudah selesai, Simpan template dan lihat hasilnya.
Untuk DEMO kalian bisa lihat yang ada pada template saya ini.
Template yang saya pakai ini, mungkin sewaktu-waktu akan berubah jadi tidak menutup kemungkinan kalian tidak akan bisa lihat demonya lagi. Tapi, kalian bisa melihat contohnya seperti pada gambar diatas yang pertama.

*UPDATE
saya baru saja menerapkan ke blog saya yang lainnya, menggunakan template blogger, dan saya hanya perlu mengganti di CSSnya saja.

• DEMO

di demo tersebut avatar komennya, masih dalam default template blogger, dan belum saya hapus CSSnya. Tapi dari segi tampilan sudah mirip dengan template yang saya pakai ini.

Ok, mungkin cukup sekian artikel saya kali ini.
Jika kalian mengalami masalah/kendala pada saat penerapan tutorial yang saya buat ini, silahkan tinggalkan pertanyaan anda di kolom komentar bawah. Terimakasih.