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 Ficri Pebriyana akan 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 CSS kedalamnya. Tidak hanya kode CSS saja yang ada didalamnya tentu didampingi dengan kode HTML 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 HTML
3. 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

Baca juga artikel berikut :

Membuat Komentar Blog Valid HTML5

Membuat Show Hide Komentar Valid HTML5 dan CSS3

Sekian artikel mengenai Cara Membuat Pesan diatas Kotak Komentar. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini