Coding Blogs
Blogs are one of the easiest things to make, but a little confusing to code (probably why I'm so hesitant to make blogs). But I'm determined to make a tutorial on coding blogs so that people don't keep emailing me about what to do after making a blog. Before you start reading this tutorial, please keep in mind that you must be very familiar with table codes, otherwise this tutorial won't make an ounce of sense.Below is a blog I made in 2 minutes. I just slapped on an image, a semi-transparent area, a border, some text and voila! It's not exactly my best, but hey, this is a tutorial about coding blogs, not making them.
It's dimensions are 350 x 250 - nice rounded numbers, which is going to help when we start coding it. Okay, to begin, think of this blog as a series of table cells on top of a background. So you would see something like this:
Don't mind about that little bit at the bottom that peeps out, that's just the product of having the red borders (which won't show up in your final product). You can divide up your own blog by trial and error - display it on a page and change the width and height of your table cells then refresh your final product to see how precise you are. Or you can use image slicing in your graphics program and find out the width of the table cells beforehand.
The semi-transparent area is the part where you want your words to show up and remain in, but since CSS is not allowed in shops anymore, you'll have to make do with a div code inside the semi-transparent cell. For this particular blog, this is the following div code:
|
|
See how the width and height of the div blog matches the with and height of the table cell that you want the text to appear on? The other stuff can be easily changed to suit whatever color scheme you fancy. Please note that there are 2 div blogs inside this table cell. One is exactly the same size as the table cell while the other gives it an invisible border so that your text isn't right on the border-line of your blog.
So after you combine all the codes together, you get something that looks like this:
And here is where you put your text.
To make it scroll you just add more text. Like this. And this.
|
||
So in the end, you get a code that looks like this:
|
|
Notice how the div code is only in one of the table cells, the one that has the exact same width and height. This is extremely important to remember when you're coding a blog, otherwise it can get pretty confusing.
That's pretty much it for coding blogs. If you have further queries, feel free to email me (Jen). One last thing - if you're going to use this tutorial, please do NOT:
~Jen