Cara Membuat Pesan Komentar Di Blogspot Cara Membuat Pesan Komentar Di Blogspot

Pesan komentar sangat diperlukan sebagai peraturan kepada pengunjung untuk lebih menjaga tatakrama memberikan suatu komentar pada artikel yang akan dikomentari atau istilah dalam bloging adalah komentar SPAM. Bagi pengguna blog yang masih baru dalam dunia bloging hal ini dapat dengan mudah dilakukan tanpa mengedit html template blog yang berlebihan. Untuk mewujudkan misi ini anda harus lebih dulu membuat pesan untuk komentar anda. Silahkan simak tutorial dibawah ini :

Tutorial

1. Login to Blog
2. Pilih " Setelan " kemudian klik " Pos dan Komentar "
3. Pada halaman tersebut lihat tulisan " Pesan Formulir Komentar " dan silahkan tambahkan pesan anda. setelah selesai klik " simpan setelan " yang ada disebelah kanan atas. Sekarang pesan komentar halaman anda sudah tersedia kini saatnya kita untuk memodifkasinya atau memberikan sentuhan CSS yang tentunya Valid HTML5 & CSS 3 agar lebih sensasional..
4. Sekarang kita masuk ke template ,Silahkan pilih " Template " kemudian klik " Edit HTML " lalu cari code <p><data:blogCommentMessage/></p>. Setelah ketemu silahkan anda ganti dengan code

   <div id='pesan-comment'><data:blogCommentMessage/></div>

   Note : Biasanya code tersebut ada 4 code yang sama pada template blogspot, silahkan ganti keempat code tersebut dengan code diatas.
5. Setelah anda ganti codenya silahkan cari code ]]></b:skin>
6. Setelah ketemu tanbahkan code yang ada dibawah ini tepat keatas code ]]></b:skin> yang anda cari tadi, lalu simpan template anda. Lihat pesan komentar dibawah postingan ini sebagai DEMOnya.

#pesan-comment {
position : relative;
background : #E4E6E7;
width : 95%;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #5F676B solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
}
#pesan-comment::after, #pesan-comment::before {
top : 100%;
border : transparent solid;
content : " ";
height : 0;
width : 0;
position : absolute;
}
#pesan-comment::before {
border-top-color : #5F676B;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#pesan-comment::after {
border-top-color : #E4E6E7;
border-width : 9px;
left : 10%;
margin-left : -30px;
}

Note : Silahkan anda design ulang warnanya agar lebih serasi dengan warna template anda. Bila ada penjelasan diatas yang kurang begitu jelas buat anda silahkan share dengan berkomentar di form komentar dibawah.
Bila anda mengalami masalah pada pemasangan pesan komentar ini silahkan kunjungi link dibawah ini untuk melihat solusinya :

Pesan komentar yang selalu melorot kebawah kotak form komentar

Masalah ini diakibatkan oleh kurangnya beberapa code pada script dan html comment halaman blog, untuk mengatasi hal ini anda perlu manambahkan kode ke tubuh blog anda, silahkan simak penjelasan dibawah ini. 

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari kode dibawah ini.





<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<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='' style='display: none' width='100%'/>
<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='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>



4. Setelah ketemu, coba perhatikan kode tersebut , silahkan hapus kodenya dari kode tulisan warna MERAH atas sampai kode tulisan warna MERAH yang dibawah.
5. Kemudian ganti dengan kode html yang ada dibawah ini.





<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='bdform-wrapper'>
<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='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='bdform-wrapper'>
<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>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>



6. Setelah anda ganti kodenya saatnya kita poles sedikit lagi scriptnya untuk lebih maximal.
7. Cari kode tag dibawah ini pada template anda
   

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

   Biasanya kode tersebut ada pada script komentar ,
8. ganti kode script yang diatas menjadi kode script dibawah ini.
   

     document.getElementById(domId).insertBefore
(document.getElementById('bdform-wrapper'), null);

9. Setelah selesai saatnya anda klik SAVE untuik menyimpan perubahan.

Keterangan Code

• Tulisan kode warna MERAH atas sampai kode warnaMERAH dibawah harus secara keseluruhan anda hapus kemudian masukkan kode pengganti lihat didalam spoiler " Kode Yang Diganti ")
• Cari kode warna HIJAU seperti diatas, setelah ketemu ganti dengan code warnaBIRU. Biasanya kode ini berada pada tag html blog