Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Cara Merubah Tampilan Komentar Di Blog

Cara Merubah Tampilan Komentar Di Blog | Karna sempat ada teman blogger kita yg request tentang "Cara Merubah Tampilan Komentar Di Blog "Maka pada kesempatan kali ini saya akan membalas request tersebut. Dan Ini dia tampilan kotak komentarnya....!!!

Cara Merubah Tampilan Komentar Di Blog
Tampilan Komentar Di Blog  Setelah di ubah

Gimana sobat...? keren kan..sobat juga pasti sering lah lihat kotak komentar kayak gitu...Apakah sobat ingin membuatnya juga di blog sobat...? Jika iya..maka simaklah tutorial berikut.

Cara Merubah Tampilan Komentar Di Blog 
  • Login Ke Blogger
  • Pergi ke Template >> Edit HTML >> Centang Expand Template Widget
  • Cari kode ]]></b:skin> Untuk Mempermudah Gunakan F3 atau Ctrl+F
  • Setelah itu copy lalu pastekan kode di bawah ini tepat di atas kode ]]></b:skin>


/* Comments
----------------------------------------------- */
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 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(http://4.bp.blogspot.com/-YemqbaT_OBk/To1GlQs7yVI/AAAAAAAAAJA/jvEmEASW6_Q/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(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
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: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
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;
}


  • Setelah itu  taruh kode dibawah ini diatas 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://koderator.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/>
</b:if>


  • Cari Kode
<b:includable id='comments' var='post'>
Kode yang harus di ganti
</b:includable>

  • Di antara kode 
<b:includable id='comments' var='post'>

Dan

</b:includable>

Biasanya akan ada kode yg relatif panjang, ganti kode tersebut denagn kode di bawah ini.

<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='http://3.bp.blogspot.com/-40eKncoFCNM/To1Gy7ZIbiI/AAAAAAAAAJI/KG0TKarHI7M/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; color:#C0C0C0;'>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 tulisan __BlogID__  dengan BlogID sobat

  • Setelah itu cari kode di bawah ini.
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
  • Biasanya akan ada beberapa kode di atas di template blog sobat. Ganti semua kode seperti itu di template blog sobat dengan kode di bwah ini.
<b:include data='post' name='comments'/>

  • Simpan dan lihat hasilnya.

54 komentar:

  1. Tambah sukses aja Om :D
    Mampir balik yah

    http://sazuke-4rt.blogspot.com/2013/01/ns295.html

    BalasHapus
  2. mantap infonya.. dicoba dulu..

    BalasHapus
  3. mantep sob, cara ngilangin terimakasihnya gimana yah

    BalasHapus
  4. coolllll
    http://kangshinokami.blogspot.com/

    BalasHapus
  5. postingan yg menarik kunjungan baliknya www.naufalthedarkness.blogspot.com serta follow back yaw udeh ane follow tuh

    BalasHapus
  6. wah, kayak yang di blog ini ya?
    keren banget tampilannya.. saya coba dulu.

    BalasHapus
  7. nice post sobt.. koment back yah do www.haztak21.blogspot.com thanks

    BalasHapus
  8. met sore sobat wao ini sangat mantap mas terimaksi dah berbagi mas

    BalasHapus
  9. saya coba kawan, semoga berhasil nih ya.

    BalasHapus
  10. tampilannya keren sob. kapan-kapan ane coba deh

    BalasHapus
  11. @Hanif oke nanti saya coba jelaskan...

    BalasHapus
  12. kalo cara ganti scroll di browser gimana itu gan?

    BalasHapus
  13. @Supercoolzz oke..nanti lain kali saya postingkan...

    BalasHapus
  14. tampilanya menarik boss, tapi kalo dicoba takut malah salah coding, blognya nanti gak bisa loading.

    BalasHapus
  15. http://luhurfatah10.blogspot.com/2013/01/cara-membuat-balasan-komentar-di-blog.html?showComment=1358765492243#c2100565080390536583

    BalasHapus
  16. mantab gan ....kunjungi balik ya ..

    BalasHapus
  17. Makasih gan atas infonya :)
    kapan kapan mampir di blog saya http://nandarious.blogspot.com

    BalasHapus
  18. mantab kunjungi blog saya ya
    http://rizkynugraha98.blogspot.com/

    BalasHapus
  19. gan yg dimaksud __BlogID__ itu apa?

    BalasHapus
  20. TOLONGIN ANE SOB? Kagak berhasil nih tips nya sama anee... :(

    BalasHapus

  21. artikel yang sangat berguna nambah lagi ilmu saya,, terima kasih untuk artikel yang bermanfaatnya, salam kenal ijin ditunggu kunjungan baliknya.. terima kasih
    Tips SEO Marketing http://tips-seo-marketing.blogspot.com

    BalasHapus
  22. gan untuk tuyrorial yang , gak faham. soalnya banyak kode kayak gitu, jadi mau di taro dimana
    tolong pencerahaannya

    BalasHapus
  23. mantab gan http://top-wisata.blogspot.com/2013/09/daftar-objek-wisata-di-lampung-lengkap.html

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  24. trimakasih pak de.... saya nyoba berhasil.... kalau ada waktu komen balik ya, hehe.....

    BalasHapus
  25. MANTEPP gan....

    di tunggu kunjungan baliknya.....
    http://agroteknologi-08.blogspot.com/

    BalasHapus
  26. thanks sob, tutorialnya berhasil :D

    BalasHapus
  27. gw gk ketemu kode nyabrow gimana ???????????????????

    BalasHapus
  28. Maksudnya blogID itu gimana ya? URL blog atau apa? Mohon pencerahan. Newbie :)

    BalasHapus