Modifikasi Threaded Comments Menarik Dan Keren dari BLOGGINGPASURUAN berikut adalah modifikasi threaded comment yang kali ini DIBIKIN SEDIKIT WARNA WARNI, sebab modifikasi ini telah memikat hati saya dan mungkin hal yang sama akan akan anda rasakan sebagai pecinta warna warni design. Ya karena letak dominan modifikasi kali ini pada permainan CSS background color dan CSS bordernya.
Anda
tertarik untuk dengan modifikasi threaded comment colored style ini…? Silahkan
ikuti langkah-langkah berikut:
Note >>> Tutorial ini hanya untuk blog yang telah mengaktifkan sistem threaded comment blogger. Jika anda belum mengaktifkan sistem threaded comment diblog anda, silahkan ikuti terlebih dahulu tutorial panduannya disini
Cara membuat
kode CSS modifikasi threaded comment
>> Login ke akun Blogger anda
>> Kemudian di posisi Dasbor klik Template >>> Edit HTML
>> Kemudian cari kode ]]></b:skin>
>> Tambahkan kode CSS berikut diatas kode
]]></b:skin>
Kode CSS
Threaded Comment PART#1
#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 PART#2
#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 PART#1 dan PART#2 dari
BLOGGINGPASURUAN . Semoga bermanfaat................
Makasih udah saya coba... berhasil... thanks banget
ReplyDeleteMakaxi Gan INFOnya.... ijin praktek :)
ReplyDelete