Oct 8, 2004 4:12am

How do I put borders around my images?

When you photoblog an image you get some code like this:



The chunk of code highlighted in red specifies the image that you want to show, where it is located, what size it should be displayed at, and whether it should have a border or not.

Note that not all images you photoblog will have this bit of code in place.

Where it exists, you can change it to, for example, border=3 to add a big border - =1 is a small border, =3 is a bigger one:

<a href="http://www.stumbleupon.com/"><img border=3 width=100 height=100 src="http://www.stumbleupon.com/images/smalllogo2.jpg"></a>



Or, if there is a border around the image that you don't want you can simply change - or add the border=0 code to remove the border - note: that if you there is no border= code in place, the default is that you will get one!!

<a href="http://www.stumbleupon.com/"><img border=0 width=100 height=100 src="http://www.stumbleupon.com/images/smalllogo2.jpg"></a>




A final note: the color of the image borders in your stumble comments change according to the color scheme you choose for your blog - try it and see!

Note that you *cannot* change the colour of the border. This is dictated by your chosen Profile Theme - you can only choose to allow it, or remove it!

Oct 8, 2004 2:30am

How do you arrange your images vertically or horizontally? (part1)

Once you have worked out how to use the photoblog facility to capture more than one image into your blog comments, you might wonder how you can arrange the images better. Perhaps you want them arranged vertically? Or just want a space in between each image?

The spacing thing first:

When you copy and paste the code from one photoblog and add it to the next, you just join the two bits of code together. It should look like this:

<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>|<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>

Note that the red line is added here to show you where the "join" is.

If you want to put s o m e s p a c e in between your images (whether spaced vertically or horizontally) this is the magic bit of code you need: &nbsp;

Simply insert this code - or multiple occurrences of it - where you want some space between images, like this:

<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>&nbsp;<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>

Here's what you get:



Try it, doesn't work? delete it!

Oct 7, 2004 1:48pm

How do you arrange your images vertically or horizontally? (part2)

The vertical thing:

As with the spacing example, you should have two bits of photoblog code, joined together like this:

<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>|<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>

As before, the red line shows the join.

This time, instead of adding the code for a space &nbsp;, you need some code that will add the second image below the first. The HTML code you need here is
, like this:

<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>
<a href="http://help.group.stumbleupon.com/forum/3471"><img border=0 width=57 height=57 src="http://www.stumbleupon.com/images/smalllogo.gif"></a>

Here's what you get:




You can, if you wish, add a space as well. And as always, if you don't like the results, delete it and try again!

Oct 7, 2004 11:20am

How do you photoblog more than one image?

You can use the photoblog facility that Stumbleupon provides to put images onto your pages with ease, but what if you want to put more than one picture into the same blog comment?

Try this:

First: Right-click on the image that you want, and select the photoblog option. This opens a new page with all the HTML code sorted out for you and pre-posted into an Edit Comment box.

Don't hit the Edit Comment button yet!

Next: Place your cursor into the Edit Comment box and highlight all the code in it. COPY IT! Use CTRL &P if you're feeling good!

Now: Hit the BACK BUTTON on your browser and return to the page where you saw the image. You haven't photoblogged anything yet, right?

Select another image: Same as in the first step - right-click, photoblog, get your Edit Comment page up. You see all the HTML Code ready for you to make this new photoblog?

Don't hit the Edit Comment button yet!

Now: PASTE in the code you COPIED from your first photoblog selection - add it to the end (or the beginning) of the code in this new box. Position your cursor with care - you don't want to PASTE in the middle of the new code.

You can hit the Edit Comment button now!

See what you got! If it doesn't look right - simply delete your comment and try again.

Did this work for you?

Oct 5, 2004 1:04pm

How do you add bold or italic emphasis to your text?

You can use basic HTML formatting options in your blog comments to italicise some words or emphasise others by making them bold, or by underlining them. You can even give the impression that some comments have been "struck out" or deleted.

Copy the code below each example (in red) to create that effect:

Some of this text is in italics

Some of this text <i>is in italics</i>

Some of this text is bold for emphasis

Some of this text <b>is bold for emphasis</b>

Some of this text is underlined

Some of this text <u>is underlined</u>

Some of this text is deleted (or "struck out")

Some of this text <del>is deleted (or "struck out")</del>

Sep 24, 2004 10:52am

How do you make your blog comments use coloured text and in different sizes?

Colours are easy - even a variety if you like. If you must, you could even change the colour of the letters in one word.

Copy this code:

Highlight one <font color="gold">word </font>in a different colour.

To create this effect:

Highlight one word in a different colour.

For larger text, copy this code:

Use this to <font size=4>resize </font>your text.

To create this effect:

Use this to resize your text.

Try experimenting with size=1 through to size=6 and see how it looks.