• Home
• Basics
• Coding
• Graphics
• Links
• Link Me
• Site Map
• Updates

Tutorial

1. Upload your blog to the internet. Try Image Cave or 2and2 for an image host.
2. Open Notepad or another word processing program.
3. Count the number of boxes you have on your blog. Use the code beside the corresponding number on the Codes page.
4. Open Paint.
5. Open your blog.
6. Go to Image then Attributes. Make sure the Units are in Pixels. Remember the width.
7. Go back to Notepad and find the part of the code that says:
   #container { text-align: left; width: 610px; height: 500px;
8. Replace "610" with the width you found in step 6.
9. Go back to Paint. Remember the height.
10. Go back to Notepad and go back to the same code, but with your new width:
    #container { text-align: left; width: ###px; height: 500px;
11. Replace "550" with the height you found in step 9.
12. Find the part of the code that says:
    background-image: url("URLHERE"); }
    Replace "URLHERE" with your blog's URL.
13. Go back to Paint.
14. Select the Selection Tool.
15. Place your cursor over the upper left hand corner of the first text area (remember, <— this way is left, and ^ is up).
16. On the lower right hand corner of the screen, you should see two numbers separated by a comma. If you don't see the numbers, go to View then Status Bar. Remember the first number.
17. Go back to Notepad.
18. Find the part of the code that says:
    #content1 { padding: 4px; left: 010px; top: 010px;
    Replace the first "010" with the number from step 16.
19. Repeat steps 13 - 18 for the second number.
20. Go back to Paint.
21. Select the Selection Tool.
22. Select the first text area.
23. Go to Edit then Copy.
24. Leave this Paint alone and open a new Paint.
25. Go to Image then Attributes and change the height and width to "1".
26. Go to Edit then Paste.
27. Go to Image then Attribues. Remember the width.
28. Go back to Notepad.
29. Find the part of the code that says:
    #box1, #content1 { width: 190px; height: 180px;
30. Replace "190" with the width from step 27.
31. Go back to the second Paint.
32. Go to Image then Attribues. Remember the height.
33. Go back to Notepad and go back to the same code, but with your new width:
    #box1, #content1 { width: ###px; height: 180px;
34. Replace "180" with the height from step 32.
35. Repeat steps 13 - 34 for each text area after that, but move on to the next block of code. For example, the first time you do the steps, you replace the height/width and left/top for "content01" and "box01". The second time, you replace the height/width and left/top for "content02" and "box02", and so on.

Troubleshooting

If you're having trouble aligning your text areas, check out the Blog Coding Tutorial Help page.

Blog Coding Example

Blog Coding Example Code

• Home
• Basics
• Coding
• Graphics
• Links
• Link Me
• Site Map
• Updates