Cara Membuat Pesan diatas Kolom Komentar di Blog

Menambahkan atau membuat pesan diatas kolom komentar memang sangat berguna dan penting untuk mengingatkan orang yang akan berkomentar di blog kita. 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 orang lain yang akan berkomentar di blog kita tentang aturan berkomentar pada blog kita tersebut.



Membuat pesan komentar diatas kolom 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>

NB :
- Silahkan lakukan pada kode ke 2 dan kode ke 4 dari hasil pencarian kode <p><data:blogCommentMessage/></p> tersebut
- 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

Demikianlah penjelasan mengenai Cara Membuat Pesan diatas Kolom Komentar di Blog. Semoga bermanfaat bagi rekan-rekan semua dalam rangka untuk mempercantik tampilan blognya :)

Author : Unknown

Share this

Related Posts