-->
Cara Membuat Tampilan Pesan Komentar Blogger Menjadi Lebih Keren

Cara Membuat Tampilan Pesan Komentar Blogger Menjadi Lebih Keren

Pesan Komentar adalah sebuah pesan yang biasanya ada di atas ataupun di bawah kolom komentar blog. Tujuan Pesan Komentar sendiri adalah memberi himbauan atau peraturan agar berkomentar dengan sopan, sesuai dengan topik, tidak boleh spam, dan lain-lain sehingga terciptanya komentar yang baik dan membangun untuk kemajuan blog tersebut.

Seperti yang kita tahu bahwa banyak sekali orang-orang yang berkomentar seenaknya seperti spam, menaruh link aktif, berkomentar tidak sesuai topik, promosi, dan sebagainya. Jika hal tersebut dibiarkan, nanti kesehatan blog kita bisa turun karena banyaknya link aktif yang bertebaran tadi.

Untuk Membuat Pesan Komentar di Blogger itu sendiri sangat mudah tapi tampilan yang biasanya diberikan itu tidak terlalu bagus ataupun keren. Namun kita bisa gunakan sebuah cara agar kita bisa mendesainnya sebagus mungkin dengan sedikit sentuhan kode css dan html.

Bagaimana caranya? Inilah tutorial yang akan saya berikan pada postingan kali ini. Jadi sekarang kita akan membahas Cara Membuat Tampilan Pesan Komentar Blogger Menjadi Lebih Keren.

Tanpa berlama-lama lagi, kita akan langsung ke tutorialnya saja.

Pastikan kalian sudah memasang Font Awesome di situs kalian karena icon yang digunakan disini merupakan icon dari Font Awesome

1. Pergi ke Blogger > Tema > Edit HTML.

2. Tekan CTRL + F dan setelah itu kalian carilah kode seperti ini.

<b:includable id='comment-form' var='post'>...</b:includable>

3. Letakkan kode di bawah ini tepat di atasnya.

<b:includable id='pesan-jejak'>
<div class='pesan-jejak'>
<h5>Catatan</h5>
<ul>
<li>Mohon Tinggalkan komentar sesuai dengan judul artikel.</li>
<li>Tidak diperbolehkan untuk mempromosikan barang atau berjualan.</li>
<li>Dilarang mencantumkan link aktif di komentar.</li>
<li>Komentar dengan link aktif akan otomatis dihapus</li>
<li><i>*Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.</i></li>
</ul>
</div>
</b:includable>

Silakan ganti isi pesan komentar pada bagian yang ditandai dengan yang ingin kalian tulis.

4. Selanjutnya kalian cari semua kode ini.

<data:blogCommentMessage/>

5. Gantilah semua kode di atas dengan kode di bawah ini.

<b:include name='pesan-jejak'/>

7. Setelah itu kalian cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya.

[class~=pesan-jejak],[class~=pesan-jejak] h5{font-size:10.5pt;}
[class~=pesan-jejak] h5:before{color:#393939;}
[class~=pesan-jejak] h5{margin-left:0;}
[class~=pesan-jejak] h5,[class~=pesan-jejak]{position:relative;}
[class~=pesan-jejak] h5:before{display:inline-block;}
[class~=pesan-jejak] h5{margin-bottom:0;}
[class~=pesan-jejak]{background:#fff;}
[class~=pesan-jejak] h5:before{content:"";}
[class~=pesan-jejak]{margin-bottom:22.5pt;}
[class~=pesan-jejak] h5:before{font-family:fontAwesome;}
[class~=pesan-jejak]{color:#444;}
[class~=pesan-jejak]{line-height:1.5em;}
[class~=pesan-jejak] h5:before{font-style:normal;}
[class~=pesan-jejak]{padding-left:11.25pt;}
[class~=pesan-jejak],[class~=pesan-jejak] h5{padding-bottom:11.25pt;}
[class~=pesan-jejak] h5:before{font-weight:normal;}
[class~=pesan-jejak]{padding-right:11.25pt;}
[class~=pesan-jejak] h5{margin-right:0;}
[class~=pesan-jejak] h5:before{font-size:18px;}
[class~=pesan-jejak] h5{margin-top:0;}
[class~=pesan-jejak],[class~=pesan-jejak] h5{padding-top:7.25pt;}
[class~=pesan-jejak]{font-weight:500;}
[class~=pesan-jejak] h5{color:#000;}
[class~=pesan-jejak] h5{padding-left:.208333333in;}
[class~=pesan-jejak] h5{padding-right:.208333333in;}
[class~=pesan-jejak] h5:before{margin-right:12pt;}
[class~=pesan-jejak] h5{font-weight:700;}
[class~=pesan-jejak] h5{text-transform:uppercase;}
[class~=pesan-jejak] h5{overflow:hidden;}
[class~=pesan-jejak]{border-radius:7px;}
[class~=pesan-jejak] ul{margin:0 0 0 1.25em;}
.pesan-jejak h5:before{color: #000;display: inline-block;content: "\f164";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;margin-right: 16px;}

8. Selesai.

Penutup

Tampaknya begitu saja tutorial ane tentang Cara Membuat Tampilan Pesan Komentar Blogger Menjadi Lebih Keren. Jika ada yang ingin ditanyakan atau kurang mengerti silakan langsung berkomentar saja di bawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA PAYPAL Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    4 Komentar

    1. Balasan
      1. Disini kita pake icon Font Awesome πŸ˜…

        Bukan icon SVG πŸ˜…

        Hapus
    2. Wah iklan nya udah lepas , semangat posting nya hu

      BalasHapus
      Balasan
      1. Belum verif ktp, jadinya gak muncul iklannya

        Hapus
    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    SafelinkU | Shorten your link and earn money

    Iklan Tengah Artikel 1

    SafelinkU | Shorten your link and earn money

    Iklan Tengah Artikel 2

    SafelinkU | Shorten your link and earn money

    Iklan Bawah Artikel

    SafelinkU | Shorten your link and earn money