Tutorial: Customize Comment Box 4

PENGGUNA SIMPLE TEMPLATE DAN DENIM TEMPLATE SAHAJA

• Dashboard > Template > Edit HTML 
• CTRL+F search kod /* Comments
• Delete semua kod di bawah kod /* Comments 
• Copy kod di bawah:

.comments h4 {
color: #29324f;
text-align: center;
font: normal normal 14px 'oswald', times new roman, serif;
letter-spacing: 2px;
text-transform: uppercase;
padding: 4px;
border-bottom: 1px solid #ddd;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
.comment-block {
border-top: 1px solid #ddd;
padding: 2px;
}
.comment-content{
font:normal 12px Arial;
padding: 4px;
}
.comment-header{
font: 13px calibri;
letter-spacing: 1px;
text-transform: uppercase;
padding:5px;
}
.avatar-image-container{float:left;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;background:#ddd;padding:5px;}

.avatar-image-container img{
border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

.avatar-image-container img:hover{
border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom-left-radius: 8px;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}

.datetime{display:none;}

.comments .comment .comment-actions a {
  background:#999;
  color:#fff;
  padding:2px 5px;
  margin-right:10px;
  font:10px sans-serif;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  transition:.2s linear;
  -moz-transition:.2s linear;
  -webkit-transition:.2s linear;
}
.comments .comment .comment-actions a:hover {
  background:#000;
  text-decoration:none;
  transition:.2s linear;
  -moz-transition:.2s linear;
  -webkit-transition:.2s linear;
}
.deleted-comment {
font-style:italic;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

• Boleh ubah kod yang Adam merahkan mengikut citarasa warna masing-masing
• Preview dan save
• Kemudian, pergi ke bahagian setting di sebelah kiri > post and comments 
• Comments > Pilih Embed

Done.

Tutorial: Customize Comment Box 3

PENGGUNA SIMPLE TEMPLATE DAN DENIM TEMPLATE SAHAJA

• Dashboard > Template > Edit HTML 
• CTRL+F search kod /* Comments
• Delete semua kod di bawah kod /* Comments 
• Copy kod di bawah:

.comments h4 {
color:#333;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 4px;
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
line-height:18px;
text-align: center;
border-top: 5px double #ddd;
border-bottom: 1px solid #ddd;
}

@font-face {
font-family: 'Short Stack';
font-style: normal;
font-weight: 400;
src: local('Short Stack'), local('ShortStack'), url(http://themes.googleusercontent.com/static/fonts/shortstack/v4/6Lbgh4PDdLpSiP41rQoGa4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

.comment-content{
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
padding: 4px;
border-bottom: 1px solid #f0f0f0;
}
.avatar-image-container{background:#ddd;padding:5px;border-radius:50%;}
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}
.datetime{
background:#eee;
padding:4px;
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
float:right;
margin-top:10px;
}
.secondary-text{
background:#eee;
padding:4px;
font-weight: normal;
font-family: Short Stack;
font-size: 11px;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

• Boleh ubah kod yang Adam merahkan mengikut citarasa warna masing-masing
• Preview dan save
• Kemudian, pergi ke bahagian setting di sebelah kiri > post and comments 
• Comments > Pilih Embed

Done.

Tutorial: Customize Comment Box 2

PENGGUNA SIMPLE TEMPLATE DAN DENIM TEMPLATE SAHAJA

• Dashboard > Template > Edit HTML 
• CTRL+F search kod /* Comments
• Delete semua kod di bawah kod /* Comments 
• Copy kod di bawah:

.comment-content{
background:none;
padding:8px;
font-size: 13px;
font-family:Imprima;
color:#000;
}

.comments h4 {
padding:10px;
margin:0 0 15px;
border-bottom:1px solid #eee;
text-transform: uppercase;
text-align: center;
font:11px calibri;
}
.comment-block{
background:none;
}
.avatar-image-container{background:#E6E2D5;padding:5px;border-radius:50%;}

.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}
.comment-header{
margin-left: -40px;
background:url(http://25.media.tumblr.com/tumblr_ls0w5txuft1r3vazto2_250.png);
padding: 4px;
border-radius: 5px;
font: 11px calibri;
text-transform: uppercase;
color: black;
}
.datetime{
display:none;
background:#fff;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:10px;}
.secondary-text{
padding:3px;
border: 1px solid #ddd;
border-radius: 3px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
color: black;
font: 12px imprima;
text-transform: uppercase;
float:right,top;
}
.secondary-text:hover{
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
font: 10px arial;
color: white;
float: left;
}
#blog-pager-older-link {
font: 10px arial;
color: white;
float: right;
}
#blog-pager {
padding: 4px;
text-align: center;
}

• Boleh ubah teks yang Adam merahkan mengikut citarasa masing-masing
• Preview dan save
• Kemudian, pergi ke bahagian setting di sebelah kiri > post and comments 
• Comments > Pilih Embed

Done.

Tutorial: Customize Comment Box 1

PENGGUNA SIMPLE TEMPLATE DAN DENIM TEMPLATE SAHAJA

• Dashboard > Template > Edit HTML 
• CTRL+F search kod /* Comments
• Delete semua kod di bawah kod /* Comments 
• Copy kod di bawah:

	.comments h4 {
	padding:9px 3px 10px;
	margin:0 0 15px;
	letter-spacing:1px;
	border-bottom:1px solid #eee;
	text-transform: uppercase;
	text-align: center;
	font: 11px calibri;
	}
	.comments .comments-content .loadmore a {
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	}
	.comments .comment-thread.inline-thread {
	background-color: transparent;
	}
	.post ol {
	counter-reset: countcomments;
	}
	.comment-thread li:before {
	display:none;
	content: counter(countcomments,decimal);
	counter-increment: countcomments;
	float: right;border:2px solid #ddd;
	z-index: 2;
	position:relative;
	font: 11px calibri;border-radius:50%;
	text-transform: uppercase;
	color: #333333;
	padding-left:8px;
	padding-top:3px;
	background:#fff;
	margin-top:7px;
	margin-left:10px;
	width: 25px; /*image-width size*/
	height: 25px; /*image-height size*/
	}
	.comment-block{
	background:#FCEFDC;
	padding:5px;
	border:1px solid #fff;
	margin-left:65px;position:relative;
	}
	.comment-header{
	font:11px calibri;
	text-transform: uppercase;
	background-color:#FFFFFF;
	border:1px solid #ddd;padding:5px;
	}
	.comments .comments-content .owner-actions{position:absolute;right:0;top:0;}
	.comments .comments-replybox{border:none;height:230px;width:100%}
	.comments .comment-replybox-thread{
	margin-top:0;
	}
	.comments .comments-content .datetime a{
	color:#555555;font:11px calibri;text-transform: uppercase;float:right;text-decoration:none;
	}
	.comment-content{
	font: 12px Calibri;
	background:#fbfbfb;
	padding:8px;
	border: 1px solid #f2f2f2;
	color:#333;
	}
	.avatar-image-container{background:#E7D8BF;padding:5px;
	}
	.avatar-image-container img{
	-webkit-transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
	transition: all 0.8s ease-out;
	}
	.avatar-image-container img:hover{
	transform: rotate(360deg) ;
	-webkit-transform: rotate(360deg) ;
	-moz-transform: rotate(360deg) ;
	-o-transform: rotate(360deg) ;
	-ms-transform: rotate(360deg) ;}
	.feed-links {
	clear: both;
	line-height: 2.5em;
	}
	.deleted-comment {
	font-style:italic;
	color:gray;
	}
	.feed-links {
	clear: both;
	line-height: 2.5em;
	}
	#blog-pager-newer-link {
	font: 12px calibri;
	color: black;
	float: left;
	}
	#blog-pager-older-link {
	font: 12px calibri;
	color: black;
	float: right;
	}
	#blog-pager {
	text-align: center;
	}

• Boleh ubah kod yang Adam merahkan mengikut citarasa warna masing-masing
• Preview dan save
• Kemudian, pergi ke bahagian setting di sebelah kiri > post and comments 
• Comments > Pilih Embed

Done.