Cara Menambahkan Kotak Pesan di Atas Kolom Komentar Blogger

Artikel kali ini mengenai trik untuk membuat kotak pesan kolom komentar pada halaman blogspot selalu berada di bagian atas kolom komentar. Mungkin beberapa dari kita sebagai blogger akan berpikir seberapa penting kah menggunakan kolom komentar ini?
Menurut saya pribadi trik penambahan kotak pesan ini cukup penting, karena dengan kotak pesan ini memungkinkan kita sanggup memberi catatan (kurang lebih hampir sama seperti sticky notes) agar mudah dibaca oleh calon komentator dan dengan begitu maka calon komentator pun bisa memahami persyaratan untuk meninggalkan komentar dihalaman tersebut.

Langsung saja kita bisa mencoba memulai membuat atau menambahkan kotak pesan tersebut dengan melakukan 3 langkah mudah dibawah ini.

INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.

Langkah - langkah menambahkan kotak pesan

Cukup dengan 3 langkah kita bisa menambahkan kotak pesan diatas kolom komentar, berikut langkahnya :

1. Menambahkan kode HTML seperti dibawah ini.
   
   <div id='threaded-comment-form'>
   ......
   </div>
   Baca juga : Apa itu HTML
2. Mengubah sedikit kode JavaScript kolom komentar seperti dibawah ini.
   
   document.getElementById(domId).insertBefore(replybox, null);
3. Menambahkan kode CSS untuk memberikan tampilan menarik kotak pesan tersebut.
   Baca juga : Prinsip Dasar Penulisan CSS

Langkah 1

Sekarang mari kita mulai dari langkah pertama yaitu dengan mencari kode <p><data:blogCommentMessage/></p>
Perhatikan kode dibawah ini untuk lebih jelasnya.

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Kita akan menemukan kode tersebut sebanyak 4 kali namun kita cukup memberikan sedikit perubahan pada kode yang ke 2 dan yang ke 4. Kode ke 2 untuk memunculkan kotak pesan sebelum ada komentar dan kode ke 4 untuk memunculkan kotak pesan setelah ada komentar. Berikut perubahan yang perlu dilakukan yaitu dengan menambahkan kode yang dibawah ini pada kode <p><data:blogCommentMessage/></p>

<div id='threaded-comment-form'>
......
</div>

Perubahan kode tersebut akan menjadi seperti kode dibawah ini

<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

Langkah 2

Cari kode JavaScript seperti dibawah ini

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

Kita hanya menemukan 1 kali dan ganti kode JavaScript tersebut dengan kode dibawah ini.

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

Langkah 3

Langkah terakhir cari kode ]]></b:skin> untuk menempatkan kode CSS guna memberikan tampilan menarik pada kotak pesan.
Setelah menemukan kode ]]></b:skin>, copy kode dibawah ini dan paste diatas kode ]]></b:skin>

/* Comment Message START */
#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: 11px;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
    }
/* Comment Message END */

Setelah selesai sampai tahap terakhir kita bisa save template kemudian coba untuk membuka halaman salah satu post kita, namun sebelumnya kita wajib menyalakan opsi komentar pada menu tata letak atau layout dibagian widget blog posts, untuk lebih jelasnya bisa melihat contoh gambar dibawah ini.

Untuk mengganti isi pesan didalam kotak pesan kita bisa mengeditnya melalui setting > post, comments and sharing > comment form message, untuk lebih jelasnya bisa melihat gambar dibawah ini.

Sampai disini dulu artikel tentang Cara Menambahkan Kotak Pesan di Atas Kolom Komentar Blogger, semoga artikel ini dapat membantu kita yang ingin memodifikasi tampilan kolom komentar blogspot menjadi lebih menarik.
Terima kasih

Artikel ini ditulis oleh :
Perbloggeran