Cara Memodifikasi KOTAK KOMENTAR Blog Dengan CSS

Salam Sobat Blogger, jumpa lagi dan trima kasih mau hadir disini. Kali ini BLOGGINGPASURUAN ingin berbagi tentang cara Membuat Kotak Komentar Blog Keren dengan CSS. Kotak komentar ini di rancang secantik mungkin sekeren mungkin agar tampilannya lebih menarik pengunjung untuk rajin berkomentar di Blog Anda.

Tentunya Anda akan lebih bangga jika Blog Anda tidak sepi komentar, artinya ADMIN selalu disibukkan oleh pengunjung yang ingin segera mendapat jawaban dari Anda.

Catatan penting :

>> Sebelum Anda melakukan perubahan terhadap kode dan script pada template Blog. Sebaiknya Anda backup dulu Template Blog Anda . Ketika anda masuk pada menu TEMPLATE pilih cadangkan/pulihkan pada pojok sebelah kanan atas, kemudian simpan template tersebut.

>> Jika sewaktu waktu Anda gagal dalam peng-EDITan Template, Anda tidak kehilangan TEMPLATE Anda sebelumnya dengan meng-UPLOAD kembali TEMPLATE yang sudah Anda download lewat [ cadangkan/pulihkan ] tadi.

Langsung saja kita bahas Cara Membuat Kotak Komentar Blog Keren dengan CSS :

1. Masuk ke account Blogger Anda

2. Kemudian masuk ke Dasbord

3. Pilik atau klik Template kemudian klik Edit HTML

4. Dan kemudian cari kode ]]></b:skin> dan copykan kode dibawah ini, diatas kode ]]></b:skin>.

CSS

.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. Kemudian cari kode seperti yang dibawah ini

<b:includable id='comments' var='post'>...</b:includable>

Dan 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>   <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><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 + "#" + 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 + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div></b:includable>

6. Save template Anda.

Demikian tips dan tutorial Cara Modifikasi Kotak Komentar Blog Keren dengan CSS, jika ada hal yang kurang di mengerti silahkan tuliskan pada kotak komentar di bawah ini atau klik pada menu kontak saya. Semoga bermanfaat…

Wong Pasuruan

Cara Memodifikasi KOTAK KOMENTAR Blog Dengan CSS

1 comment:

Tutorial		HTML
Widget		CSS
JQuery		IT