Cara Mudah Membuat Pesan Komentar Valid Html5

Pesan komentar valid html 5 dan tentunya seo friendly sangat dibutuhkan seorang bloger, cara memasang Pesan Komentar di halaman blog juga beraneka ragam. Pentingnya suatu pesan komentar buat para pengunjung yang akan berkomentar menjadi suatu aturan tersendiri buat pengunjung blog tersebut. pada postingan kali ini saya terinspirasi dari seorang sahabat yang memang membutuhkan script Pesan Komentar, semoga beliau merasa senang atas tampilan pesan komentar ini walaupun memang tampilannya sederhana.

fungsi Pesan Komentar

Pesan Komentar ini berfungsi untuk memberikan suatu pesan aturan dari tata cara menyampaikan sebuah komentar untuk sebuah artikel yang telah kita posting pada halaman blog kita. Sebagai fungsi suatu pesan aturan, kita akan menuliskan suatu pesan yang memang benar benar ringkas jelas dan tidak bertele tele. Sebuah pesan yang disampaikan buat para pengunjung yang akan menjadi sebuah aturan dalam berkomentar harus dituliskan dengan serba sopan santun agar para pengunjung kita tidak merasa tersinggung, sebab suatu kunjungan sangat berharga buat suatu halaman blog kita. Dalam postingan saya kali ini, sebuah pesan dalam halaman blog akan kita buat, dan akan saya uraikan melalui tag tag html agar dapat kita sisipkan dalam tubuh tag HTML blog kita. Saya beharap sahabat sahabat bloger saya sudah memahami kegunaan dari Pesan Komentar yang akan kita buat pada halaman blog kita. Langsung saja menuju TKP

Lihat screen shoot gambar pesan komentar yang akan kita buat dibawah ini.

Fitur Pesan Komentar

• Text Pesan Komentar
• Form Email Subscribe
• Tombol Join to Blog
• Tombol Konversi Kode
• Tombol Forum Diskusi
  Tombol Link Exchange
• Tombol sosial media Gplus, Twitter, Facebook
• Gift image Feedburner logo

Artikel pendukung

• Cara membuat pesan komentar BAG 1
• Cara membuat pesan komentar BAG 2
• Banyak para bloger kesal akibat pesan komentarnya selalu melorot kebawah kotak komentar, tapi saya sudah mempunyai solusinya temukan solusinya dan lihat pada tutorial Cara mengatasi kesalahan pesan komentar

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

/*****************************************
Name : Pesan Komentar
By : Rivai Silaban | Blog Design
Update : 30 Agustus 2013
******************************************/
#bdrspesan-comment {
position : relative;
width : auto;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #000 solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
background-color: #666666;
color: #FFFFFF;
}
#bdrspesan-comment strong {color:#99FF00}
#bdrspesan-comment::after, #bdrspesan-comment::before {
top : 100%;
border : transparent solid;
content : '';
height : 0;
width : 0;
position : absolute;
}
#bdrspesan-comment::before {
border-top-color : #000;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#bdrspesan-comment::after {
border-top-color : #666;
border-width : 9px;
left : 10%;
margin-left : -30px;
}
#bdrspesan-comment .BD-but{
border:1px solid #b0130d;
color:#000000;
cursor:pointer;
font-weight:100;
margin:5px -10px 0px 0;
text-decoration:none;
text-shadow:none;
display:inline-block;
box-shadow: 0 1px 0 0 #fff inset;
background-color:#00CCFF;
padding:5px 10px;
border-color: #333;
border-radius:5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#bdrspesan-comment .BD-but:hover{
color:#99FF00;
text-shadow:none;
border:1px solid ;
display:inline-block;
box-shadow:0 0px 2px 0px #FFF;
background-color:#333333;
border-color: #333;
}
#bdrspesan-comment .BD-box {
margin-top : 0px;
padding : 0 0px;
text-align: right;
}
#bdrspesan-comment .input {
font-size : 12px;
padding : 10px 5px;
text-shadow : 1px 1px 0 #FFF;
width : 200px;
color : #990000;
font-family : georgia;
border : solid 1px;
border-color : #0099FF;
background-color: #E1FBFB;
border-radius:5px;
margin-bottom: 2px;
}
#bdrspesan-comment .input:hover {
background-color: #FFFFFF;
}
#bdrspesan-comment .submit {
border: solid 1px;
color : #000000;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 10px 15px;
border-radius:5px;
text-shadow : 0px 1px #999;
text-transform : uppercase;
height : auto;
background-color : #00CCFF;
border-color : #000099;
font-style: italic;
font-weight: normal;
margin-left:4px;
}
#bdrspesan-comment .submit:hover {
background-color :#2FD6FF;
box-shadow: 1px 1px 5px #333;
color : #990000;
text-shadow: none;
}/*** Blog Design CSS and ***/

Install tag html

• Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya. disini saya akan menjelaskan pemasangan pesan komentar untuk blog standart.
• Pencarian I -- coba anda cari kode <p><data:blogCommentMessage/></p> . Kode tersebut terdiri dari 4 kode yang sama pada 2 tempat berbeda, Untuk melihat 2 kode <p><data:blogCommentMessage/></p> coba cari kode<b:includable id='comment-form' var='post'> setelah anda buka keseluruhan kodenya silahkan cari kode <p><data:blogCommentMessage/></p> pastinya anda akan menemukan 2 kode serupa. Silahkan Copy Kode tag HTmL didalam spoiler yang ada dibawah dan ganti kode <p><data:blogCommentMessage/></p> dengan kode yang anda copy. Ingat.. !! Gantikan pada kedua kode <p><data:blogCommentMessage/></p> tersebut.
• Pencarian II -- coba anda cari kode <b:includable id='threaded-comment-form' var='post'> ( kode ini berada pada bagian comment ) setelah anda sudh menemukan kode tersebut buka keseluruhan kodenya silahkan cari kode <p><data:blogCommentMessage/></p> pastinya anda akan menemukan 2 kode serupa. Silahkan Copy Kode tag HTmL didalam spoiler yang ada dibawah dan ganti kode <p><data:blogCommentMessage/></p> dengan kode yang anda copy. Ingat.. !! Gantikan pada kedua kode seperti mengganti kode pada pencarian pertama.
• Save template anda dan lihat hasilnya.
  
  
• Untuk Memasang kode pesan komentar ini pada beberapa template yang telah saya buat, silahkan ada cari kode <div id='pesan-comment'><data:blogCommentMessage/></div> didalam bagian kode <b:includable id='comment-form' var='post'>, ada 2 kode serupa silahkan ganti kode <div id='pesan-comment'><data:blogCommentMessage/></div> dengan kode yang ada pada spoiler dibawah ini. gantikan pada ke 2 kode yang sama.
  
  Setelah terpasang cari kembali code <b:includable id='threaded-comment-form' var='post'> ( kode ini berada pada bagian comment ) lihat kode bagian dalamnya anda pasti menemukan 2 kode <div id='pesan-comment'><data:blogCommentMessage/></div> yang sama silahkan gantikan kode tersebut dengan kode didalam spoiler dibawah ini seperti mengganti kode pencarian yang pertama.
• Save halaman anda dan lihat hasilnya, semoga bermanfaat. 

<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar start -->
<div id='bdrspesan-comment'>
<span class='BD-box'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
<img alt="feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPE57yy5kTRoS8SclcOVq0VhKgpZuwxCEYjpWolTE0_FOQKGo1ff26b036cl3pdgIQ393hpfLcp_hW4kasmjRZd60LLG3fJWFC1cs2ihGdQNoBAuprWc_BJ1OLbwCBuxmqi7I4iF-6O1A/h77/feedburner.png" title='feedburner' style="margin-bottom:-9px;margin-right:25px;"/> <input name='email' type='text' class='input' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' value='Enter email here !!' />
<input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
</form></span>
<div style="font-family:Georgia, 'Times New Roman', Times, serif; color: #FFFF00; font-size: 14px; font-style: italic; font-weight: bold; width: 100%; background-color: #999999; margin: 15px -20px 5px -10px; padding:10px; text-shadow: 1px 1px 1px #000;">Salam bloger .. !! <br />
Pergunakan fasilitas yang dapat membantu anda pada halaman blog ini.</div>
<p> 1. Komentar <strong>SPAM</strong> Akan secepatnya dihapus <br/>
2. Pastikan untuk &quot; <strong>Berlangganan Lewat Email </strong>&quot; untuk membangun kreatifitas blog ini <br/>
3. Cek komentar masuk sebelum bertanya. <br/>
4. Link aktiv tidak akan berpungsi. <br/>
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya. <br/>
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik &quot;<strong> Forum Diskusi </strong>&quot; <br/>
7. Bergabung dengan kami untuk menjadi member Klik &quot;<strong>Join to Member</strong> &quot; <br/>
8. Bila komentar anda mengandung code HTML silahkan anda konversikan terlebih dulu<br/>
silahkan klik &quot; <strong>Konversi Kode </strong>&quot; <br/> </p>
<a class='BD-but' href='http://rivai-silaban.blogspot.com/p/k-onversi-kode-html-adalah-suatu-sistem.html'
onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;
height=500,width=700,toolbar=yes,location=yes,status=yes,menubar=yes,
scrollbars=yes,resizable=yes&quot;);return false;'
target='_blank' title='Konversi Kode'>Konversi Kode</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='Forum Diskusi'>Forum Diskusi</a>
<a class='BD-but' href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA' rel='nofollow' target='_blank' title='Join to Blog'>Join to Blog</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='LINK EXCHANGE'>LINK EXCHANGE </a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='GPLUS'>GPLUS</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='FACEBOOK'>FACEBOOK</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='TWITTER'>TWITTER</a> </div>
<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar End -->

Keterangan Code

• Tulisan kode warna MERAH ganti dengan link menu anda sematkan ID FEEDBURNER anda.
  Untuk title dan menu harus sama penulisannya biar lebih SEO Friendly lihat tulisan warna BIRU .
• Tulisan warna BIRU nama dan judul menu linknya .
• Untuk kode warna HIJAU silahkan ganti dengan pesan anda sendiri agar lebih abdol
• Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda.