Eiman Hazdy's Blog: Tutorial 01 : How to Make Rounded Avatars for Blogger Comments

Here is my very first post of tutorial. Eiman decided nak buat tutorial macam ni since ada orang gatal tangan sentuh my laptop which Eiman masih dalam process pembikinan HTML untuk blog template ni. Then, all the works yang Eiman tengah siapkan terpadam macam itu saja. Tanpa SAVE that file kat mana-mana. Eiman punyalah bersusah payah study balik HTML and CSS code untuk design template yang baru ni. And in a second it is gone. Erghhh...

So, kalau ada sesiapa perasan Eiman ada temporary block my blog. Eiman rasa the best way is to share with you guys despite boleh juga Eiman ada another backup. *sharing is caring right? Eiman akan buat tutorial ni dalam bentuk World Global *in English

---intermission---

Rounded Avatars for Blogger Comments

Steps to Make Rounded Avatars

1. You should backup your template by going to Dashboard > Template > Backup/Restore > Download Full Template.

2. Then go to Dashboard > Template > Edit HTML.

3. Expand the <b:skin> by clicking the black arrow on the left. *if it is already expanded move to step 4

4. Search for the ]]></b:skin> in your HTML. Copy & Paste the following code above/before it.

/* Rounded Avatars Comments

----------------------------------------------- */

.comments .avatar-image-container{

max-height:50px;

max-width:50px;

height:50px;

width:50px;

border-radius:29px;

padding:2px;

border:2px solid #666666;

box-shadow:-1px -1px 1px #444,2px 2px 4px #444;

background:#ffffff;

margin:2px 4px 2px 2px;

}

.comments .avatar-image-container img{

width:50px;

max-width:50px;

height:50px;

max-height:50px;

border-radius:25px;

border:0 solid #FE081C !important;

}

.comments .comment-block{

margin-left:75px;

}

5. Now save the template and you are all done.

Customization

1. Border-radius : Responsible for the curve of the borderline (right, left, top & bottom). 29px means overall the curve would be.

2. Border : Responsible for the borderline. 2px means the thickness of the border. Solid means the line of the border. #666666 means the color of the border.

3. Box-shadow : Responsible for the shadow at the back. If you are not familiar with this CSS code just leave as it be. #444444 means the color of the shadow.

4. Background : Responsible for the background behind the image. #ffffff means the color of the background.