Cara Membuat Pesan di atas Form Komentar Simple dan Keren

Pada artikel kali ini BlogipRikardo akan memberikan tutorial bagaimana Cara Membuat Pesan di atas Form Komentar Simple dan Keren. Untuk demo nya bisa dilihat pada gambar di samping ini.

Jika Anda tertarik untuk membuatnya, silahkan masuk dulu ke akun blogger Anda dan pilih menu edit HTML. Ada baiknya ada backup terlebih dahulu template blog Anda, untuk berjaga-jaga jika terjadi kesalahan.

Setelah itu ikuti cara berikut ini:

• Cari kode (dengan menggunakan CTRL+F) ]]></b:skin> lalu tambahkan CSS berikut tepat diatasnya:

/*-- 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
    }

• Cari kode (dengan menggunakan CTRL+F) <p><data:blogCommentMessage/></p> biasanya ada 4 kode, cari kode yang ke 2 dan ke 4. Kode nya kira-kira 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 kode berikut pada kode diatas:

<div id='threaded-comment-form'>
KODE DIATAS
</div>  

• Jadi hasilnya 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>

Catatan: Lakukan cara 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.

• Setelah itu cari lagi kode document.getElementById(domId).insertBefore(replybox, null); ganti dengan kode ini.

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

• Simpan Template.

Untuk mengisi pesan komentar, silahkan Anda menuju Dashboard→Setelan→Pos dan Komentar→Scroll kebawah→Pilih Tambahkan. Lalu klik Simpan Setelan di sudut kanan atas.

Nah itulah Cara Membuat Pesan di atas Form Komentar Simple dan Keren dari BlogipRikardo. Semoga Bermanfaat.

Tweet