Membuat Tampilan Komentar Blog Keren:
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 :
Membuat Tampilan Komentar Blog Keren | Membuat Tampilan Kotak Komentar Blogspot Blogger Keren | Cara Mudah Modifikasi Komentar Blogspot - Cukup lama setelah beberapa minggu vakum tapi alhamdulillah bisa mulai posting lagi. Tinggal menunggu hasil ujiannya, semoga nilainya baik lah. Nah untuk postingan kali ini saya cuman mau berbagi share saja untuk membuat, memodifikasi kotak komentar yang lumayan baik. Sobat bisa lihat preview tampilan komentar yang akan dibahas sebelum menerapkannya, itupun jika berminat. Tampilan komentar yang dibahas ini sebenarnya adalah komentar dari blog ini sebelum komentar berganti ke disqus.
Karena mengingat kemarin ada pengunjung yang mengusulkan untuk membuat post tutorial komentar seperti ini. Barangkali bisa bermanfaat juga. Nah untuk yang ingin menerapkannya silahkan ikuti tutorial singkat di bawah. Namun sebelum menerapkan ini, sobat saya anjurkan untuk memasang thread comment (komentar berbalas) terlebih dahulu agar cara ini bisa berhasil di blog sobat.
Karena mengingat kemarin ada pengunjung yang mengusulkan untuk membuat post tutorial komentar seperti ini. Barangkali bisa bermanfaat juga. Nah untuk yang ingin menerapkannya silahkan ikuti tutorial singkat di bawah. Namun sebelum menerapkan ini, sobat saya anjurkan untuk memasang thread comment (komentar berbalas) terlebih dahulu agar cara ini bisa berhasil di blog sobat.
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%; }
<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>   <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>
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.
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 komentar:
Posting Komentar