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.

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.

Personal Blog.

32 komentar:

  1. bantu qw donk g work ni,,, qw pakai tema arlina https://rumahkhitancanggihjember.blogspot.com

    BalasHapus
    Balasan
    1. langkah" diatas sudh dilakukan dgan bener blum pak?

      Hapus
    2. iyah gagal kak sudah di otak atik ttp g berubah.....

      Hapus
    3. coba lihat di inspect,

      sma cek juga scriptnya, biasanya template arlina ad script yg di encrypt

      Hapus
  2. Mantap..... he2
    https://electric-technician.blogspot.com/

    BalasHapus
  3. Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. Komentar ini telah dihapus oleh pengarang.

      Hapus
  4. Maaf ya mas udah nyepam, dihapus saja komen saya di atas. Saya cuma ngetes komen aja, dan terimakasih sudah berbagi tutorialnya, work 100%.
    acehmedia.web.id

    BalasHapus
  5. como elimino sus comentarios CSS anteriores de blogger?

    BalasHapus
  6. sudah tambahkan css tampilan berubah tpi tidak ada menu "balas", utk hapus css komentar di menu apa ya?

    BalasHapus
    Balasan
    1. sy liat diblogny, sudah ad menu "balas"nya mba.
      utk hapus css komentar, mba bisa ikuti petunjuk yg sy sebutkan diatas mba.

      Hapus
  7. Sudah praktik tapi tanggalnya mepet sama nama yg komentar. Gimana cara ngaturnya Ya?

    BalasHapus
  8. Sekaligus mau nanya cara mengatur lebar kolom komentar gimana ya?

    BalasHapus
    Balasan
    1. ukuran lebar kolom komentarnya auto mba,
      menyusuaikan lebar templatenya.

      Hapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. cara hapus css komentar bawaan blogger gimana gan?

    BalasHapus
    Balasan
    1. tinggal cari tag css 'comments' nya aj, trus dignti dgan yg diatas.

      Hapus
  11. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. aku kesulitan nyari css komen asli blog, Bang. hehe

    BalasHapus
  14. yang saya butuhkan itu begini: Tampilan awal kotak komentar sempit sehingga huruf tindih tindihan. Tapi setelah komentar awal di tulis, thread selanjutnya normal.

    Bisakah iFramesnya di robah ya...

    BalasHapus
  15. mas semisal ikon nya komentar anonyous kita ganti biar tidak blank bagaimana

    BalasHapus
  16. karena di blog saya blank hanya hitam

    coba mas lihat

    https://www.7download.site

    BalasHapus
  17. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Berikan komentar anda sesuai Topik yang ada.