Free Internet Marketing Help

I am sure you have seen blog post that have images with the text to the right or left. Some times the text is slammed up next to the picture and makes it look crammed.

I have below a simple code that you can use to to float the picture right or left, place a colored border line around the picture, place a text message under the image, and place a margin between the image and the article text.

You can use the resource code box to pick up the code and put in your own image link, border color, width….

Border:1px – This is how many pixels wide the border line is. To increase the width of the line replace the ‘1’ with a larger number.

Solid#6C2DC7 – This is the HTML number for the color that you would like your border. You can replace this with any HTML Number to match your image. If you want to you can replace the word Solid with Dotted and that will make the border dotted.

Font-size:80% - This will be the size of the Font placed under the Image. In my example the text is ‘Twitter Mouse Rules’. You can replace the 80% to make your text larger or smaller.

Text-align:center – This will place the text ‘Twitter Mouse Rules’ center under the picture.

Twitter Mouse Rules

Float:right – This is used to place the picture to the Right or Left of the page. This is used so you can have the article text to the side of the image.

Margin:5px – This will be how many pixels between the article text and the border of the picture.

Padding:5px – This is how many pixels wide you would like the space between your picture and the border.

Img src= Here you will need to place the link to your original image.

Alt= Here you will want to put a word/words to describe the image. The SEO advantage of using the ALT tag is argued by many, I say it never hurts to have it!

Twitter Mouse Rules – Replace this with any words or saying that you would like people to see under the picture.

If you want the picture to be clickable and lead to another site or page you can use the code that I have in the below example.
Unless you want to lead them to my Twitter page, replace my twitter link after the href=.

I hope this helps you have the perfect image that looks great with your perfect blog post!

You may also want to see -
Using ColorZilla for Fast HEX Color Codes

Placing a Resource Code Box on Your Blog

Picture Code in HTML

Thanks for stopping in.
Be sure to bookmark this page to share with your friends.
Sheryl Loch