Membuat Pesan Komentar Di Bawah Editor Komentar

Membuat pesan komentar di bawah editor komentar ini bersama-sama untuk mengatasi atau mengisi jarak bawah editor komentar gres blogger dengan form komentar yang cukup jomplang.

Ini diawali oleh +Kang Ismet dengan menaruh ucapan terima kasih sudah berkomentar dalam bentuk gambar yang diposisikan di sebelah kanan bawah form komentar dengan mengaturnya pada css editor komentar sebagai background menggantikan loader editor komentar.

Namun sebab aku ingin mempertahankan gambar loader editor komentar, maka aku coba cara lain untuk mengatasinya.

Nah bagi yang tertarik untuk mencobanya, silahkan ikuti trik di bawah ini.

Untuk menciptakan pesan komentar di bawah editor komentar ini kita akan menambahkan sedikit isyarat html yang tentunya diletakan di bawah isyarat editor komentar di dalam class comment_form.

1. Bagi yang telah memakai treaded comment hack.

Silahkan cari isyarat menyerupai ini di daerah <b:includable id='comments' var='post'>

   <div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>  
      <div class='comment_emo_list'/>
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
  </div>
 </b:if>
</div>    

Kemudian tambahkan isyarat di bawah ini 

<div style='float:right;margin-top:-54px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>

Untuk kata-katanya silahkan rubah sesuai dengan yang Anda inginkan. Sehingga penampakannya menyerupai di bawah ini

   <div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>  
      <div class='comment_emo_list'/>
     <b:include data='post' name='threaded-comment-form'/>
       <b:else/>
       <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
     <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a>
    </b:if>
   </b:if>
    <div style='float:right;margin-top:-54px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>
  </div>
 </b:if>
</div>    

Silahkan atur pada margin-top kalau kotaknya terlalu ke atas, atau margin-right kalau kotaknya terlalu ke kanan. Terakhir silahkan SAVE templatenya.

2. Bagi yang memakai threaded comment blogger biasa.

Silahkan temukan isyarat menyerupai di bawah 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>

Tambahkan isyarat ucapan terima kasihnya di atas isyarat </div> paling bawah, jadi menyerupai isyarat di bawah 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 style='float:right;margin-top:-54px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>  </div>
</b:includable>

Kemudian cari isyarat menyerupai di bawah ini

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <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/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <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>

Sama menyerupai di atas tambahkan isyarat ucapan terimakasihnya di atas isyarat </div> paling bawah sehingga penapakannya menyerupai di bawah ini.

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <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/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <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 style='float:right;margin-top:-45px;margin-right:7px;padding:7px 10px;border:1px solid #ddd;border-radius:2px;'>Terima kasih sudah berkomentar</div>  </div>
</b:includable>

Terakhir SAVE templatenya. Selesai...

Nah kalau yang ingin memakai gambar silahkan tanya ke Kang Ismet ya...hehehehe

Sumber https://www.kompiajaib.com/

Share this post