Membuat Pesan Formulir Komentar Keren dengan CSS

Pesan formulir komentar ini adalah sebuah pesan untuk kotak komentar, biasanya memang penggunaan pesan formulir di atas komentar ini untuk membuat sebuah pesan, entah itu sebuah peringatan atau kata-kata lain seperti peraturan, sanjungan atau sekedar basa-basi menyambut komentator, yang penting hal ini bisa di sampaikan kepada seorang komentator, maka guna pesan formulir adalah seperti itu.

Contoh dari pesan formulir komentar ini seperti gambar di bawah ini:

Langsung saja ikuti langkah-langkah di bawah ini untuk membuat pesan formulir komentar di blog:

1. Masuk ke Blogger
2. Masuk ke menu Template
3. Lalu pilih Edit HTML dan centang "Expand Template Widget"
4. Cari kode ]]></b:skin>
5. Kemudian salin dan template kode di bawah ini di atas kode tadi:

#threaded-comment-form p { position: relative;
background: #0060FF;
border: 5px solid #FFF;
padding: 10px;
font-size: 13px;
line-height: 1.6em;
color: #FFF;
margin-top: 30px;
}
#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: #38F;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#threaded-comment-form p::after {
border-top-color: #0060FF;
border-width: 9px;
left: 10%;
margin-left: -30px
}

     4.  Setelah itu cari kode seperti yang di bawah ini:

<b:else/>
      <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='500' id='comment-editor' name='comment-editor' src='' width='100%'/>

Perhatian:
Kode yang berwarna biru itu biasanya ada 2 sampai 3, tapi cukup cari kode yang berada di bawah kode <b:else/>
    5. Setelah kodenya ketemu, kalian ganti dengan kode di bawah ini:

<b:else/>
<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='500' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

   6. Jika sudah selesai, silakan simpan template kalian.

Sekian artikel saya kali ini, semoga bermanfaat. Terima kasih sudah berkunjung dan sampai jumpa di artikel saya selanjutnya.