3 Ways to create spacing around pictures
Just modified this tip from the Blogger Answers Section originally posted by Good.ole Danny Boy.There is yet another piece to the puzzle, that will save a great deal of time. Do you know the answer?
Read on to see what I mean:
Q. How can I create space around my pictures?
Option 1) Using Windows Live Writer for Pictures:
Click on the picture. Under Margins, Choose “Custom Margins”, then designate the amount of space you want on each side of the picture. (Note: before designating the margins, it is best to select “Link to URL” and set those parameters.”Option 2) Editing Html
In each post: After creating a post with a picture, Click “Edit HTML “. Look for the picture code.which will look something like: <IMG src="http://somewebsite.com/image.jpg">. Inside the code section add tags to set vertical space (how much space is above and below the image) and horizontal space (left and right) by making it look like: <IMG src="http://somewebsite.com/image.jpg" vspace="10" hspace="10"> where the number represents pixels.However, you will need to do this for each picture in your posts. If you want something less time consuming, try this next option.
Option 3) Using CSS
Log in to Blogger, go to Layout and then Edit HTML. Look for the tag <HEAD> and it's counterpart </HEAD>. Somewhere within these tags, but not interferring with anything else, put in something like this:.myPic {
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
}
This creates a user-defined 'tag' called "myPic", and puts padding (spacing) of 5 pixels all around the object in question. Click “Preview” to make sure the code loads properly, then click “Save” . See notes on editing Html in Blogger here.
Then, when you make a post, Click “Edit HTML” , look for the IMG tag but just make it look like this: <IMG src="website" class="myPic">. Every time you put the class=myPic it will give the image 5px of space all around. If you want a different amount of space, just modify the above.
My response: Great tips!
Is there a way to designate all pictures as “class=.myPic”. Any suggestions?
Suzanne
No comments:
Post a Comment