Merubah tampilan komentar di Blog lebih menarik

 |  3 Comments | 


Assalamualaikum sahabat Blogger dimanapun berada, kali ini saya akan membagi sedikit tips tentang cara merubah tampilan komentar lebih menarik seperti gambar di atas. Lansung saja simak langkah-langkah berikut:

Caranya:

  • 1. Masuk Blogger Template - Edit HTML
  • 2. Cari kode ]]></b:skin> lalu copy kode berikut 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/AVvXsEhc6HYUuRl7XOqJ1uiVedztSIBXN1x9P-M6vjKKfQroo7CTti3cCyUHT5rUi9rkewHDTKcXUsZMW_AVLp7q8tTVP4aIE3xiF8i3S78pQNXQl-RbQQQCarlqPynxFCq2cck_zAwsgAPrTDE/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/AVvXsEjRGLEiIeQgyUTG2hF_pdK5deAIsQQoL4CcL_MGNh05eG6oa0X93lZ8r9IqORrVCIF9hRwJHUnp52oRaY5IAMea0_0ax8paZN3rolaN_C5HdXrgNno6NcDE1lVVL6ZLJ0GYmYUYQy35agA/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;
}

  • 3. Cari Kode </body> lalu copy script berikut sebelum/ di atas kode </body
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://koderator.googlecode.com/files/comment.js' type='text/javascript'/>
<script src='http://yourjavascript.com/2012721154/emoticon-wp2.js' type='text/javascript'/>
</b:if>
  • 4. Cari kode  <b:includable id='comments' var='post'>
setelah ketemu liihat kode tersebut seperti tulisan yang di blok pada gambar berikut:


<b:includable id='comments' var='post'>
kode script yang diganti
</b:includable>

Ganti kode script yang diganti dengan kode brikut:
<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
  <h4>
  <b:if cond='data:post.numComments &gt; 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='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); 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/AVvXsEjAUHN-m5oWNuGNyDru_k4-EqvDiXzQyuvSBvWAMvAp1PE-RV-aBOtH2rcg39-baJiLF3MRkYO4811h8n6Qd4oNBTqNe9IL94Tl_Vw5DyEMQXC38dM8qnWwqfs7f1ksao3xaoO7o2tcjBs/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__ dengan Blog ID anda, caranya buka new post
lihat di URL nya:

  • 5. Langkah terakhir untuk menampilkannya cari kode berikut 
<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 
<b:include data='post' name='comments'/>
Kemudia save template dan lihat hasilnya... :14: :14: :14:

Apabila cara ini sudah berhasil maka anda bisa merubah emoticon nya menjadi emoticon kaskus..silahkan baca artikelnya Cara memasukkan emoticon kaskus di komentar blog :37: :37:
Terimakasih semoga bisa bermanfaat.. :21:

3 komentar:

  1. Very Handika11 Jan 2015, 17.28.00

    terimakasih sukses gan , demo veryhandika.blogspot.com

    BalasHapus
  2. Anonim31 Mar 2022, 00.16.00

    Merubah Tampilan Komentar Di Blog Lebih Menarik >>>>> Download Now

    >>>>> Download Full

    Merubah Tampilan Komentar Di Blog Lebih Menarik >>>>> Download LINK

    >>>>> Download Now

    Merubah Tampilan Komentar Di Blog Lebih Menarik >>>>> Download Full

    >>>>> Download LINK

    BalasHapus

Warning!
- Tinggalkan jejak anda di kolom komentar.

Copyright © 2012 CAHLABAN. All rights reserved.