Style Thread Komentar Blogger

Style komentar untuk jenis thread comment ini valid html 5 dan CSS 3, cara membuat style thread komentar blogger valid html 5 kali ini hanya mengandalkan editan CSS untuk merubah suatu tampilan sistem komentar blogger agar memiliki tampilan lebih menarik. Pada postingan kali ini saya kita hanya mengandalkan design CSSnya tanpa merubah code tag html dan script thread commentnya, Jadi sangat cocok untuk halaman blog yang memang sistem thread commentnya belum di rubah atau dapat juga anda pergunakan untuk template responsive. Oke langsung saja menuju TKP dan simak penjelasan tutorial cara memasangnya dibawah ini, sekalian lihat demonya melalui link icon demo dan lihat screenshotnya dibawah ini.

Demo

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Saran saya buat teman teman yang belum mengerti benar HTML silahkan download dulu tag XML Template anda untuk mencegah kesalahan Fatal.
• Saatnya anda mencari code ]]></b:skin> 
• Bila sudah silahkan ketemu cari code yang berurusan dengan #comment .comments, setelah ketemu semua hapus semua code tersebut sebab kita akan menggantikan code CSSnya agar tidak ada error CSS codenya.
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Style Thread Comment Blogger
By : Rivai Silaban | Blog Design
Update : Minggu, 29 September 2013
******************************************/
#comments h4 {
display : inline;
padding : 10px 20px 10px 20px;
line-height : 60px;
}
#comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment {
position : relative;
margin-left:50px;
}
#comments h4, .comments .continue1 a {
background: #0099FF;
}
#comments h4, .comments .user a, .comments .continue1 a {
font-size : 16px;
font-family: Georgia, "Times New Roman", Times, serif;
text-shadow: none;
font-style: italic;
}
#comments h4, .comments .continue1 a {
font-weight: bold;
color : #fff;
}
#comments h4:after {
content : "";
position : absolute;
bottom : -10px;
left : 10px;
border-top : 10px solid #0099FF;
border-right : 20px solid transparent;
width : 0;
height : 0;
line-height : 0;
}
.comments-content {background-color: #ccc;}
.comments .comment-block{
margin-left:0;
position:relative;
}
.comments .comments-content .user a{
margin-bottom:-3px;
color:#0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
font-size: 14px;
}
.comments .comments-content .icon.blog-author{ display:inline-block; float:left; margin:0px 70px 10px -10px;}
.comments .comments-content .icon.blog-author:before{ content:"Admin"; line-height:20px; position:absolute; top:5px; text-align:center; font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #990000;
font-style: italic;
font-weight: bold;
text-shadow: 2px 1px 1px #999;}
.comments .comments-content .datetime{
font-size:10px;
line-height:10px;
display:block;
margin:-5px 10px 0 0;
}
.comments .comments-content .datetime a, .comments .comments-content .datetime a:hover{ color:#999; text-decoration:none}
.comments .avatar-image-container{
padding-left:0;
margin:5px 10px 5px 15px;
max-height:48px;
width:48px;
float:LEFT;
z-index:9;
}
.comments .avatar-image-container img{
max-width:44px;
width:44px;
border-radius:5px 5px 5px 0;
border:1px #000 ;
display:block;
}
.comments .comments-content .comment, .comments .avatar-image-container{ padding:4px;}
.comments .comments-content{ margin-bottom:10px}
.comments .comments-content .comment{margin:0 5px 0 40px}
.comments .comments-content .comment-content{padding:30px 10px 50px 10px;
margin:15px 0 -18px -25px;
position:relative;
background-color:#C1F2FF;
color:#333;
height:auto;
border-radius:3px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
box-shadow: 0 0 2px #000;
border:solid #000000 1px;line-height:1.2em; }
.comments .comments-content .comment-content:before{
content:"";
width:0;
height:0;
position:absolute;
bottom:100%;
left:20px;
border-width:0 0 22px 22px;
border-style:solid;
border-color:transparent transparent #C1F2FF transparent;
}
.comments .comment .comment-actions a{
position:relative;
background-color:#000099;
color:#ebebeb;
margin:0 10px 0 -7px;
border-radius:3px 3px 0 0;
}
.comments .comment .comment-actions a, .comments .continue a{
font:bold 12px Arial,Helvetica,sans-serif;
padding:3px 10px;
text-align:center;
}
.comments .continue{
cursor:pointer;
display:none;
margin:0 10px 0 0;
background:#333;
width:50px;
float:right;
height:20px;
color:#fff;
border-radius:0 0 3px 3px;
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover{ color:black; text-decoration:none}
.comments .comments-content .comment-thread{ margin:0; background-color:#FFF;}
.comments .comments-content .comment-replies{ margin-left:0; margin-top:0}
.comments .comments-content .comment-header{ position:relative; min-height:37px; line-height:37px; padding-left:10px}
.comments .thread-toggle{ cursor:pointer; display:none}
/* CSS End */

Bila anda ingin mengganti warna sesuai dengan tampilan halaman blog anda silahkan edit CSSnya.