Merubah tampilan komentar di Blog lebih menarik


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. terimakasih sukses gan , demo veryhandika.blogspot.com

    BalasHapus
  2. 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.