Group's posts with tag: blog background
 Let's first take a look at the table code that will be used in this tutorial.
----------------------------------------------------------------------------------------------------
<table align="center" background="Border Image URL" bgcolor="" border="0" cellpadding="0" cellspacing="10"> <tbody> <tr> <td bgcolor=""> <table align="center" bgcolor="" border="0" cellpadding="20" cellspacing="0"> <tbody> <tr> <td background="Background Image URL" bgcolor=""> </td></tr></tbody></table></td></tr></tbody></table> -----------------------------------------------------------------------------------------------------
To begin: Copy and paste this code into a WordPad or NotePad so you can insert your [image URL's] in the red area above in the code for the border & background.
For this demonstration: These are the two images being used.
 [Border] [Background]
This would be the [Direct Link] from Photobucket to insert for your "Image URL".
For Example:
http://i202.photobucket.com/albums/12345/UserId/Tutorial/background.jpg
When you have selected both your border and background images, you are now ready to go to your homepage and "click"
on [Add To Blog] to start your entry.
The first thing that you need to do is "click on the box" to put a "check mark" in the [Edit HTML].
Now you are ready to paste the table code that you have prepared for your border & background.
Then "Click" [Preview & Spell Check] to preview the border and background that you have chosen.
This is what you will see, a tiny background with a border but don't panic, you have done nothing wrong. This is how it's suppose to look at this point.
If you don't like the border and background: "Click on the box" to put a "check mark" in the [Edit HTML]
Remove the "Image URL" and replace with another picture/color "Image URL" of your choosing.
Then "click" [Preview & Spell Check] to preview and see your changes.
When you have finished selecting your border and background.
Then "Click" [Save as Draft]
In the next picture: "click" on Edit/Publish
In the next picture: "Click" in the center of the little background, then go to the icons to choose your font style, size & color.
"click" on the background again.
 Begin typing your text: (You might have to highlight the first few words and then choose font style, size & color again to get it set). The background will expand as you enter your text.
Highlighted text: Select font style, size & color and then click next to what you have highlighted and the text should change. If not, highlight again and repeat steps.
Let's add a picture to your blog. Click on the icon to add a picture, select the position and then drag it to where you want it placed at on your page.
In the next picture: I have positioned the image to the left with text on the right side of the picture.
Picture aligned to the right with text on the left.
Each picture that you add will position itself at the top of the page and you will need to drag the picture into the desired position within your blog. The alignment will be based on what position that you chose. (Align Left, Align Center, Align Right)
Here are some examples of a background image with a border.
I have given you examples on how to add a bordered background that expands with whatever text and pictures that you enter until you are finished composing your blog. I have also shown you how to add pictures within your blog and how to position them within this tutorial.
I created this tutorial using the table code with a white background and black border. And this is....
The End
| |
| |
|
