How to draw a border around an image on blogger.com

Problem: You have an picture in your Blogger.com blog post and you want to draw a border around it, or create more space around it.

Solution (short version): style="border: thick solid black; padding: 1px;"

Solution (step-by-step version):

You need to go into the html and play around a little. Here's what you do:

1. Edit your post. Click on HTML (see the pic above) 
because you're going to edit the html




2. Dig through all the html code and find the part 
that relates to your picture. You could search for the file name
of the pic to help you find it.
 The line you're looking for will look something
like what you see above




3. Add the following to that line: 

style="border: thick solid black; padding: 1px;" 

It doesn't matter where you put
it, just look for a blank space and put it there, surrounded
by blank spaces. 


4. Click "Update" and you're done

Notes:

style="border: thick solid black; padding: 1px;"

This will create a thick, solid black line around the image. Play around with it--a thin line is also possible. So is a red line. What other variations would you like to try?

The space (i.e. padding) around the image will be 1px. Would you like more space? Experiment by changing the 1 to a 10 and see what difference it makes. Try other values.

Wanna learn more? Here's the article I got this info from. It's got more information about changing the padding around an image and adding borders in html.   http://stackoverflow.com/questions/570356/how-do-i-add-a-border-to-an-image-in-html

1 comment: