Cara Membuat Pesan diatas Kotak Komentar

Cara Membuat Pesan diatas Kotak Komentar - Menambahkan atau membuat pesan komentar diatas kotak komentar memang sangat bagus dan penting untuk mengingatkan para komentator blog, baik itu peraturan berkomentar ataupun larangan berkomentar. Menambahkan pesan komentar pada blog sangat cocok bagi blog yang memiliki komentar yang banyak dan ini bisa dijadikan sebagai pengingat kepada para komentator blog kita tentang aturan berkomentar pada blog kita.

Membuat pesan komentar diatas form komentar terkadang ada sedikit kendala terutama ketika sebelum ada komentar pada sebuah artikel dan sesudah ada komentar pada sebuah artikel, kendala atau masalah yang sering dialami adalah ketika artikel belum ada yang berkomentar ternyata pesan komentar masih ada diatas kotak atau form komentar, tetapi ketika artikel tersebut sudah ada yang berkomentar maka pesan komentar pindah jadi dibawah kotak atau form komentar, inilah kendala atau masalah yang sering dialami oleh para Blogger, dan pada kesempatan kali ini blog Downloadakan membuat artikel mengenai tutorial membuat pesan komentar diatas kotak komentar sekaligus membahas mengenai mengatasi pesan komentar menjadi dibawah kotak komentar.

Dalam pembahasan kali ini saya akan sekaligus memodifikasi kotak pesan komentar sehingga lebih terlihat bagus lagi dan lebih cantik lagi dengan ditambahkan beberapa kode CSSkedalamnya. Tidak hanya kode CSS saja yang ada didalamnya tentu didampingi dengan kodeHTML yang menjadi foktor utama dalam pembahasan membuat pesan komentar diatas kotak komentar. Oke langsung saja lihat tutorial cara membuat pesan komentar diatas kotak atau form komentar dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML3. Cari kode seperti ini ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>

/*Pesan Komentar*/

#threaded-comment-form p {

    position: relative;

    background: #666;

    border: 3px solid #000;

    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: #000;

    border-width: 15px;

    left: 10%;

    margin-left: -35px;

    }

#threaded-comment-form p::after {

    border-top-color: #666;

    border-width: 10px;

    left: 10%;

    margin-left: -30px

    }

5. Cari kode seperti ini <p><data:blogCommentMessage/></p> biasanya ada 4 kode.
Mungkin hasilnya akan 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%'/>

7. Lalu tambahkan kode berikut :

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

KODE PERTAMA

</div>

8. Hasilnya akan 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 :
- Silahkan lakukan pada kode ke 2 dan kode ke 4 dari hasil pencarian kode <p><data:blogCommentMessage/></p>
- Kode ke 2 agar pesan komentar muncul sebelum ada komentar
- Kode ke 4 agar pesan komentar muncul setelah ada komentar

9. Cari kode sperti dibawah ini :

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

Lalu ganti dengan kode dibawah ini :

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

10. Klik Simpan Template.


Proses modifikasi tampilan pesan komentar dan mengatasi pesan komentar yang muncul dibawah kotak komentar sudah selesai, sekarang tinggal tambahkan pesan komentar. Caranya seperti dibawah ini :
1. Masuk ke Blogger.com
2. Klik Setelan => Pos dan Komentar
3. Klik Tambahkan
4. Silahkan masukkan pesan komentar Anda
5. Klik Simpan Setelan