Take the time to browse through some blogs and there's no question we love graphics.
We love them in our posts, we love them in our titles, we love them in our comments and personal messages. There are hundreds of sites dedicated to providing us with a literal smorgusborg of graphics to choose from and we're happy to spend as much time needed looking for just the right one.
In this class I'm going to show you how to add graphics to your blog and give you some tips and tricks to help you use them more affectively.
Finding That Perfect Graphic
First lets go find a site. There are plenty to choose from. I prefer to find one that allows me to manipulate the graphic to better suit my taste and how I want it to look. Here are a few I like.
Glitter-Graphic.com
XooSpace.com
Glix.com
JellyMuffin.com
So lets pick a graphic. I'm going to go to Glitter-Graphic.com and I like this one.
glitter-graphics.com
Most graphic sites will give you several HTML codes to choose from. You'll see one that starts with:
[url=http://...
Just highlight the code and hit CNTRL-C to copy it. Go back to your blog and if your posting a true blog post go into the HTML editor and paste the code CNTRL-V.
For adding graphics to blogs you'll primarily use the code.
For my graphic I copied this code
glitter-graphics.com
Notice it started with . These are the graphic link beginning and ending tags. They will always match but the ending tag will have the (/) line in it. Some graphic might have several of these links. Like this one does. If you look half way through you'll notice these / tags repeat and there are two web links that start with ---href=http://LINK.--- The first one is the actual graphic the second one is the link at the bottom of the graphic you'll notice - glitter-graphics.com. By removing this second link I can remove this annoying line. Like this.
Viola the link is gone. This doesn't however remove the ability for a viewer to click on the graphic and visit the site it came from. If you find this does then leave the whole line in and just remove the plain text between these two markers > < as seen here:
glitter-graphics.com
Take the blue part out and you no longer have the words but still have a link to the site via the image itself. Like this.
There are some things like Slide shows you will find have several buttons linking back to their site like "Get your own Slide show". You can easily delete these annoying buttons and clean up your image by looking for these separate links in the HTML code.
Sizing it Up
What you may not know is most graphics provide you with size dimension codes that you can modify. Take the code above and you'll see this graphic size is 221 wide by 193 high. This is in pixels but you don't need to worry about that.
width=221 height=193 border=0>Let's use another graphic to play with. I like this one.
Notice I've already cleaned it up by removing the www.glitter-graphic.com link at the bottom.
This is a great graphic the problem is if I were to post this say as a comment on another page it's far too big and would totally throw off the look and layout of the page. The page owner can't edit these and will most likely have to delete your really sweet message and cute graphic in order to get their page looking normal again. So what do we do? Change the size of course.
** Note changing size works great going smaller but will distort the image if you try to enlarge. I don't recommend it.**
Here's the original code for Alvin and his pals.
width=400 height=285 border=0>glitter-graphics.com
I am going to delete the green to get rid of the link and I'm going to change the size numbers in blue to make it smaller. I'll cut my image in half and see what that does. Now we'll have a code that looks like this.
width=200 height=142 border=0>Hey this did pretty good. This should fit into my comment space just fine and not mess with the overall look of the page.
As long as you're going smaller you should be okay to play around with the size dimensions. Just make sure you're dividing both number equally. Both in 1/2 or 1/3 or 1/4. Use a calculator to get the right numbers and only use whole numbers. For example the original code height was 285. Dividing this in 1/2 was actually 142.5 . As a rule of thumb if the (.) is under 5 round down over 5 round up. 5 go either way. One number isn't going to affect the overall look of the graphic.
Wrap Your Arms Around Me
Well how about just your text.
If you post your graphic code into your text you'll probably get this.
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
The problem is there's all that funky really unsightly white space to the right of the graphic. It always defaults it to the left.
Fear not we can move it around. we can choose where we want it if we use a few more of those strange HTML tags. Here's the code for our graphic right?
width=200 height=142 border=0>If we want to put it right we just put these tags before and after the graphic code
width=200 height=142 border=0>We get this
Notice the little hash (/) in the closing tag. This says "stop centering everything at this point."
This is great and works well if we want to separate text by a large graphic or an embedded video or something. There is another trick that works great for smaller graphics and takes away all the icky white space.
Text Wrapping. Here's the code for wrapping our text around a graphic with the graphic on the left side of the page.
LINK or CODE GOES HERE |
So pasting our new graphic code where it says to paste the LINK or CODE we get this:
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
 |
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
If you want to put the graphic on the RIGHT side just change where it currently says "LEFT" to "RIGHT" and we get this:
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
|
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
If you want to wrap your text around a graphic or two you can always write everything you want to say first then add your TEXT WRAP coding in afterwards. You can insert your code anywhere you like in your text.
Just be careful if you put two graphic close together with very little text between them and say one wraps LEFT and the other wraps RIGHT you could have some funny formatting. If you find everything looks screwy just separate your graphics between larger blocks of text.
You can also stack graphics if you like by adding more than one graphic code between your wrap tags. Like this:
 glitter-graphics.com  |
| |
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
There are two graphics here. The bear and HI. To keep your graphics from lining up next to each other separate each graphic code with the line break tag
This tag is my fav because I can insert a hard line break anywhere I like. If you look at the wrapped text above you see this
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
If you were to look at the HTML code for this you would actually see this:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text v text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
The
works especially well if you want a little buffer space above and below your graphics. You can add as many as you like to make your spacing wider.
---------------------------------------------------
Well I hope this helps you understand how to add graphics and how to manage them the way you like them. If you have any questions don't hesitate to ask.
If any HTML guru's would like to add anything extra please feel free to comment.
Until next time. Happy Blogging!!!
No comments:
Post a Comment