23/Nov/2005 — Blog Layout Tutorial   53 comments

Heads up: this post is fairly technical. If that excites you about as much as watching paint dry, then there are other blogs to read. Have fun.

Yahoo! 360° Blog Layout

Including table borders and images with links

Paris Vacation, Day 4

Do you want to impress your friends with a sleek layout for your blog entries? Do you want to link to images that you have uploaded to Flickr or some other image hosting service?

Well, hopefully, this post will help. Just follow the excruciating steps below to create a blog entry that will make your friends say, “Ooooo” and/or “ahhhh.”

What do you need? Besides a computer and online accounts, which I will assume you have already, a little — a tiny bit — of HTML awareness will come in handy, but really, you will be okay without it.

Of course, I must disclaim that I am not to be held responsible if you do what I say here, use any of this code, or follow my advice and your computer blows up, leaves home, causes an international crisis, or any other bad thing befalls you or yours.

<td colspan="2"bgcolor="#CCFFFF">

Yahoo!360° Blog Layout

Including table borders and images with links

<tbody align="left" valign="top">


<td bgcolor="#ffffff">
<a title
="Photo Sharing"href="http://www.flickr.com/photos/glindsay65/62488882/">
<img src
="http://static.flickr.com/26/62488882_dc3d8bcd31_m.jpg"width="160"height="240"alt="Paris Vacation, Day 4">


<td bgcolor="#ffffff">

Do you want to impress...

First, to make things a little easier for you, I have posted the source file for this tutorial on my website, so you can download it and do with it as you please. (How often do you get an offer like that?) Feel free to use, modify, and/or distribute it as long as you (1) give me credit for what I did and (2) do not charge for it, since I didn’t charge you. What’s fairer than that, I ask you?

Here are the basic steps. I will expand on them below, but some of you might only need the high-level outline. And here it is:

  1. Open the template that you downloaded from my site
  2. Edit to suit your post
  3. (optional) Save it with a different name
  4. Copy the table piece of code from the template
  5. On Yahoo! 360°, compose a “New Blog Entry”
  6. Give it a Title, but skip the photo upload bit
  7. Turn on View HTML Source
  8. Paste in the code copied from the template
  9. (optional) Click “Preview”
  10. Click “Post This Entry”

Here is the simplified source code for the blog layout template. I find that, when venturing into unknown territory, if someone has given me a head start, I can learn as I go. I make a few changes, experiment, and all without having to first know every detail of the subject. Maybe that approach will serve you here.


<table summary="Basic blog layout" align="center" bgcolor="#3399FF" border="0" cellpadding="10" cellspacing="1">
<thead align
="left">

Now, that HTML code looks either straight forward, like Egyptian hieroglyphics, or somewhere in between. Not to worry. You can just copy ‘n paste the code above (or use the file from my site.) But, if you want to dig deeper, I will explain each piece right now. Take your time with this, it gets pretty thick for the average Joe/Jane:


This is simply a comment, a little note inserted into the HTML for the human reader. The browser ignores all the text between <!-- and -->.

<table ...>

This is the start of the table that forms the basic container of our blog post. The table holds the bits in line and even let’s us put a border around it. But, just so you realize, nowadays, savvy Web Developers prefer to use tables for layout control very sparingly, in favor of positional CSS. Now let’s look at each attribute of the table tag to see what it does:

<... summary="Basic blog layout" ...>

The summary attribute is optional, but nice to include. It is used by screen readers for the visually impaired to describe the contents of the upcoming table, which lets the user decide if they want to view it or not.

<... align="center" ...>

The align attribute tells the browser to place the table in the horizontal center of either the screen or, as with Yahoo! 360°, the containing HTML element. Other options for this attribute are "left" and "right".

<... bgcolor="#3399FF" ...>

We will use the bgcolor (background color) attribute in an unusual way. Since we can’t use CSS borders in Y!360° (for some reason, however I haven’t tried it recently,) we will do three things to simulate a border.

First, we will set the background color of the table to the color we would like for our simulated border. Here, I chose "#3399FF" for my background color. Do you know that color? Neither do I, that’s why I look it up. Second, we will add a bit of spacing between the table edge and the cells’ edges inside the table. This will let some of the table’s background color leak out to give the illusion of a border. Finally, we will specify a background color for each cell to mask out the table’s background, except for that little space all around the cell’s edge. All clear as a foggy night, right? Super. Let’s contnue.

<... border="0" ...>

Seems strange, doesn’t it, that we are going through all this trouble for the border, when here we have a border attribute. Yes, well, the typical display of this attribute, if we were to use it, looks—I’m just going to say it—ugly. We won’t use it, so we’ve set it to 0 (zero.)

<... cellpadding="10" ...>

The cellpadding attribute controls how much space there is between the cell edge and the content within the cell. I use "10" here to give a bit of white space. Keep in mind that you can play with all these values and see the results for yourself. That will help you learn the effect of each attribute on the table’s appearence.

<... cellspacing="1" ...>

The cellspacing attribute, as we are using it, will define the thickness of the table border. The value of "1" give a clean, thin line. On your blog, make it thicker, if you’d prefer. Have fun.

Whew, we’re done describing the table’s attributes and that’s a big part of this. The next tag, <thead align="left">, marks the start of the table header and specifies that the content will be left justified.

Then come the start of the row,

, and the only cell in the row, <td colspan="2" bgcolor="#CCFFFF">, which will span 2 columns, have a "#CCFFFF" background color, and form the title bar.

The next two lines describe the content of the title bar. First, the title as a level 3 heading,

Yahoo!360° Blog Layout

and the subtitle as a paragraph,

Including table borders and images with links

.

To finish the title bar, we close the cell

, row

, and head

tags in that order:

Done with the table head, we move to the body, <tbody align="left" valign="left">, with content tucked to the left and top of each cell.

Again we will start a row,

, but this time we will have two cells, each to form one of the columns. The first column, <td bgcolor="#ffffff">, will be on the left with a white background (I know that color) and will hold our image (or images in your version, if you choose.)

Inside the left cell, you might notice that the image tag is wrapped by an achor tag, <a ...><img ...>. Flickr provides a convenient tool for copying all this HTML to paste right in here, which I will show you below.

We’ll come back to the anchor tag in a minute. For now, let’s examine the image tag. In a nutshell, the image tag tells the browser details about the image and where to place it on the page. Here are the attributes:

<... src="http://static.flickr.com/26/62488882_dc3d8bcd31_m.jpg" ...>

The src (source) attribute tells the browser where the image is, it’s address or URL.

<... width="160" height="240" ...>

The width and height attributes tell the browser the dimensions of the image.

<... alt="Paris Vacation, Day 4" ...>

The alt (alternative) attribute specifies the text to display for nonvisual screen readers or in the event that the image is unavailable. All four of these attributes are required.

As promised, lets look at the anchor tag. This tag gets a lot of use on the Internet. It wraps around text or, as in our case, an image to make it a clickable link to another place on the Internet. By wrapping the image with the anchor tags, the user can click on the image and open, in this case, the picture’s Flickr page. There are two attributes.

<... title="Photo Sharing" ...>

The title attribute should provide some information about the link. I like to say something like, "Link to a larger version in my Flickr photostream" or something that tells the user where the link will take them, if they click on it. Usually, the browser will display this text to the user as a pop-up “tool tip”.

<... href="http://www.flickr.com/photos/glindsay65/62488882/">

The href (hypertext reference) attribute is the destination of the link. If the user does click on the link, the browser will load the page at this address or URL.

Now, I said that Flickr provides an easy way to grab all this HTML code for an image. It does. To get it do this:

  1. Open Flicker to the picture you want to insert
  2. At the top of the picture, find the “All Sizes” button and click it
  3. On the next page, find the “small” link and click it
  4. At the bottom of the page, there is the code for inserting this image and the link back to the Flickr page for this image.
  5. Select it and copy it

How sweet is that? But let me point out one little gotcha. In the Flickr code, the anchor’s href attribute appears first, followed by the title attribute. While this is perfectly valid HTML, Y!360° dosen’t like it. Here’s what to do, once you’ve pasted the code into your table template, just cut and past the title attribute to precede the href attribute, like I have shown above. Other than that, the code is good to go.

Do you feel like you just drank from a firehose? Well, then, my job here is done. Feel free to leave feedback, corrections, better ideas, questions… the lot.

— Grant

Advertisements

Posted Wednesday, November 23, 2005 by Grant in Random

53 responses to “23/Nov/2005 — Blog Layout Tutorial

Subscribe to comments with RSS.

  1. I’m not going to drink any horsie stuff 😉

    Will close my eyes to CUT and PASTE what you’ve dish out Grant. I’m expert with this method. If that doesn’t work, I’ll tear this blog of yours word by word, may be should get the medic on stand by first.

    Thanks a million too!!! M

  2. Cheers!!!

  3. u know I am a freak about learning this stuff.. I have done a bit .. less is more sometimes.I find it, at my age, a great brain exercise. They are always saying , one must learn a new language, do crossword puzzles, keeping the grey matter building new nuron connections to stave off the impending onslaught on olz-timers. This takes all that stuff and is also creative so u have some pleasure in the final product. I gave up on learning French, doing crosswords only makes me feel stupid.. so trying to figure out the blog/style sheets/html stuff is how I am codeing my way to the grave!! (cheery eh?)

    "Єpiѕtling ŊutΩpian"
  4. Party on! I wrote a lot of that while I was tired. If it gets funky, especially near the end, let me know and I will try to edit it for clarity.

    — Grant

  5. Thanks, Grant! Love this stuff. (..surfed on by since you were highlighted by Yahoo! as interesting..)

    Amy ("Open Up!!!!" ... okay... I'll try it.)
  6. This is great, Grant! I’ll try it! Thank you so much for sharing those bits of info! Have a great Thanksgiving downthere!! 🙂

  7. Hi Grant, I too became aware of your site thanks to Yahoo( I can’t believe I said that lol) None the less I find your site very interesting and I only recently put up my 360 page and was agrivated that I could not incorporate Html within my Blogs. I do not know much HTML but I do know a few little tricks I like to display one of them is links I would like to be able to use this myself as well. Is it at all possible to use any marquees or some of the more eye catching displays html code can produce? By the way I truly love the Macaw I used to own several large birds long ago before I became allergic to them, my favorite was Cuddles my Umbrella Cockatoo. I always wanted a Hyicanth but as I am sure you already know they cost about as much as a new car LOL.
    SO then I thank you again and wish Happy Thanksgiving even though I don’t know you *winks* I would like to better come to know you in the future. I am a computer geek who loves to learn all I can about web design and always willing to play around with html code. Now I have to go try out your code…. OH my replys are open to the public.. Hint hint.. I have a site as well its on my 360 page if you wanna look but I fear you are more skilled them myself so please be kind. LOL take care

  8. Love the pic! Everything else went ZIP! right over my head! But the end result looks great. So glad we’re new friends. 🙂

  9. Thanxox so much! This is so kute! I love it! ^_^

  10. Hello There Grant 🙂
    was just passing through … reading and browsing … very nice 🙂 I enjoyed your page here greatly .. picked up some wonderful tidbits and have to admit you seem to be a great person 🙂 I hope you had a wonderful Thanksgiving! Till next time our paths cross ..
    Peace n Hugzzzzzzz
    ~*~ Pix ~*~

  11. @ Oicu812/Gelf: I’m glad you got some value from my tips and tricks corner. Sorry you had to give up the birds.

    @ Robin: Yeah it was pretty technical, but not all my posts will be, so don’t worry.

    @ Miu: “Kute?” That’s exactly what I was aiming for… lol. Thanks.

    @ Pixie: Thanks, but I’m just me. I’m glad there were tidbits there to pick up.

    — Grant

  12. Grant, Went right over my head. Maybe you can answer this. What is a blogroll for and how do I get one? Don’t laugh!!!

  13. Thank you for the great tips and tricks for yahoo 360!!! This is great! Especially this blog layout template that you did! YOU ROCK!

  14. Hey Granty, you dont mind if I call you Granty do you… ok fine Grant it is. Anyways, great stuff (and I use the word stuff because “shit” seemed Inappropriate and I din’t want to offend anyone). BIG THANKS

  15. to much stuff for me lol

  16. would love 4 u to add me

  17. Thanks Grant I will try that. See how I go making a Xmas one 😀

  18. Oh Grant-
    From the simpleton…..what? Thanks for the pointers, but I will just do it the boring way. I do not have the time or the patience-although I would love to learn. Maybe when I am finished with nursing school I will look you up, maybe I can get some pointers then. Happy Holidays!!!

  19. @ soandsosfrnd: Answered in an email. (I’m not laughing…honest.)

    @ Angie: Thanks bunches.

    @ thetruejust4fun: Sorry, my eyes fell out of my head. What did you say?

    @ Missy: Cool. I’ll come by and check it out.

    — Grant

  20. OMG Grant!!! ROTF … lmao. Oouch my head hurts!!! From a really bad feverish cold. Yep, laughter is still the best medicine.

  21. @ lovelypinklady254: HTML is a cake walk (whatever that is) next to Nursing School. When you want to learn, I’d be happy to help.

    @ Maayan: Sorry your head hurts from your cold, but glad I could make you laugh. 🙂

    — Grant

  22. Looking back over this comment thread, I realized that I missed some folks. Sorry.

    @ Amy: Thanks, back.

    @ Moonie: Fellow Canuck, thanks and keep warm up there.

    @ Chris: If you don’t mind, I’d prefer either “Grant” or my rap name, “Grand Master G.” 🙂 You’re welcome to my shit anytime. Thanks.

    — Grand Master G (fer shizzle my hizzle)

  23. Thanks!

  24. O.K., I THOUGHT I was good at html, but I’m definately getting lost in all the code. I think I’ll just blindly cut and paste too!

  25. Grant…. I read this and it left me gasping for air. This is awesome! I always wondered how to do more creative things with my blog. I was getting bored with my own. Thanks for sharing.

  26. @ Coffeebarchick: Welcome!

    @ Malibu: Lost? After my careful explanations? 🙂 Just kidding. I know it’s thick, but I like to be thorough.

    @ Melissa: Gasping for air? Wow, I don’t often get that response… from my blog readers. I’m glad you found it useful.

    — Grant

  27. Grant- I figured that would get your attention! Any time you mention to a guy that they left you gasping… they tend to notice…

    I’m using your “lesson” to add a dog diary to my blog. I know… but my dog does have a lot to say… take care and thanks again.

  28. @ Melissa: Your dog has a lot to say, but can’t type, I take it. Hmmm… is it too late to return it?

    — Grant

  29. Grant- Actually, she can, but you don’t want to see it.

    BTW- sorry my evil twin pirated your photo. I wonder though, has that been happening a lot when people are doing the ol’ cut and paste w/ your HTML instructions? I’ve tried changing it, but either I’m too thick (HTML-impaired?) or it’s not possible.

  30. hey …that’s cool….i mean really cool!!!!….and sharing it is ubercool!!!>…..really thanks mate!!!

    BYE!!!….Like to add U!!!

  31. @ Melissa: Talented dog. Evil twin trouble. I understand.

    To put your own picture up, you need to, first, have one on the Internet. Then replace the (image) tag attributes (src, alt, width, and height) with ones that represent your image. You can also change the (anchor) attributes (title and href) to point to another page on the Internet. Often, for images, this would be a larger version of the image.

    Sorry, if I skimmed over this… I talk in more detail about this in this post. Look for the part that begins with “Inside the left cell”.

    @ S.Balasubramanian: You’re welcome.

    — Grant

  32. Thanks Grant!!! I will certainly do that! You sure are popular!

  33. Hi, Grant! Thanks for all your info. Isn’t it fun to be famous on Yahoo? LOL! Have fun with it.
    Aloha!

  34. @ lovelypinklady254: Thanks for checking back.

    @ Gently: It’s been up and down, but mostly up.

    — Grant

  35. I’ve copied your example and am going to repost it to my own 360.

    I’m really just starting out on 360 and working with HTML/XHTML/CSS or whatever they are currently calling it. Your post is very helpful to me. Its interesting because I tried to use tables to align images to the left or right of text and 360 kept deleting my alignment. What I’d like is to wrap text around images, just like any run of the mill web page, but I’m seeing that this may not be possible.

    I’m also linking to this entry because the best part of your design is the explanation. Congratulations on your Yahoo celebrity!

  36. @ algreen589: Y!360° filters a lot of valid HTML and CSS from posts, but allows others. The help entry accessible from “Most HTML is OK. Learn more,” (http://help.yahoo.com/help/us/360/blog/blog-22.html) is inaccurate as well.

    For example, “background-image” is stated as allowable CSS and “style” is stated as an allowable attribute in a table tag, but this valid code gets striped to . And the CSS “float” attribute? Well, that is just outlawed altogether.

    This is a very real shortcoming (in my opinion) to the usefulness of Y!360°.

    — Grant

  37. Thanks for sharing the code, Grant!

    Took one look at it and knew i was just going to cut and paste lol

    Have been wanting to do blogs with more than one pic or pics that are not limited by Yahoos constraints. For that, thank you very much!

    Tried it for the first time last night with “Confession from a Nerdy Gurl”. Because i’m not a techie chick it took some doing, but i finally got it up after an hour or two. I was also able to insert another pic in an earlier blog.

    At that point “confession” had just two pics. I wanted to try adding three more today. Because i’m not a programmer, i resorted to intuition and everything was hit or miss…

    Took four hours but i got it done the way i wanted it!

    Thank you so much!

  38. @ Rainey: Thanks for coming back to update me (us). If you have any questions, feel free to ask.

    — Grant

  39. Thanks Grant 😀

    btw Yahoo may have fixed whatever was wrong with flickr or vice versa. Was able to add the pics by simply cutting and pasting the code. No modifications nescessary…

  40. @ Rainey: You got my hopes up. The prolem still exits (for me, at least.) I just tested it on Windows XP with Firefox 1.5. The problem is not in the “img” tag (which loads the image) — that works — but in the “a” (anchor) tag (which directs the browser to a new page when you click on the image.)

    Try clicking on images to see if they go where they are supposed to.

    Y!360 still mangles this tag for me.

    — Grant

  41. Hi, Grant! Just want to say ‘Thank You!’. I came across ur page a few weeks ago & this topic caught my attention. Having no background in HTML, I was bewildered at first but told myself I have to learn this. After procrastinating for some time…I finally sat down & followed your instructions & made one for my blog (after several failed attempts, LOL!) Thanks once again & Merry Christmas!

  42. @ JoZ: I checked out your blog entry on Cat’s Fish. You did such a good job, having had no HTML experience. You took my template and adapted it, a sign that you understood the concepts. Way to go.

    — Grant

  43. Thanks, Grant. I really appreciate this. I’ve been basically tearing out my hair trying to figure out a way of putting up MULTIPLE Photographs on my blog. I like taking scenery shots, so I’ve been basically putting up ONE picture a post but have wanted to condense my multiple posts per day into ONE post. This really helps out a lot.

  44. @ Hugo C: Another fellow Canuck. Cool. Have fun with it.

    — Grant

  45. Thanks grant for really annoying me with the intricacies of html and making me feel like I do not know a thing….

    that forced me to do alot of searching online for help which has led me to my first html piece created from scratch lmao am ecstatic..

    you might wanna check out the formatting etc to see the fruits reaped from your work…

    thanks man…keep posting.

    PS:the article is called “PAIN ”

  46. Made my first layout today….copied your template and followed the instructions….just wanna say thanks, it was very useful!

  47. k…i’m just not gettin it.
    i suck at this ..grrrrr

  48. @ fransay: You’re welcome… you keep posting, too.

    @ dizzy: I’m glad you got it to work.

    @ embratt: Awwww, don’t be so hard on yourself. It’s not a cake walk, by any means… maybe taking smaller bites might help. Here is a good, getting started tutorial on HTML: http://www.w3schools.com/html/default.asp

  49. Hi Grant, hmmm.. where do i start… I know nothing, or next to nothing… but i am interested in learning!!!
    I’ve tried using the code, which you’ve been kind enough to share, some parts of it i played around with, and it worked out..ishhh…
    I tried adding an image from GeoCities, as opposed to Flickr… needless to say it didn’t work!! Is it not meant to work here?? Can I only use images uploaded to a Flickr account??? I would be grateful for any advice you can give!!
    Thanks
    Poppy 🙂

  50. Gramt,
    Thank you for your response! 🙂 I’m not so sure i have anything figured out, though, not yet anyhow! I do plan to keep working at it!
    Thank you again.
    Poppy

  51. Thank you again!!! I am, I think, making good use of this Tutorial.
    I’m still not all that proficient, but i’m getting there… slowly!!
    Poppy 🙂

  52. Thanks a lot for the template…wanna checkout what I did?

  53. thanks for the info….i think i’m still a little confuses….i’ll read it once more.
    peace

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: