Cara Mudah Membuat Pesan diatas Komentar Blog

Ilustrasi Pesan diatas Komentar

Belajar Komputer -  Cara Mudah Membuat Pesan diatas Komentar Blog, ya mungkin ini judul yang cocok untuk postingan kali ini, karena setelah sempat beberapa kali mencoba memodifikasi script dari blog untuk menambahkan Pesan Diatas Komentar dan selalu gagal, dan Pesan yang ditampilkan selalu ada dibawah Kotak Komentar.

Seperti yang Kita ketahui bersama, Pesan Diatas Kotak Komentar bisa berguna untuk mengingatkan dan menginformasikan kepada para pengunjung blog yang ingin meninggalkan komentar terkait aturan yang diterapkan dalam blog tersebut hal ini berguna juga agar pengunjung blog tidak berkomentar yang tidak baik yang tentu saja merugikan dari pihak admin suatu blog, salah satunya timbul komentar SPAM atau komentar yang mengandung unsur negatif seperti pornografi, provokasi & sara dan komentar tersebut mengandung link aktif yang tentunya menjadi broken link yang menyampahi blog tersebut. Kita bisa mencegahnya dengan pesan teks agar visitor tahu peraturan-peraturan yang sudah ditentukan oleh admin.

Baik langsung saja bagi Anda yang ingin mencoba untuk Membuat Pesan diatas Kotak Komentar Blog, silahkan simak dan ikuti tutorial tentang cara membuat pesan diatas kotak komentar blog berikut ini.

TIPS PERTAMA

---

Langkah 1. Login ke Blogger terlebih dahulu.

Langkah 2. Klik Setelan ==> Pos dan Komentar

Langkah 3. Scroll kebawah, Pada kolom Pesan Formulir Komentar, Silahkan isikan Pesan yang akan ditampilkan diatas kotak komentar, jika sudah klik Simpan Setelan.

Menambahkan Pesan diatas Kotak Komentar

Jika Anda sudah mengikuti langkah-langkah diatas dengan baik, maka secara otomatis Pesan yang Anda Ingin tampilkan diatas kotak komentar sudah bisa terlihat. Akan tetapi jika Anda sudah mengikuti langkah-langkah tersebut ternyata Pesan yang ditampilkan berada dibawah kotak komentar, maka Anda bisa mencoba tips yang kedua berikut ini.

Pesan Kotak Komentar

TIPS KEDUA

---

Sebaiknya sebelum Anda mengikuti langkah-langkah pada tips yang kedua ini, silahkan lakukan backup template blog Anda terlebih dahulu untuk mengantisipasi kesalahan yang mungkin terjadi.

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 script berikut.

<div id='threaded-comment-form'>
...gabung dengan kode diatas...
</div>

Sehingga berubah menjadi seperti berikut.

<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 berikut.

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

Ganti kode diatas menjadi.

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
    }

Kemudian Simpan Template, maka Pesan yang Anda buat tadi sudah bisa ditampilkan diatas komentar dengan style yang menarik. Jangan lupa untuk membaca update sebelumnya juga ya kawan mengenai Promo Heboh Alfamart. Semoga bermanfaat.

Inspirasi Blog :

http://blog.kangismet.net/2013/05/membuat-pesan-di-atas-form-komentar.html

Tweet