Membuat Tampilan Komentar Blog Keren

Preview :

1. Buka account blogger sobat

2. Masuk ke dasbor blog sobat

3. Klik Template >> Edit HTML

4. Lalu cari kode ]]></b:skin> dan copykan kode CSS dibawah, diatas kode tadi (biar lebih mudah  dalam pencarian gunakan tombol keyboard ctrl+f pada kotak edit html)

.comments h4 { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background:#333; font-size:14px; padding:6px; border:1px solid #ddd
}
.comments{background:#4C4C4C;color:#FFF}
.comments a:link,.comments a:visited{color:#FFF}
.comments .continue{border-top:1px inset #cccccc}
.comments .comments-content .datetime a{float:right;color:#00f}
.comments .avatar-image-container{margin-left:-4px}
.user a:link{color:#000}
.comments .comment .comment-actions.secondary-text a,.comments .continue a{display:inline-block;white-space:nowrap;padding:0 1.5em;margin:0.5em;font:bold 1em/2em Electrolize,sans-serif;background-color:#ddd;background-image:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#ccc));background-image:-webkit-linear-gradient(top,#eee,#ccc);background-image:-moz-linear-gradient(top,#eee,#ccc);background-image:-ms-linear-gradient(top,#eee,#ccc);background-image:-o-linear-gradient(top,#eee,#ccc);background-image:linear-gradient(top,#eee,#ccc);border:1px solid #777;color:#333;text-shadow:0 1px 0 rgba(255,255,255,.8);-moz-border-radius:.2em;-webkit-border-radius:.2em;border-radius:.2em;-moz-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);-webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3)}
.comments .comment .comment-actions.secondary-text a:hover,.comments .continue a:hover{text-decoration:none;background-color:#eee;background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ddd));background-image:-webkit-linear-gradient(top,#fafafa,#ddd);background-image:-moz-linear-gradient(top,#fafafa,#ddd);background-image:-ms-linear-gradient(top,#fafafa,#ddd);background-image:-o-linear-gradient(top,#fafafa,#ddd);background-image:linear-gradient(top,#fafafa,#ddd)}
.comments .comment .comment-actions.secondary-text a:active,.comments .continue a:active{background-color:#eee;background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ddd));background-image:-webkit-linear-gradient(top,#fafafa,#ddd);background-image:-moz-linear-gradient(top,#fafafa,#ddd);background-image:-ms-linear-gradient(top,#fafafa,#ddd);background-image:-o-linear-gradient(top,#fafafa,#ddd);background-image:linear-gradient(top,#fafafa,#ddd)}
.comments .comment .comment-actions.secondary-text a,.comments .continue a{background-image:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#ccc));background-image:-webkit-linear-gradient(top,#3399FF);background-image:-moz-linear-gradient(top,#3399FF);background-image:-ms-linear-gradient(top,#00f);background-image:-o-linear-gradient(top,#3399FF);background-image:linear-gradient(top,#3399FF);border:1px inset #4169e1;color:#333;text-shadow:0 1px 0 rgba(255,255,255,.8);-moz-border-radius:.2em;-webkit-border-radius:.2em;border-radius:.2em;-moz-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);-webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3)}
.comments .comment .comment-actions.secondary-text a:before,.comments .continue a:before{background:#fff;background:rgba(0,0,0,.1);float:left;width:1em;text-align:center;font-size:1.5em;margin:0 1em 0 -1em;padding:0 .2em;-moz-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);-moz-border-radius:.15em 0 0 .15em;-webkit-border-radius:.15em 0 0 .15em;border-radius:.15em 0 0 .15em;pointer-events:none}
.comments .comment .comment-actions.secondary-text a:before{content:"\279C"}
.comments .continue a:before{content:"\271A"}
#comments-block li,.comments .comments-content .comment-thread ol li,.comments .comments-content .comment:last-child {background:lime url(http://img69.imageshack.us/img69/9308/prebg.png)repeat-y;margin:10px auto 0;margin:10px 0;padding:5px 10px;border:none;box-shadow:1px 1px 4px hsla(0,0%,100%,.5),-2px -2px 5px hsla(0,0%,0%,.5),inset 5px 5px 15px hsla(0,0%,0%,.5);font-family:Electrolize,sans-serif;color:#000;}
.avatar-image-container{background-color:#000;width:100px;height:100px;border:1px solid rgba(255,255,255,0.03);border-top-color:rgba(255,255,255,0.04);border-bottom-color:#4169e1;box-shadow:0 2px 5px rgba(0,0,0,.9);-moz-box-shadow:0 2px 5px rgba(0,0,0,.9);-webkit-box-shadow:0 2px 5px rgba(0,0,0,.9);-webkit-transition:all .15s ease-in-out;-webkit-transform-origin:50% 1px;}
.comments .thread-toggle {
  margin-bottom:10px;}
.comments .comment-thread.inline-thread .comment .comment-block {
  margin-left:52px;}
.comments .comment-thread.inline-thread .comment {
  margin:0px 0px 5px 30%;
  padding:10px 15px;
  color:#111;}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;} .comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;} .comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;} .comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; } .comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; }

5. Karena menggunakan tampilan edit html yang baru, maka sobat tinggal cari kode seperti yang dibawah...
  <b:includable id='comments' var='post'>...</b:includable>
Kemudian gantikan semua kode diatas dengan kode dibawah ini :

<b:includable id='comments' var='post'>  <div class='comments' id='comments'>    <b:if cond='data:post.allowComments'>      <h4>        <b:if cond='data:post.numComments == 1'>          1 <data:commentLabel/> | <a href='#comment-form' rel='nofollow'>add one</a>        <b:else/>          <data:post.numComments/> <data:commentLabelPlural/> | <a href='#comment-form' rel='nofollow'>add one</a>        </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>          &#160;          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>          &#160;          <data:post.commentRangeText/>          &#160;          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>          &#160;          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>        </span>      </b:if><dl id='comments-block'>        <b:loop values='data:post.comments' var='comment'>          <dt class='comment-author' expr:id='data:comment.anchorName'>  <a expr:name='data:comment.anchorName'/>            <b:if cond='data:comment.authorUrl'>              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>            <b:else/>              <data:comment.author/>            </b:if>            <data:commentPostedByMsg/>           </dt>
<b:if cond='data:comment.author == data:post.author'><dd class='owner-Body'><data:comment.body/></dd><b:else/>          <dd class='comment-body'>            <b:if cond='data:comment.isDeleted'>              <span class='deleted-comment'><data:comment.body/></span>            <b:else/>              <data:comment.body/>            </b:if>          </dd></b:if>          <dd class='comment-footer'>            <span class='comment-timestamp'>              <b:if cond='data:post.commentPagingRequired'><a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/></a><b:else/><a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' rel='nofollow' title='comment permalink'><data:comment.timestamp/></a></b:if>              <b:include data='comment' name='commentDeleteIcon'/>            </span>          </dd>        </b:loop>      </dl>        <b:if cond='data:post.embedCommentForm'>          <b:include data='post' name='comment-form'/>        <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 id='backlinks-container'>    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>       <b:if cond='data:post.showBacklinks'>         <b:include data='post' name='backlinks'/>       </b:if>    </div>    </div>  </div></b:includable>

Nah gimana Membuat Tampilan Kotak Komentar Blogspot Blogger Keren | Cara Mudah Modifikasi Komentar Blogspot seperti tutorial di atas sudah jadi belum?? Jika belum bisa bertanya melalui kotak komentar di bawah. Terima kasih sudah berkunjung, semoga postingan kali ini bisa bermanfaat untuk sobat