Tertarik untuk mengganti threaded comment default blogger diblog anda dengan modifikasi threaded comment colored style ini? Silahkan ikuti langkah-langkah berikut:
Tutorial berikut hanya untuk blog yang telah mengaktifkan sistem threaded comment blogger. Jika anda belum tahu cara mengaktifkan sistem threaded comment diblog anda, silahkan ikuti terlebih dahulu tutorial panduannya disini
Cara menambahkan kode CSS modifikasi threaded comment
- Setelah login ke akun blogger anda
- Pada dasbor klik Template --> edit HTML
- Klikk Ctrl+F dan cari kode ]]></b:skin>
- Tambahkan kode CSS berikut diatas kode ]]></b:skin>
Kode CSS Threaded Comment Menarik Versi 3
#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}
Kode CSS Threaded Comment Keren Versi 4
#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- webkit-border-radius:100px;
-moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}
Demikian tutorial modifikasi threaded comment menarik dan keren versi 3 dan 4 kali ini. Semoga bermanfaat.
ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Memodifikasi Threaded Comments Cantik Dengan CSS. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
