Pada postingan kali ini saya akan share cara membuat Bubbles Threaded Comments di blog agan mungkin Bubbles Threaded Comments ini bisa menjadi pilihan jika agan bosan dengan tampilan komentar blog agan yang masih standar untuk menerapkannya diblog agan silahkan ikuti langkah dibawah ini...
Masuk blog agan terlebih dahulu
pilih menu template
kemudian gunakan ctrl + f dan segera temukan kode ]]></b:skin>
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>
/* Start Comment Style Code http://pengembarabiru.blogspot.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:arial;line-height:15px;font-size:14px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#ADE8E6;border:1px solid #fff;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user a{color:#0E6284;font-family:coda;font-size:16px }
.comments .comments-content .icon.blog-author { border-color : transparent #990000 transparent transparent;border-style : solid;border-width: 10px; display:block;width : 0;bottom:0;right:0;height : 0;position : relative;float:right;top:0}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#ECF3F7;border-bottom:1px solid #ccc;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .avatar-image-container{float:left; overflow:hidden; border:#fff solid 1px; padding:4px;box-shadow:1px 1px 5px rgba(1, 1, 1, 0.1);background:#f5f5f5;}
.comments .avatar-image-container img{width:48px}
.comments .comment-block{background:#f5f5f5;padding:0; margin-left:48px; border:#fff solid 1px;box-shadow:1px 1px 5px rgba(1, 1, 1, 0.1);}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* End Comment Style Code http://pengembarabiru.blogspot.com */
Jika sudah silahkan simpan template agan dan lihat hasilnya..
selamat mencoba semoga bermanfaat...
0 comments:
Post a Comment