Cara Membuat Pra Message Comment

Seperti yang agan lihat diatas, Pra message comment merupakan pesan pemilik blog kepada pembaca sebelum mereka mengutarakan komentarnya. Kotak pesan ini sangat penting karena terkadang banyak pembaca yang mengunjungi blog kita hanya untuk nyepam alias menuliskan link blognya agar dikunjungi oleh pegunjung yang lain maupun si pemilik blog.
Sebenarnya blog walking memang dibutuhkan untuk saling bersilaturahmi antar sesama blogger. Jika agan sering mengunjungi blog orang lain dan meninggalkan komentar, secara tidak langsung hal tersebut akan menambah pagerank web kita. Dan apa yang terjadi sekarang ? banyak blogger - bloger yang mengunjungi blog - blog ternama hanya untuk nyepam. Perlu kalian ketahui gan, walaupun hanya mesin.. google juga punya perasaan yang sensitif, jika agan nyepam di blog tetangga secara nggak sengaja pagerank agan bisa turun. So jika agan pengen blog walking lakukanlah yang sewajarnya.

Kembali lagi ke topik, untuk membuat tampilan pra message comment seperti di atas agan perlu menambahkan CSS berikut :

/* Pesan Komentar */
#pra-comment{font-family:'Roboto',Arial,sans-serif;position:relative;background-color:#D8DDE8;color:#fff;width:100%;padding:10px 10px 30px 10px;margin:0 10px 13px 0;line-height:1.3em;box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}
#pra-comment::after{top:100%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none}
#pra-comment::before{border-top-color:#333;border-width:15px;left:10%;margin-left:-20px}
.pra-massage-comment{padding:10px;margin-bottom:10px;background-color:#222;border:2px solid #333;font-family:inherit;font-size:13px;color:#fff;box-shadow:0 0 3px #000 inset}
.but-right-com{float:right;width:auto}
@media only screen and (max-width:767px){#comment-editor{background:none}}
@media only screen and (max-width:650px){.comments .comments-content .comment-replies{margin-left:0}.comments .comment .comment-actions a{background-color:#ddd;transition-duration:1s;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:1px 1px 4px #AAAAAA;box-shadow:0 1px 2px rgba(0,0,0,.2);color:black;left:0;margin-right:4px;padding:3px 7px;position:relative;top:5px}.comments .comment .comment-actions a:hover{color:#fff;background-color:#666;-webkit-transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out;-ms-transition:color .4s ease-in-out;transition:color .4s ease-in-out}}
@media only screen and (max-width:490px){.comments .comments-content .datetime{display:none}}
@media only screen and (max-width:479px){#comments{padding:0 10px}#comments h4{margin:0 0}.comments .comments-content .datetime{display:none}.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:0}.comments .comments-content .comment-header{margin:0}.comments .avatar-image-container{display:none}.comments .avatar-image-container img{display:none}.comments .inline-thread .avatar-image-container{display:none}.comments-number{display:none}.comments .comment-thread.inline-thread .comments-number{display:none}}

Selanjutnya agan ganti kode HTMLnya, cari code berikut <b:includable id='threaded-comment-form' var='post'> sampai </b:includable> kemudian ganti dengan code HTML di bawah ini.

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a href='#comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' src='' style='display: none;border:none;overflow:hidden' width='628px'/>
    <b:else/>
<div id='pra-comment'>
<div class='pra-massage-comment'><data:blogCommentMessage/></div>
</div>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' src='' style='border:none;overflow:hidden' width='628px'/>
    </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>

Cukup sekian tutorial membuat pra message comment, agan bisa berkreasi sendiri dan menyesuaikan warna tampilannya dengan mengedit CSS diatas. Semoga bermanfaat.