Thursday, January 14, 2010

Blog Tips--fun graphics in comments

Sometimes, it's fun to use characters and letters and numbers to leave graphics in comment boxes. I thought I'd share some of these graphics and show how to make them.

First, we have to remember html tags and how to use them in comments. I've all ready posted about using tags to bold, italicize, or link words in comment boxes, explained at this post here.

Now let's look at another tag. This one, I discovered by accident. I found that if you use this tag,



it turns whatever character or word(s) inside them blue.

1. Type <
2. Type a
3. Type >
4. Then type words or letters or characters you want to look blue.
5. Type <
6. Type /
7. Type a
8. Type >

Here are a few fun graphics that I had fun making and would like to share. Now it may seem a little complicated, but don't be afraid. I can tell you it gets a whole lot easier once you make it to the end of the post. I'm not a computer whiz but if I can do it, so can you!

(Note: If the pics of what you're supposed to type are too small to read, just right click on it and open in new tab/window to see a bigger size)

Also take note that these graphics will have some blue color when used in the comments box. They aren't blue now because of the way this blog post is formatted. In fact, I'm going to post a few examples in the comment box so you'll see what they're supposed to look like.

Let's get started with my fave for the holidays:

Xmas Tree

To get this:

----((*))--
-----*o*---
----*o*o*--
--*o*o*o*o*
o*o*-]o[-*o*o

Type this for


1. Type each line without using any spaces in between the characters.
2. Use the preview button to see how the graphic looks.
3. Make edits as necessary; sometimes, it might mean adding or taking away a dash or a period along the line to get the correct alignment, so the graphic looks right. In fact, I've had to add and remove dashes and periods to make these graphics display correctly in the post.

How about some Gifts to go with the tree?

......[*]
...[*].[8]
[+][X][+]


Type this for



How about some drinks to celebrate?

Some wine perhaps?

(-*)....(-*)
_I_...._I_


Type this for


How about a bottle of champagne?

..*o*
..o.*o
..*[]
../.*.\
..[__]
..[__]


Type this for


You can even take your graphics up a notch, with just a little bit more work. You can combine graphics, and the easiest way to do this is putting one graphic over the over:

There are two easy steps to combining graphics.

Step 1. Type out the first graphic, then press ENTER twice to make sure you have a line space before the next graphic.

How about a birthday cake?

.__iii__
[.o*o*o*]
[+~+~+.]

Type this for



Step 2. Add the second graphic underneath the first one. Make sure there's a line space between the first and the second graphic.

For example gifts usually go with birthday cakes.

......[*]
...[*].[8]
[+][X][+]
Type this for


And the end result should look like this:

.__iii__
[.o*o*o*]
[+~+~+.]

......[*]
...[*].[8]
[+][X][+]

Now, if you look closely at the graphics for cake, you'll see that there is a period instead of a ~ in the last line. Remember the third recommendation above, where I said, sometimes, you have to make adjustments by adding or removing a period or dash? Well, I took out the ~ and added the period so that the graphics look better and not too crooked.

The second way to combine graphics requires a little more work (and patience). Say you want to combine graphics side by side, instead of one over the other. Well, you can do this, but you really have to pay attention to where you place your lines and you might have to use a lot of periods and dashes to make your adjustments.

For example, after all your hard work, how about celebrating and unwinding with a bottle of wine and some wine glasses with friends?

Step 1: Type out the first graphic.



Step 2: Look at your second graphic, and count the lines from the bottom.

For example, there are two lines in the wine glasses graphic:



Step 3: This requires a little more work, but it's very important. You have to make sure that the lines of the second graphic match the lines of the first.

For example, since there are only two lines in the wine glasses, those lines should match up to the last two lines of the wine bottle.

Now, make sure that the lines of the second graphic are flushed (lined up correctly) with the first graphic. The easiest way to to do this is to look at the last two lines of the first graphic. Notice how the wine bottle's last two lines are the same? That makes it a whole lot easier.

Just type of the last line of the second graphic (wine glasses) next to the last line of the first (bottle). Then match the next above line of the wine glasses to the matching bottle line.
It should look like this:



(Right click and open in new tab/window to get a bigger view)

To get this:

..*o*
..o.*o
..*[]
../.*.\
..[__](-*)....(-*)
..[__]_I_...._I_


You can even add a period or more to provide some separation between the wine bottle and the wine glasses. But make sure that if you add a period to the last line, then you must also add periods to the line above to match.

For example,



And you'll see this:

..*o*
..o.*o
..*[]
../.*.\
..[__]...(-*)....(-*)
..[__]..._I_...._I_

As you can see, I've added three periods between the lines of the first graphic (wine bottle) and the second graphic (wine glasses).

As you may have noticed, some of these graphics require a lot of typing!!! But don't despair. I've got a little gift for you. I've uploaded a small text file (about 2.7kb) here . Just click and download for free. It's in a notepad (text) format, so you can just copy and paste whatever graphics you want to use in your comments. For some reason, the previous uploads were deleted, so I've now updated the link. If the link isn't working, then please feel free to let me know in the comments so I can fix it. Thank you.

Remember to be patient and have fun! Go ahead and practice some of these graphics in the comments section if you like. You can type out the easy ones, like wine glasses, or just download the link above and copy and paste.

Here's a helpful hint: If you want to type just one wine glass, just type the first half of the first line, and ignore the periods and everything else on that first line. Now press ENTER and type the first half of the second line, and ignore the periods and everything else on the second line.


Use Preview in the comments section to see if your wine glass showed up. Then Publish it if you like it.

I've been working on this post for a few weeks now, trying to keep it simple and easy to understand. Hopefully, I've done that. If not, feel free to let me know what I can do to help you out. I'm adding this to the sidebar.

Cheers!

17 comments:

  1. Here are a few examples of what graphics will look like in the comment box:

    Xmas Tree

    -----((*))--
    ------*o*---
    ----*o*o*--
    --*o*o*o*o*
    o*o*-]o[-*o*o

    Gifts

    .....[*]
    ...[*].[8]
    [+].[X].[+]

    Birthday Cake

    ___iii___
    [*o*o*o*]
    [+~+~+~]

    Champagne or Wine bottle with glasses

    ..*o*
    ..o.*o
    ..*[]
    ../.*.\
    ..[__]...(--*)....(--*)
    ..[__]..._I_....._I_

    Cheers!!!

    ReplyDelete
  2. Did somebody mention
    ___iii___
    [*o*o*o*]
    [+~+~+~]

    ReplyDelete
  3. That's really neat! Thanks for the tutorial, Eros! :)

    ReplyDelete
  4. how cool are you, sugar? but i have to admit, i'm just getting the hang of doing links! ;~D xoxoxox

    ReplyDelete
  5. Dear Mr Eros,
    You do seem to have a lot of time on your hands
    I am yet to tackle the art of linking let alone learning HTML tags
    I shall file this as a reference
    for 2015
    It will probably take me that long to get back to.

    ReplyDelete
  6. Now you've done it! Giving MJ graphic c*ke technology may be the end of us all!

    Oh Hai MJ, Savannah, Princess!

    ReplyDelete
  7. I love how generous you are with sharing your knowledge. Now, isn't it time you shared your body with us? You know, a few shower shots or something.

    ReplyDelete
  8. MJ, Only how to make it in the comments and nothing more!

    Tara, You're welcome! I hope the instructions are easy to follow and the uploaded file is helpful.

    Savannah, You're cool, too. I actually started writing my blog tips because I finally learned how to make links (and bold and italics) and decided to share it. I figured, if it helps someone, then cool.

    Princess, Ha! It all started with that Xmas tree! I had half an hour to play with one night and the Xmas tree was born out of boredom and opportunity.

    It took me a while to learn how to do links in the comments. But once I learned, I shared how to do it. I keep that helpful info and related posts on the sidebar to help people out.

    XL, I hope it doesn't get too graphic with the graphic!

    Snooze, Thanks. I like sharing stuff! I'd share shower shots, but I don't have a waterproof camera...and it gets awful steamy in the shower.

    ReplyDelete
  9. You are so good at this and do have a gift for explaining things.
    Is it possible to float pictures across the screen like a banner?
    Sx

    ReplyDelete
  10. I love your tutorials. I'm currently trying to figure out the VERY easy (I know) and yet difficult (for me) linking of a website or blog in my post. Help? I'll come to see your response and thanks in advance.

    ReplyDelete
  11. Scarlet B, Thanks. I don't know how to create those streaming banners. I'm pretty sure they involve javascript and a whole lot of work! I've had problems with javascript...it tends to make pages load slower, if at all. I have an old laptop. And I found that any extra javascripts or flashy gadgets tend to make loading my blog a lot longer, sometimes it may even freeze! It's especially hard for people who don't have superfast internet access.

    But there's a tool in Blogger, when you Customize your blog. It shows in the Edit Layout section, there's a heading under Header, your blog's name, you'll see Add a Gadget. When you click on that, it'll show you some options that include Slide Show, which is the closest thing I can think of to having a streaming banner.

    Boxer, Thanks and you're welcome! If you want to link someone's website or blog in your post, you should be able to do it when you create a post in Compose mode.

    Just type the website or the person's name in your post. Highlight it. Then click on the Create a Link icon (paperclip over globe). Then just enter (copy & paste) the url (location) of the site you're linking to in the space that pops up when you clicked the Create a Link icon.

    But another way is the one that I discussed in my post on how to make links. Just follow the same steps and you should be able to create links in your post and as well as in the comments box. I've updated the graphic to see if it'll make things easier.

    Let me know if you still need help.

    ReplyDelete
  12. many thanks blogger friend. I remember that post from 9/08 and had it book marked for months.

    I am such a happy luddite.

    ReplyDelete
  13. well
    Bugger Me I will never get the hang of this lot

    ReplyDelete
  14. Beast, Looks like you got the tag down.

    ReplyDelete
  15. Ah...it all becomes clear now.

    Thanks for that.

    Are you well honey?

    ReplyDelete
  16. Roses, I'm fine, thank you. Just a little busy :)

    ReplyDelete