Monday 2 September 2013

Put number on every comments...


Assalamualaikum and hola people...^^, I'm back with a new tutors...nampak tak blog saya dah berubah? sebenarnya banyak lagi benda yang saya nak tambah...sekarang saya dah tak guna denim...saya guna template watermark pulak...

Ok today tutorial is about number on every comment (counted comments) I think it's only work on template designer only...

Image preview

The instructions :
  1. Blogger.com/home --> Template --> Edit HTML
  2. Search below code using F3 or CTRL+F...
/* Comments
----------------------------------------------- */ 
Or search  .post{  if above code not exist...
Then, copy below code...

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;border:2px solid #FEE8E8;
z-index: 2;
position:relative;
font-size: 14px;border-radius:30px;
color: #333333;
padding-left:8px;
padding-top:3px;
background:#FFFFFF;
margin-top:7px;
margin-left:10px;
width: 23px; /*image-width size*/
height: 23px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 13px;
color: #666666;
}

And then paste the code after...

/* Comments
----------------------------------------------- */    or   .post{

The notes :
Blue text : Color of the circle border
Red text : Color of the number
Fuchsia text : Background of the circle

Then, preview and save...

Nak tengok live previewnya tak? trylah comments pada post nie...^^, good luck...Assalaualaikum...

2 comments: