Hi, you're visiting my blog.
Today I would like to give ya tutorial about How to Beautify Comment Display Box
I hope this post useful for
you. Don't forget to leave your comments and share this article to your social
media. If there are difficulties or errors in this article, please leave any
comments. OK!
.png "Gambar")
· Login Blogger → Template → Edit HTML
.png)
·
Cari
(CTRL+F) kode /*
Comments
·
Delete Coding dibawahnya (source code comment nya aja yaa)
·
Masukkan
Coding Berikut dibawah /*
Comments
-----------------------------------------------
*/
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
text-align:center;
margin: 1.6em 0 .5em;
padding: 4px 5px;
background:#FFFFFF;
font-size: 4x;
color: #FFFFFF;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: #000000;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}
.sidebar .widget-content {
margin: 0 5px;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
line-height: 1.6em;
font-size: 58%;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align:
center;
color: $textColor;
}
#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 35%;
line-height: 1.5em;
text-align: $startSide;
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:url(MASUKKAN URL BACKGROUND);
border-radius: 30px 30px 0px 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:11px;
font-weight:normal;
border:1px solid #848484;
}
#comments-block .comment-body{
margin: 0;
font-size: 12px;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
margin-top: -5px; /*position*/
padding: 5px;
background:url(MASUKKAN URL BACKGROUND);
}
#comments-block .comment-footer{
margin:0;
background:url(MASUKKAN URL BACKGROUND);
font-size: 12px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
border-bottom: 1px solid #848484;
-moz-border-radius-
bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color: #708090 !important;
}
#comments-block .comment-footer a, .comment-body a{
color: #848484 !important;
}
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
text-align:center;
margin: 1.6em 0 .5em;
padding: 4px 5px;
background:#FFFFFF;
font-size: 4x;
color: #FFFFFF;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: #000000;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}
.sidebar .widget-content {
margin: 0 5px;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
line-height: 1.6em;
font-size: 58%;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align:
center;
color: $textColor;
}
#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 35%;
line-height: 1.5em;
text-align: $startSide;
}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:url(MASUKKAN URL BACKGROUND);
border-radius: 30px 30px 0px 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:11px;
font-weight:normal;
border:1px solid #848484;
}
#comments-block .comment-body{
margin: 0;
font-size: 12px;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
margin-top: -5px; /*position*/
padding: 5px;
background:url(MASUKKAN URL BACKGROUND);
}
#comments-block .comment-footer{
margin:0;
background:url(MASUKKAN URL BACKGROUND);
font-size: 12px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #848484;
border-right: 1px solid #848484;
border-bottom: 1px solid #848484;
-moz-border-radius-
bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color: #708090 !important;
}
#comments-block .comment-footer a, .comment-body a{
color: #848484 !important;
}
NOTE: Biru=
link gambar background yang akan dijadikan background comment (misal:
******.jpg) selebihnya silahkan diubah sesuai keinginan (misal: color, font,
opacity, padding, dsb)
Melihat
Code Color, klik disini
·
Sebelum
di Save Template, ada baiknya di Preview Template dulu
yaa :)
Artikel Terkait
Tutorial
- Free Template: Baby Blue
- Free Template: Couple in Pink
- Free Template: Couple in black
- Free Template: Pinky Girl
- Free Template: Green Scrapbook Diary
- Free Template: Shoppaholic
- Free Template: Cycling Couple in Love
- Free Template: Girly Magazine
- Free Template: Woman Talk
- Free Template: My Memories
- Free Template: Happy Day
- Free Template: Couple At Garden
- Free Template: Romantic Dinner
- Free Template: Women's Secret
- Free Template: Work and Stay at Home Mom Blog
- Free Template: Girls Life 2
- Free Template: Girl Gift
- Free Template: Me and My Bear
- Free Template: Cutie Baby
- Free Template: Purple Kitty Store
- Free Template: Shopping Girls Blog Template
- Free Template: Lady Bug
- Free Template: Pinky Fashion Store
- Free Template: Kiddiez Shop Blogger Template
- Free Template: Teen Love Story Blogger Template
Luangin waktumu untuk Share this article with your friends
0 Comments
: 
: 
: 
Twitter Timeline
