Dedia 1996: Cara Merubah tampilan komentar Blogger

Komentar merupakan salah satu interaksi pengunjung terhadap Admin yang biasanya bertujuan untuk menyampaikan; masukan, cacian, sanjungan maupun kebingungan.
Tapi apakan sobat terbersit untuk menghias tampilan komentar di blog sobat?, jika belum mungkin tampilan komentar ini akan menginspirasi sobat untuk modifikasi tampilan komentar tersebut, tidak percaya??? lihat gambar dibawah ini

Nah lo, gimana ada yang berminat? ini masih yang part 1 masih ada part 2, untuk yang part 2 nanti nyusul.

Cara Merubah Tampilan Komentar Blogger

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
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;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat: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;
border-radius: 20px 20px 20px 20px;
}
.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 16px 0 16px;
background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_entry_a {
padding: 16px 16px 0 16px;background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx4uac7f_PP0Sw1jeVQCBqCfLQG6GevS920AURTg_mP0tI9i1dByWNsbtdoE8zJ5Fns8mCs33soDrAqBFbCjQ-oll01BSlD1H0swYM2ZGgWP_HcW_aS16Fs4SG7ZMSZ8k33sjCG8hVFWQ/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
background-color: #F4F4F4;
padding: 5px;

}
.cm_info_a {
margin-bottom: 5px;
padding: 5px;
border-radius: 20px 20px 20px 20px;
}

.cm_name {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;
}
.cm_name_a {
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:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
margin-bottom: 10px;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.cm_entry_a p {
margin-bottom: 10px;
background: url("http://congdongit.com.vn/images/misc/admin.gif") no-repeat right;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.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;
}

Langkah 3
Setelah itu letakkan kode dibawah ini diatas kode </body>

Langkah 4
Lalu cari kode <b:includable id='comments' var='post'>

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

Jadi diantara kode <b:includable id='comments' var='post'> dan </b:includable> ada sebuah kode yang agak relatif panjang dan kode tersebut harus diganti dengan kode dibawah ini

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</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'/>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_head'>
<div class='cm_avatar_a'>
<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:else/>
<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>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_entry_a'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<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>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

<b:else/>
<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<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>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</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>

Nah pada kode diatas sobat wajib mengganti tulisan __BlogID__ dengan ID Blog sobat

Langkah 5
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='comments'/>

Langkah Terakhir
Klik Simpan Template

Sumber : http://koderator.blogspot.com

Minggu, 25 November 2012

Cara Merubah tampilan komentar Blogger

2 komentar:

My Blog

Label