Cara Membuat Form Admin di Komentar Menjadi Lebih Menarik

Cara Membuat Form Admin di Komentar Menjadi Lebih Menarik. - Selamat malam sobat nehand dimanapun berada, pada kesempatan malam kali ini saya akan sharing Cara Membuat Form Admin di Komentar Menjadi Lebih Menarik.

Saking banyaknya Tutorial dan Widget untuk mempercantik blog terkadang kita merasa bingung harus mengaplikasikan yang mana yang cocok di pasang di blog kita, biasanya pemikiran seperti ini sering menghampiri sobat blogger yang mengedepankan penampilan blog agar lebih menarik dan sedap dipandang.

Nah sebelum melangkah lebih jauh saya ingin menjelaskan terlebih dahulu yang saya maksud Form admin komentar menarik ini bisa sobat lihat langsung di bagian bawah komentar di blog nehandnews.com ini. atau berikut screeenshotnya :

Langsung saja sob, berikut Cara Membuat Form Admin di Komentar Menjadi Lebih Menarik :

1. Seperti biasa login dulu di akun Blogger sobat.

2. Kemudian pilih Menu Template => Edit HTML

3. Selanjutnya cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat sebelum kode ]]></b:skin>

/* Comments ----------------------------------------------- */ #comments h4 { font-size: 18px; font-weight: normal; margin: 10px 0; } .cm_wrap { clear: both; margin-bottom: 10px; float: right; width: 100%; } .cm_head { margin: 0; width:60px; float: left; } .cm_avatar { margin: 0; vertical-align: middle; border: 1px solid #DDD; padding: 3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJoQia_DE4dD0PaRJ13Zr-VW-M1-Qt_19nOVQMaACvL3PG9XLPZCuXMC7Y5UQQ9x0h0TpnzcvHfZHk9bBZrdx6CTM7dz3EzgalFqySWpMSKrcpPpW1yralc6CD20kpRbxcqTuksj2u3-o/s1600/takdikenal.jpg) center no-repeat; width: 35px; height: 35px; } .cm_avatar_a { margin: 0; vertical-align: middle; border: 1px solid #DDD; padding: 3px; background:#c6e5f7; background-position:center; background-repeat:no-repeat; width: 35px; height: 35px; } .cm_reply { padding-top: 5px; } .cm_reply a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; } .cm_reply a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; } .cm_entry { padding: 16px; background: #fcfcfc; border: 1px solid #E4E4E4; overflow: hidden; } .cm_arrow { display: block; width: 9px; height: 18px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQw0k4OppWfCTYXfkNtt1odexg__D1SQxxi79ckx4n_XAbPX4nb1x7WU3AChFwDPuji324gFNKHXuNzVINB1sLWEHnwvVsPlHR6Yv9HX2cQmZaRmL1Gg2r43cXT8Z-jmQ8800bukO5_c/s1600/comment-arrow.gif) no-repeat; position: absolute; margin-left: -25px; } .cm_info { margin-bottom: 10px; border: 0px; background-color: #fcfcfc; padding: 5px; } .cm_info_a { margin-bottom: 10px; border: thin solid #E6E6E6; background-color: #dff0fa; padding: 5px; } .cm_name { font-size: 14px; color: #666666 !important; text-decoration:none; float: left; } .cm_name_a { font-family:"Comic Sans MS", cursive; font-size: 14px; color: #666666 !important; text-decoration:none; font-weight: bold; float: left; } .cm_date { font-size: 10px; color: #999; text-decoration:none; float: right; } .cm_date_a { font-family:"Comic Sans MS", cursive; font-size: 10px; color: #2D5E7B; text-decoration:none; float: right; padding-top:5px; } .cm_entry p { padding: 5px; clear: both; border: 0px; background-color: #fcfcfc; font-size: 13px; font-family:"Comic Sans MS", cursive; color: #333; word-wrap:break-word; } .cm_entry_a p { padding: 5px; clear: both; border: 0px;; background-color:  #fcfcfc; font-size: 13px; font-family:"Comic Sans MS", cursive; color: #333; word-wrap:break-word; } .cm_pagenavi { font-size: 10px; text-transform: uppercase; color: #666; text-shadow: 1px 1px white; font-weight: bold; } .cm_pagenavi a { color: #666; text-decoration: none; padding:10px; } .cm_pagenavi a:hover { text-decoration: underline } .cm_pagenavi span { color: #888; background: white; padding: 4px; border: 1px solid #E0E0E0; } /* Comment Admin  */ .comment-body-author { font-family:"Comic Sans MS", cursive; font-weight: 300; }

4. Selanjutnya cari kode </body> dan pastekan kode berikut tepat sebelum kode </body>.

<div class='comments' id='comments'>
  <a name='comments'/>  <b:if cond='data:post.allowComments'>  <h4>
  <b:if cond='data:post.numComments > 0'><a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a>  <b:if cond='data:post.numComments == 1'>  <span id='cm_total'>1</span> <data:commentLabelPlural/>    <b:else/>  <span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>  </b:if>  </b:if>  </h4>
<div id='cm_reply_css'/>
     <div class='cm_pagenavi' id='cm_page'/>
     <div id='cm_block'>
  <b:loop values='data:post.comments' var='comment'>  <b:if cond='data:comment.isDeleted'>  <b:else/>     <div expr:id='data:comment.anchorName'>
  <div class='cm_wrap'>
  <a expr:name='data:comment.anchorName'/>    <div class='cm_head'>
  <div class='cm_avatar'>
  <b:if cond='data:blog.enabledCommentProfileImages'>  <data:comment.authorAvatarImage/>  </b:if>    </div>
<div class='cm_reply'>
  <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>  </div>
</div>
<b:if cond='data:comment.author == data:post.author'>  <dd class='cm_entry'> <span class='cm_arrow'/>  <div class='cm_info_a'>
  <div class='cm_name_a'>
  <b:if cond='data:comment.authorUrl'>  <img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGu1STLjUO4HVOijQsAHeI_x8EqJVOFznc2LClM7McwuFx6E6vjabp1ThQCSagiCruvXrspocpu4w6rtqdROkySn3hN5b6KqvT37_oeXtsX7d3suOLkACJKm_retkrhEmmpSDlv-tb6Ho/s1600/adminstar.png' title='Admin' width='20px'/>  <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>  <data:comment.author/>  </a>  <b:else/>  <b><data:comment.author/></b>  </b:if>  </div>
<div class='cm_date_a'>
  <data:comment.timestamp/>  <b:include data='comment' name='commentDeleteIcon'/>  </div>
<div class='clear'/>
    </div>
<div class='comment-body-author'>
  <p>
<data:comment.body/></p>
</div>
</dd>  <b:else/>  <dd class='cm_entry'>  <span class='cm_arrow'/>  <div class='cm_info'>
  <div class='cm_name'>
  <b:if cond='data:comment.authorUrl'>  <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>  <data:comment.author/>  </a>  <b:else/>  <b><data:comment.author/></b>  </b:if>  </div>
<div class='cm_date'>
  <data:comment.timestamp/>  <b:include data='comment' name='commentDeleteIcon'/>  </div>
<div class='clear'/>
    </div>
<p>
<data:comment.body/></p>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>  </dd>  </b:if>  </div>
</div>
</b:if>    </b:loop>  </div>
<div class='cm_pagenavi' id='cm_page_copy'/>
     <b:if cond='data:post.embedCommentForm'>  <b:if cond='data:post.allowNewComments'>  <b:include data='post' name='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'><data:postCommentMsg/></a>  </b:if>  </b:if> </b:if>  </div>

* Ganti __BlogID__ di dalam kotak form di atas dan ganti dengan kode blog sobat sendiri.

6. Terakhir cari kode :

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/><b:include data='post' name='comments'/>

</b:if>

Ganti kode tersebut dengan kode dibawah ini :