Cara Merubah Tampilan Komentar Pada Blog Agar Terlihat Keren

Hampir pusing nih mikiran artikel apa lagi yang saya akan buat kali ini, karena sudah hampir 5 hari ana gak sempat posting-posting nih hufft, bisa-bisa pengunjung setia blog Juned al~Bughisy pada kabur nih gara-gara tidak ada artikel segar untuk dibaca lagi.

Jadi pada kesempatan kali ini saya akan berusaha untuk membuat sebuah artikel yang kiranya dapat bermanfaat bagi sobat, terutama sobat blogger.

Pada postingan kali ini saya memberi judul Cara Merubah Tampilan Komentar Pada Blog Agar Terlihat Keren. Jadi yang saya akan share ke sobat ialah tentang bagaimana untuk merubah tampilan komentar pada blog sobat agar berbeda dengan tampilan standart yang diberikan oleh pihak blogger maupun penyedia template yang sobat gunakan saat ini.

Untuk mengubah tampilan komentar pada blog sobat ikuti langkah-langkah di bawah ini.

1. Login ke blogger 
2. Pilih Template » Edit Html » Lanjutkan.
3. Cari code di bawah ini. Tekan ctrl+F untuk mempermudah pencarian. <b:includable id='threaded_comment_css'>

4. Dan di bawah code di atas ada code di bawah ini.
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
overflow: auto;
}
bla bla bla bla bla... panjang ke bawah
sampai kode </style>

5. Hapus code di atas yaitu code yang berada di bawah code <b:includable id='threaded_comment_css'> kemudian ganti dengan code di bawah ini.
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
overflow: auto;
}
.comments .comment .comment-actions a {
float: right;
display: inline-block;
margin: 5px 0 0 5px;
padding: 1px 6px;
border: 1px solid;
color: black !important;
text-align: center;
text-decoration: none;
background: #DD0;
font: 11px/18px sans-serif;
border-color: transparent black black black;
}
.item-control {
display: inline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom: 16px;
padding-bottom: 8px;
}
.comments .comments-content .comment:first-child {
padding-top: 16px;
}
.comments .comments-content .comment:last-child {
padding-bottom: 0;
}
.comments .comments-content .comment-body {
position: relative;
}
.comments .comments-content .user {
font-size: 14px;
color: #666666 !important;
text-decoration: none;
}
/* Style Komentar Author */
.comments .comments-content .icon.blog-author {
display: inline-block;
margin: 0 0 -4px 6px;
position: absolute;
top: 0;
right: 0;
background-color: #39A;
width: 100%;
height: 100%;
z-index: -1;
}
/* AKhir style Komentar Author */
.comments .comments-content .datetime {
font-size: 10px;
color: #999;
text-decoration: none;
}
.comments .comments-content .datetime a {
float: right;
}
.comments .comments-content .comment-header {
margin: 0 0 8px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
background-color: rgba(223, 240, 250,0.3);
padding: 5px;
}
.comments .comments-content .comment-content {
margin: 0 0 8px;
padding: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
background-color: rgba(244, 244, 244,0.5);
line-height: 21px;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 1.5;
}
.comments .comments-content .owner-actions {
position: absolute;
right: 0;
top: 0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
border: 1px solid #666;
color: #424242 !important;
text-align: center;
text-decoration: none;
display: inline-block;
font: normal 11px/18px sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(196,191,39);
background: -webkit-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -moz-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -o-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -ms-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4bf27', endColorstr='#ede980',GradientType=0 );
}
.comments .continue a {
display: block;
color: black;
padding: 2px 5px;
}
.comments .continue a:hover {
text-decoration: none !important;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));
background: -webkit-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -o-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -ms-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=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 .thread-expanded .thread-arrow {
background: url("data: image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data: image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
padding: 0;
margin-left: 10px;
margin-top: 2px;
}
.comments .avatar-image-container img {
width: 36px;
}
img[src$="http://img1.blogblog.com/img/anon36.png"] {
display: none;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 5px;
background: #68F;
border: 1px solid #E4E4E4;
z-index: 99;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
6. Dan yang terakhir simpan template. Kemudian lihat hasilnya.

Bagaimana sobat, keren kan tutorial kali ini?? Semoga blog sobat terlihat semakin keren dan gagah dengan tampilan komentar yang keren setelah menggunakan tutorial di atas hehehe.

Selamat mencoba dan Happy Blogging.