Photo Tutorial

I promised you a tutorial on Monday on how to get the photos you post to have this border and shadow (not visible in Internet Explorer, but definitely in Chrome, Safari, and Firefox):

(Don't hate me because I'm beautiful...)

Anyway, this is so easy that I felt I had to share!  I was editing each of my photos to have a shadow before I uploaded, but it is so much easier now!

Step 1:

Go to the "Design" tab in blogger:

Click on "Edit HTML"

Step 2:

Scroll down under "Edit Template" and find ".post img" (most browsers allow you to press Ctrl + F or Command + F to find the specific wording).

Step 3:

Enter this text between the { and } after ".post img":

-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;

background: white;

border: 1px solid #CCC;

border-bottom-left-radius: 5px;

border-bottom-right-radius: 5px;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

padding: 8px;

Example:

Step 4:
Click "Save Template" and you're finished!

Variables:

• To change the sharpness/dullness of the corners, edit the numbers under: "border-bottom-left-radius," "border-bottom-right-radius," "border-top-left-radius," and ""border-top-right-radius."  Right now, the radius is at 5px, but if you make it 10px, the corners will be more rounded, and that continues as the number grows.
• To change the white space between your image and the border/shadow, change the number under "padding."
• To change the shadow size, change the number after "-webkit-box-shadow"that is currently "20px"

Warning!

• Do not change, delete, or move any of the colons or semicolons!
• Do not seperate numbers from the "px" with a space!

If you have questions, leave them in your comment and I will email you back!
Enjoy!