Tutorial : Menambahkan dan Edit Pesan diatas Komentar Blog

Biasanya nih, sebagian besar blogger selalu kasih notes untuk pembaca yang mau berkomentar di postingan mereka guna untuk mengingatkan agar kalo kamu mau komen harus sopan, jangan spam dan lain sebagainya.

Jadi disini aku mau kasih tutorialnya, Cara Menambahkan dan Mengedit Pesan diatas Kolom Komentar di Blog.

Langkah untuk menampilkan pesan di atas komentar :
1. Login Blog
2. Dashboard > Settings > Post, Comments and Sharing
3. Comment Form Message
4. Isi kata-kata yang kamu hendaki . Save Settings
Contohnya bisa lihat digambar berikiut

Kemudian langkah untuk mengedit pesan di komentar :
1. Dashboard > Theme > Edit HTML
2. Cari kode :

<p><data:blogCommentMessage/></p>

Biasanya ada lebih dari 1 , maka cari yang ke 2
3. Tambahkan kode ini di atas dan dibawah kode no.2

<div id='threaded-comment-form'>
----- tempat untuk kode no.2 di atas -----
</div>

4. Kemudian cari kode ini :

document.getElementById(domId).insertBefore(replybox, null);

5. Ganti kode no.4 dengan kode ini :

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Note :
Kode ini berfungsi untuk tetap menampilkan pesan peringatan di atas kolom komentar meskipun sudah banyak komentar di bawahnya

6.Terakhir cari kode

]]></b:skin>

7. Dan CoPas kode berikut di ATAS kode ]]></b:skin>

/*-- Modifikasi Pesan Peringatan di Komentar Blog--*/
#threaded-comment-form p {
    position: relative;
    background: #4085b8;
    border: 3px solid #5899c9;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 12px;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: #5899c9;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #4085b8;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }

8. Save dan liihat hasilnya ^^

---

Terima Kasih Sudah Berkunjung dan Membaca Artikel ini ya ^^

---