Cara Merubah Tampilan Komentar Blogger
Langkah 1
- Login ke Blogger
- Masuk ke "Rancangan - Edit HTML"
- Cheklist "Expand Template Widget"
Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisHZGsNXTL7BDYlXeZQfjnD5VBvooQDcQIvLStLK0dA7BNJNuNSOwcQCPVD_BRsGvH8PYOA9epYFtUiRMJqi3rS51KfKJb9QoEe74Qg5Z1CfySHBDJhW37KNCUC_RSc_eQC8vyCSuDQps/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/AVvXsEjXXDvYY5wmzPphPKAy_-y71zQmXBQlCAqt2elYJA5cuHLF51soU-OzbUlSxfvsmRhDdGvojJ_F6W_Men9Fw4ZZ9BJuYkvbHaWy7q-9SXMBmFQYXKROvUCrWT33jq-oYmHR0DkCtWUVBIc/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;
}
Langkah 3----------------------------------------------- */
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisHZGsNXTL7BDYlXeZQfjnD5VBvooQDcQIvLStLK0dA7BNJNuNSOwcQCPVD_BRsGvH8PYOA9epYFtUiRMJqi3rS51KfKJb9QoEe74Qg5Z1CfySHBDJhW37KNCUC_RSc_eQC8vyCSuDQps/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/AVvXsEjXXDvYY5wmzPphPKAy_-y71zQmXBQlCAqt2elYJA5cuHLF51soU-OzbUlSxfvsmRhDdGvojJ_F6W_Men9Fw4ZZ9BJuYkvbHaWy7q-9SXMBmFQYXKROvUCrWT33jq-oYmHR0DkCtWUVBIc/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 == "item"'>
<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>
Langkah 4<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>
- Langkah ini merupakan langkah penerapan Emoticon, jika sobat tidak ingin memasang emoticon pada komentar sobat maka hiraukanlah langkah ini.
- Cari kode <h4 id='comment-post-message'><data:postCommentMsg/></h4>
- Dan letakkan kode berikut dibawahnya:
<div style='width:550px;text-align:
center;border: 1px solid #ccc;padding: 2px 2px;margin-top:
15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'>
Yang di Blok Biru merupakan lebar wadah emoticon, jadi sesuaikanlah dengan lebar blog sobat
<b><img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif' width='30'/>:))
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/069.gif' width='30'/>;))
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif' width='30'/>;;)
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif' width='30'/>:D
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif' width='30'/>;)
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif' width='30'/>:p
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif' width='30'/>:((
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif' width='30'/>:)
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif' width='30'/>:(
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif' width='30'/>:X
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif' width='30'/>=((
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif' width='30'/>:-o
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif' width='30'/>:-/
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif' width='30'/>:-*
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/023.gif' width='30'/>:|
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif' width='30'/>8-}
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/037.gif' width='31'/>:)]
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/042.gif' width='30'/>~x(
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif' width='30'/>:-t
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif' width='30'/>b-(
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif' width='30'/>:-L
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif' width='30'/>x(
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif' width='30'/>:-q
<img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/071.gif' width='30'/>=))
</b>
</div>
Lalu cari kode
<b:includable id='comments' var='post'>
Kode yang harus di ganti
Jadi diantara kode ada sebuah kode yang agak relatif panjang dan kode tersebut harus diganti dengan kode dibawah iniKode yang harus di ganti
</b:includable>
<div class='comments' id='comments'>
Hal ini sangat penting, pada langkah 5 cari tulisan __BlogID__ dan ganti tulisan tersebut dengan BlogID sobat
<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/AVvXsEjUAa_KXfYEsqm4sor1FxCuBv8qeBtUbiL_eBuWk1B9c3uNB7qdHc34qv3vghJ5m5cF5VwP_xE2vEZU_3P4ibL3FIMr3BGUxgPgmT_gDc2DpUwcP_ur3yrwsXJ-XO7lleMnu4a0wH3IT8o/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>
Kemudian cari kode seperti dibawah 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 ada 4 kode yang serupa dengan kode di atas, maka dari itu ganti semua kode tersebut dengan kode ini<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:include data='post' name='comments'/>
Langkah TerakhirKlik Simpan Template
Catatan:
Karena ada yang bertanya dan kebingungan pada langkah 5, untuk itu saya coba beri penjelasan kode yang harus dicari dan diganti
<b:includable id='comments' var='post'>
Untuk kode yang saya blok merah merupakan batas menghapus kodenya.
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass'
expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass'
expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass'
expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass'
expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " +
data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<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>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>Ingat !!! Setiap template mungkin beda kode
Semoga bermanfaat, selamat mencoba dan semoga berhasil
0 Komentar
Silahkan Masukkan komentar Anda