Cara Modifikasi Kotak Komentar Blog I

Tutorial Blog Pemula

Rabu, 11 Juli 2012

2 Komentar

Sebagai salah satu properti blog, kotak komentar memang selalu istimewa, sehingga wajar sekali jika banyak teman- teman blogger yang hobi otak atik kotak komentar blog. Ada banyak cara untuk melakukan modifikasi kotak komentar blog ini, ada yang merubahnya dengan membuat kotak komentar author blog berbeda dengan pengunjung, menambahkan fungsi reply pada blog atau kotak komentar sederhana seperti yang dilakukan oleh Tutorial Blog Pemula di bawah ini.

Bagaimana cara membuat kotak komentar unik seperti ini??

Nah buat teman- teman, silakan mencobanya ya dengan mengikuti langkah- langkah yang disediakan. Sebelumnya silakan lakukan backup template terlebih dahulu untuk menghindari hal- hal yang tak diinginkan dan kalau saja tips ini tidak sesuai dengan template bawaan sobat.

1.       Login ke akun blogger sobat

2.       Pilih Layout > Edit HTML > Centang Expand Template Widget

3.       Cari kode dibawah ini ( CTRL+F ) :

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

4.       Hapus kode di atas kemudian ganti dengan kode di bawah ini :

#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}

#bg_commentblock {
width: 548px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}

#commentblock {
width: 510px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMifoj_dsezqVPraznr3n9-ZcWk40vMufMlmd4HUeerDA9MHmh1FMK4A3isrJGp7m3ers0et4H64u9eSoEyXFo-pLgmEfL0DJuJxjJNeVjU1ZbKlkLzEpwlhLlngytVVklUAhiPuj0Uyk/s1600/commentgray.gif.png) no-repeat top left;
}
.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMifoj_dsezqVPraznr3n9-ZcWk40vMufMlmd4HUeerDA9MHmh1FMK4A3isrJGp7m3ers0et4H64u9eSoEyXFo-pLgmEfL0DJuJxjJNeVjU1ZbKlkLzEpwlhLlngytVVklUAhiPuj0Uyk/s1600/commentgray.gif.png) no-repeat top left;
}

5.       Scroll ke bagian bawah, cari kode sebagai berikut :

<br /> <b:includable id='comments' var='post'> <br /> <div class='comments' id='comments'><a name='comments'/> <br /> <b:if cond='data:post.allowComments'> <br /> <h4><b:if cond='data:post.numComments == 1'> <br /> 1<data:commentLabel/>:<b:else/><br /> <data:post.numComments/> <data:commentLabelPlural/>:<br /> </b:if></h4><br /> <b:if cond='data:post.commentPagingRequired'><br /> <span class='paging-control-container'><br /> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a><br />  <br /> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a><br />  <br /> <data:post.commentRangeText/><br />  <br /> <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a><br />  <br /> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a><br /> </span></b:if><br /> <br /> <dl id='comments-block'><b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'><br /> <a expr:name='data:comment.anchorName'/><br /> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br /> <data:comment.author/></b:if><br /> <data:commentPostedByMsg/></dt> <dd class='comment-body'> <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><b:if cond='data:post.commentPagingRequired'><br /> <span class='paging-control-container'><br /> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><br /> <data:post.oldestLinkText/></a><br /> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><br /> <data:post.olderLinkText/></a><br />  <br /> <data:post.commentRangeText/><br />  <br /> <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><br /> <data:post.newerLinkText/></a><br /> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><br /> <data:post.newestLinkText/></a><br /> </span></b:if><br /> <br /> <p class='comment-footer'><b:if cond='data:post.embedCommentForm'><br /> <b:include data='post' name='comment-form'/><b:else/><br /> <b:if cond='data:post.allowComments'><br /> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /> </b:if></b:if></p></b:if><br />

6.      Hapus kode tersebut, kemudian ganti dengan kode di bawah ini :

<b:includable id='comments' var='post'><br /> <br /> <div class='comments' id='comments'><a name='comments'/><br /> <b:if cond='data:post.allowComments'><br /> <br /> <div id='bg_commentblock'><br /> <h4><br /> Komentar :<br /> <br /> </h4><br /> <div id='commentblock'><!--commentblock--><br /> <br /> <strong>ada</strong> <b:if cond='data:post.numComments == 1'>1<br /> <b:else/><br /> <strong><data:post.numComments/> <data:commentLabelPlural/> ke “<data:post.title/>”</strong><br /> </b:if><br /> <br /> <dl class='commentlist'><b:loop values='data:post.comments' var='comment'> <span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'><br /> <a expr:name='data:comment.anchorName'/><br /> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br /> <data:comment.author/><br /> </b:if><br /> <data:commentPostedByMsg/><br /> </dt>pada hari <dd class='comment-footer' style='display:inline; margin:0px'> <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></span> <dd class='commenttext'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p></b:if> </dd> </b:loop> </dl><b:if cond='data:post.commentPagingRequired'><br /> <span class='paging-control-container'><br /> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><br /> <data:post.oldestLinkText/><br /> </a><br /> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><br /> <data:post.olderLinkText/><br /> </a><br />  <br /> <data:post.commentRangeText/><br />  <br /> <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><br /> <data:post.newerLinkText/><br /> </a><br /> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><br /> <data:post.newestLinkText/><br /> </a><br /> </span><br /> </b:if><br /> <br /> <p class='comment-footer'><br /> <b:if cond='data:post.embedCommentForm'><br /> <br /> <b:include data='post' name='comment-form'/><br /> <br /> <b:else/><br /> <br /> <b:if cond='data:post.allowComments'><br /> <br /> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /> <br /> </b:if><br /> <br /> </b:if><br /> <br /> </p></div><!--end commentblock--><br /> <br /> </div></b:if><br />

7.       Save template dan lihat perubahannya.

Hal yang perlu diingat, setiap template memilliki spesifikasi  yang berbeda- beda sehingga jika terdapat perbedaan kode yang dicari, silakan cari kode yang hamper mirip sehingga tidak terlalu bingung. Selain itu, sobat juga bisa berkreasi dengan merubah lebar atau width, bermain warna dengan melihat kode warna, dsb.

Demikian postingan Cara Modifikasi Kotak Komentar Blog I. semoga bermanfaat sobat J