Membuat Pesan di atas Form Komentar

Membuat Pesan di atas Form Komentar - Ada beberapa pertanyaan dari sahabat, tentang bagaimana cara membuat atau memodifikasi kotak pesan di atas form komentar. Hal ini mungkin sudah sering terlihat pada blog-blog yang menyajikan tutorial blogger.

Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, atau pun lainnya. Hasilnya akan tampak seperti gambar di bawah ini :

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.

Langkah 1 : Cari kode <p><data:blogCommentMessage/></p> biasanya ada 4, cari yang ke 2 dan ke 4. Kurang lebih kodenya seperti ini :

<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%'/>

tambahkan pada kode diatas :

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

hasilnya kurang lebih seperti 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>

Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan.

Langkah 2 : Cari kode :

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

ganti dengan kode

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

Langkah 3 : Untuk mempercantik tampilan, tambahkan CSS di atas ]]></b:skin>

/*-- Modifikasi Pesan Komentar--*/
#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
    }

Simpan Template.

Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klikTambahkan.