Welcome!

New Here? Welcome!
Be sure to subscribe to get the latest tips by email.
Scroll down to the topics or use our custom search.
Drop us a comment, and we'll source an answer for you.

Create Space Around Pictures

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:

Get Blogged Tips by eMail

Enter your email address:

Delivered by FeedBurner

Blogged Tips Search

There was an error in this gadget
Related Posts Plugin for WordPress, Blogger...