My apologies for the name of the post. "Image Test" is a good example of post title drift. This started out as an attempt to see if I could upload a picture, then I added examples and more points.
Now, it's a tutorial, for one of the easiest, yet sometimes least obvious, way to make your blog user friendly. Using images in your blog is easy, but using them effectively takes a bit of thinking. Maybe this article will make you think.
What I'll include here is several examples of simple but effective uses of images in a blog. After each example, I'll include the code, character for character (with exception to the note, below) used to create that example.
When you embed the code in your blog, those extra line breaks will break the code. Be sure to remove all gratuitous line breaks from your code, before publishing. And if you're in any way curious about how I setup this page, and showed the HTML so neatly, with links from section to section, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox.
>> Top
A URL
Here is a URL. See how simple it is? http://blogging.nitecruzr.net/2006/07/image-test.html
>> Top
A Hyperlink, With A Hidden URL
Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is hidden, unlike a hyperlink with a visible URL. The hyperlink points to another example in this post. Click on the link, and see for yourself. Check This Out
A hyperlink with a hidden URL is cleaner, and easier to read, than a hyperlink with a visible URL. Plain text is easier on the eyes. Replace the caption with a picture, and you have a button. Note that I used an internal anchor ("#Picture") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.
>> Top
A Hyperlink, With A Visible URL
Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is visible, unlike a hyperlink with a hidden URL. The hyperlink points to another example in this post. Click on the link, and see for yourself. http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture
When you copy text containing a visible URL, the copy target will contain useful information, unlike a hyperlink with a hidden URL. Note that I used an internal anchor ("http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture") in this example, rather than a simple URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.
>> Top
A Hyperlink, With The Target Opening In A New Window
Here is a hyperlink, with the target opening in a new window. The hyperlink points to another example in this post. Click on the link, and see for yourself.
>> Top
An Embedded Picture
Here is a picture, embedded in the post. See how simple it is? You can't click on this picture. Try it and see. See the difference between this, and an external picture?
>> Top
An External Picture Here is a link to a picture, displayed externally. See the difference between this, and an embedded picture? Check This Out
>> Top
An External Picture, Opening In A New Window
Here is a link to a picture, displayed externally. This will open a new window, to save the reader from having to use the Back button, or allow to compare the original display with the resulting display. Check This Out
>> Top
A Button
Here is a button, that is, a picture with a URL attached, as a link. The button, as with the hyperlink above, links to another example in this post. Click on the picture, and see for yourself.
Note that I used an internal anchor ("#PictureText") to another section in this tutorial, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html#PictureText). You can read about Anchors, which let you jump to a specific section of a post rather than to the top of the post, in Putting Anchors, and HTML, In Your Posts
>> Top
A Button, With The Target Opening In A New Window
Here is a button, that is, a picture with a URL attached, as a link. The button, as with the hyperlink above, links to another example in this post, and the target opens in a new window (or tab). Click on the picture, and see for yourself.
Note that I used an internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).
>> Top
A Picture, With Text
Here is a picture, following text, with text beside it, and text below it. You can't click on this picture. Try it and see.Here is text, beside the first picture.
Here is text, below the first picture.Here is text, beside the second picture.
Here is text, below the second picture.
>> Top
A Button, With Text
Here is a button, following text, with text beside it, and text below it. A button is a clickable picture, that links to a post somewhere. This button, as with the hyperlink above, links to another example in this post. Click on the button, and see for yourself. Here is text, beside the button.
Here is text, below the button. Here is text, beside a second button.
Here is text, below the button. Here is text, beside a third button.
Here is text, below the button.
You could, just as easily, have them take you to another picture. Note that I used an internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).
>> Top
A Picture, With No Border
Here are two pictures, the first has default style, with a border surrounding it. The second has no border. Here is a picture, with a border.
Here is a picture, with no border.
>> Top
An Enlargeable Picture
Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files.
Chuck's Cabbage / Shrimp Salad
And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's Potato / Leek Soup
This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
>> Top
An Enlargeable Picture, With A MouseOver Popup
Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files. Chuck's Cabbage / Shrimp Salad
And the best thing is, this is totally healthy (if you use low carb Cannola oil). Chuck's Potato / Leek Soup
This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
>> Top
An Enlargeable Picture, Opening In A New Window
The immediately above example, An Enlargeable Picture, gives you two images to look at:
Chuck's Cabbage / Shrimp Salad
And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's Potato / Leek Soup
This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
See the "<br clear="left" />" following the caption for each picture? As indicated in A Picture, With Text, it forces all subsequent pictures and text to start below the picture.
>> Top
For additional advice about using pictures in your posts, see Arranging Pictures In Your Posts, and Arranging Pictures In Your Posts, Side By Side. If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.
>> Top
Now, it's a tutorial, for one of the easiest, yet sometimes least obvious, way to make your blog user friendly. Using images in your blog is easy, but using them effectively takes a bit of thinking. Maybe this article will make you think.
What I'll include here is several examples of simple but effective uses of images in a blog. After each example, I'll include the code, character for character (with exception to the note, below) used to create that example.
- A URL.
- A Hyperlink.
- A Hyperlink, With A Hidden URL.
- A Hyperlink, With A Visible URL.
- A Hyperlink, With The Target Opening In A New Window.
- A Picture, Embedded In The Post.
- A Picture, Displayed Externally.
- A Picture, Displayed Externally, Opening In A New Window.
- A Button.
- A Button, With The Target Opening In A New Window.
- A Picture, with Text.
- A Button, with Text.
- A Picture, with no border.
- An Enlargeable Picture.
- An Enlargeable Picture, with A MouseOver Popup.
- An Enlargeable Picture, Opening In A New Window.
When you embed the code in your blog, those extra line breaks will break the code. Be sure to remove all gratuitous line breaks from your code, before publishing. And if you're in any way curious about how I setup this page, and showed the HTML so neatly, with links from section to section, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox.
>> Top
A URL
Here is a URL. See how simple it is? http://blogging.nitecruzr.net/2006/07/image-test.html
http://blogging.nitecruzr.net/ 2006/07/image-test.htmlA URL is simply the address of a file, somewhere on the web. In this example, it's the address of this web page.
>> Top
A Hyperlink, With A Hidden URL
Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is hidden, unlike a hyperlink with a visible URL. The hyperlink points to another example in this post. Click on the link, and see for yourself. Check This Out
<a href="#Picture"> Check This Out</a>A hyperlink is simply any object (here, a caption, "Check This Out"), surrounded by a clickable URL.
A hyperlink with a hidden URL is cleaner, and easier to read, than a hyperlink with a visible URL. Plain text is easier on the eyes. Replace the caption with a picture, and you have a button. Note that I used an internal anchor ("#Picture") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.
>> Top
A Hyperlink, With A Visible URL
Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is visible, unlike a hyperlink with a hidden URL. The hyperlink points to another example in this post. Click on the link, and see for yourself. http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture
<a href="#Picture">a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture</a>A hyperlink is simply any object (here, a visible URL), surrounded by a clickable URL. A visible URL might be used in articles that you would plan to copy into a text document.
When you copy text containing a visible URL, the copy target will contain useful information, unlike a hyperlink with a hidden URL. Note that I used an internal anchor ("http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture") in this example, rather than a simple URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.
>> Top
A Hyperlink, With The Target Opening In A New Window
Here is a hyperlink, with the target opening in a new window. The hyperlink points to another example in this post. Click on the link, and see for yourself.
<a href="#Picture" target="_blank"><img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>A hyperlink is simply any object (here, a visible URL), surrounded by a clickable URL. Adding ' target="_blank"' (note the preceding extra space!) makes the target contents open in a new window (or tab, depending upon your browser).
>> Top
An Embedded Picture
Here is a picture, embedded in the post. See how simple it is? You can't click on this picture. Try it and see. See the difference between this, and an external picture?
<img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif">An embedded picture is simply a URL of a file containing an image, specified as an image. Surround it with a hidden URL, and you have a button. If you like, you can add text beside and / or below, the picture.
>> Top
An External Picture Here is a link to a picture, displayed externally. See the difference between this, and an embedded picture? Check This Out
<a href="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif">Check This Out</a>An external picture is simply a URL of a file containing an image, specified as a hyperlink. Or it's a caption ("Check This Out"), surrounded by a clickable URL.
>> Top
An External Picture, Opening In A New Window
Here is a link to a picture, displayed externally. This will open a new window, to save the reader from having to use the Back button, or allow to compare the original display with the resulting display. Check This Out
<a href="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" target="_blank">Check This Out</a>An external picture is simply a URL of a file containing an image, specified as a hyperlink. Or it's a caption ("Check This Out"), surrounded by a clickable URL. Adding " target="_blank"" to the anchor tag makes the picture open in a new window. You can add " target="_blank"" to any anchor tag, with this result.
>> Top
A Button
Here is a button, that is, a picture with a URL attached, as a link. The button, as with the hyperlink above, links to another example in this post. Click on the picture, and see for yourself.
<a href="#PictureText"> <img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>A button is simply an embedded picture, surrounded by a hidden URL. If you like, you can add text beside and / or below, the picture. Making the button image isn't complicated. You can use any graphics or word processing program, that produces image files. Or, the right CSS / HTML code can be used to make a simple button image.
Note that I used an internal anchor ("#PictureText") to another section in this tutorial, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html#PictureText). You can read about Anchors, which let you jump to a specific section of a post rather than to the top of the post, in Putting Anchors, and HTML, In Your Posts
>> Top
A Button, With The Target Opening In A New Window
Here is a button, that is, a picture with a URL attached, as a link. The button, as with the hyperlink above, links to another example in this post, and the target opens in a new window (or tab). Click on the picture, and see for yourself.
<a href="#PictureText" target="_blank"> <img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>A button is simply an embedded picture, surrounded by a hidden URL. If you like, you can add text beside and / or below, the picture. Adding " target="_blank"" to the anchor tag makes the picture open in a new window. You can add " target="_blank"" to any anchor tag, with this result.
Note that I used an internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).
>> Top
A Picture, With Text
Here is a picture, following text, with text beside it, and text below it. You can't click on this picture. Try it and see.
Here is text, beside the first picture.Here is text, below the first picture.
Here is text, beside the second picture.Here is text, below the second picture.
<img alt="Here is a first picture" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;">Here is text, beside the first picture. <br clear="left" /> Here is text, below the first picture. <br /> <img alt="Here is a second picture" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;">Here is text, beside the second picture. <br clear="left" /> Here is text, below the second picture.The break record ("<br clear="left" />") is a key element here. You need the break, clearing on the left after that, to force text below the picture. As noted, this is a nonclickable picture. You could do the same, though, with a clickable Blogger hosted photo. You may find additional ideas for positioning images and text together, in this W3Schools Tutorial Exercise.
>> Top
A Button, With Text
Here is a button, following text, with text beside it, and text below it. A button is a clickable picture, that links to a post somewhere. This button, as with the hyperlink above, links to another example in this post. Click on the button, and see for yourself.
Here is text, beside the button. Here is text, below the button.
<a href="#PictureText"><img alt="Here is a button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;"></a> Here is text, beside the button. <br clear="left" /> Here is text, below the button.The break record ("<br clear="left" />") is a key element here. Since the picture floats on the left, you need the break, clearing on the left after that, to force text below the picture.
Here is text, beside a second button. Here is text, below the button.
<a href="#PictureText"><img alt="Here is a second button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:right;"></a> Here is text, beside a second button. <br clear="right" /> Here is text, below the button.The break record ("<br clear="right" />") is a key element here. Since the picture floats on the right, you need the break, clearing on the right after that, to force text below the picture.
Here is text, beside a third button. Here is text, below the button.
<a href="#PictureText"><img alt="Here is a third button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:right;"></a> <span style="float:right; text-align:right;">Here is text, beside a third button.</span> <br clear="right" /> <span style="float:right; text-align:right;">Here is text, below the button.</span>The break record ("<br clear="right" />") is a key element here. Since the picture floats on the right, you need the break, clearing on the right after that, to force text below the picture. Click on the buttons, and you'll see that they take you to another portion of this article.
You could, just as easily, have them take you to another picture. Note that I used an internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).
>> Top
A Picture, With No Border
Here are two pictures, the first has default style, with a border surrounding it. The second has no border.
Here is a picture, with a border. Here is a picture, with no border. <img alt="Here is a picture, with a border" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;"> Here is a picture, with a border. <br clear="left" /><img alt="Here is a picture, with no border" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px; float:left;"> Here is a picture, with no border.
>> Top
An Enlargeable Picture
Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files.
- A thumbnail copy of the picture.
- A full size copy of the picture.
Chuck's Cabbage / Shrimp Salad And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's Potato / Leek Soup This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0048%201280.1.jpg"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0018.jpg"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>See the "<br clear="left" />" following the caption for each picture? As indicated in A Picture, With Text, it forces all subsequent pictures and text to start below the picture.
>> Top
An Enlargeable Picture, With A MouseOver Popup
Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files.
- A thumbnail copy of the picture.
- A full size copy of the picture.
Chuck's Cabbage / Shrimp Salad And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's Potato / Leek Soup This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0048%201280.1.jpg" title="Chuck's Cabbage / Shrimp Salad"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0018.jpg" title="Chuck's Potato / Leek Soup"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>See the "<br clear="left" />" following the caption for each picture? As indicated in A Picture, With Text, it forces all subsequent pictures and text to start below the picture.
>> Top
An Enlargeable Picture, Opening In A New Window
The immediately above example, An Enlargeable Picture, gives you two images to look at:
- A thumbnail copy, which you can see in the post, with the text.
- A full sized copy, which you can see by clicking on the thumbnail.
- Open Link In New Tab
- Open Link In New Window
target="_blank"to the anchor link, and automatically open the full sized picture in a new tab or window. This is similar to the above example A Picture, Displayed Externally, Opening In A New Window. Here are a couple recipe pictures, so I can demonstrate this. Click on the pictures, and see the full size photos. Then, check out the recipes. Note that the final result, whether the picture opens in a new tab or window, will be according to the Tabbed Browsing settings in each readers browser. If the user elects to open new windows in a new tab, that's where the new picture will open.
Chuck's Cabbage / Shrimp Salad
And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's Potato / Leek Soup
This is totally healthy too. I picked this recipe up, while enjoying my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/5304/92/1600/DSCF0048%201280.1.jpg" target="_blank"> <img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/5304/92/1600/DSCF0018.jpg" target="_blank"> <img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>
See the "<br clear="left" />" following the caption for each picture? As indicated in A Picture, With Text, it forces all subsequent pictures and text to start below the picture.
>> Top
For additional advice about using pictures in your posts, see Arranging Pictures In Your Posts, and Arranging Pictures In Your Posts, Side By Side. If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on anchors and HTML. And you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.
>> Top
Comments
http://bloggerstatusforreal.blogspot.com/2006/07/image-test.html#PictureText
for forcing text to start below an image with the "float=left" style property (using <br clear="left">) and it seemed to be ignored.
Do you have an open thread in How Do I??? If not, we would all maybe benefit if you start one.
Thanks,
Mrs Guru
onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
Although there are no problems, and the image showed successfully, I curious what does the abov line mean and is it safe to have the line in the code.
Thanks
What you want, I think, is called an Internal Anchor. I show you an Internal Anchor in my section on Buttons.
If you need more detail on this, why not post in GBH: How Do I?? The online forums are much easier to use, then Blogger Blog Commenting, for interactive problem solving.
Your tutorial is nice and great too!
~Sara-Jane (Malaysian)
Nope. And we've asked for this, a few times.
Who knew? A techie and a foodie!
TOB
I'm going to strongly suggest that you post your questions in Blogger Help Group, where you can enjoy the benefits of peer support.
tantalising.
Thanks so much for your continued help in Blog support.
Not wanting my readers to lose their place at my site, though, I went in and added the target code for individual outgoing links. Thanks so much!!
The one example that seems to be missing is to have a text link with mouse rollover to display an image, and then have the image disappear when the mouse rolls off the text link.