Tricks to Create Profile Photo Frame

Blogger that like show profile and install the image there, I think this is a tutorial to try. Namely to provide a frame on the image profile, so that it can be seen more beautiful eyes. hmm, how to make it very easy, follow these steps.

To have a profile photo frames, step one is very simple, the only change the value sobat border on stylee css sheet on the photo for the profile, the code example for a profile photo template long like this:

.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}

For new template like this.

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor; }


You need to do is change the border into a larger, more clearly so, then I will describe in more detail.

float: left; -> means the photo will be saved in any posts on the left profile.

padding:4px; --> padding means is the distance between the image of the border 4px. If you do not want it, change into 0px.

border:1px solid #ddd; --> The purpose of this border is the size of the border. If you want to display more border width, you only need to change the number 1px with greater value. While the code #DDD is gray from the border. You can change color with the other.


Still confused how to change? please follow these steps!

For a classic template:

1. Sig in the blogger
2. Click the Template
3. Click the Edit HTML
4. Copy the entire code templates that have ago on the notepad and paste save. This data backup for when the error occurred editting
5. Find a code similar to the code below:



. profile-img img (
float: left;
padding: 4px;
border: 1px solid # DDD;
margin: 0 8px 3px 0;
)

6. Change the value of the border with greater value, 8px the example, so that the code will be like this:



. profile-img img (
float: left;
padding: 4px;
border: 8px solid # DDD;
margin: 0 8px 3px 0;
)

7. Click the Preview button to see the results change
8. If you are OK, click the Save Changes Template
9. Done.



While in the new template, the code will be similar like this.

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}

Change the value of the border with greater value, 4px example, so that the code will be like this:


.profile-img img {
float:left;
padding:4px;
border:4px solid $bordercolor;
margin:0 8px 3px 0;
}

Preview the results, if the suit store the template.