Ever wondered how to make a blog? Well, here you will learn how to do make a basic blog and a blog with a background like the ones featured on our site. First it is best to know how to make tables. If you do not know how to make tables please view our table tutorial. There you can learn the basics to tables and you will still be able to make a blog. Other than that you it is best to have some sort of program to edit your pictures to turn them into blogs. You can use a basic program like Microsoft Paint if you have to. Anyways, enjoy the tutorial. - Crystal, [webmistress]

Feel free to comment on the Tag board or send us a message to let us know what you thought about this tutorial. If you are still having trouble with this tutorial feel free to contact me. Note*- All images open in a new page.

How to make a blog

Tutorial written by Crystal

Please do not copy this tutorial.
Instead feel free to link this site to your site.

------------------------- 1. First, lets learn how to make a basic blog. Just like the example below:

Example... Example... Your text goes here! Make sure you add enough, or your box will not scroll!Your text would go here... Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the boscroll!Your text would go here... Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box won't scroll!

2. You can do this by copying (c+ctrl) this code:

<div style="width:100; height:50; overflow: auto; 
background-image:url(http://www.filenamehere.gif);
background-color: #ffffff;
border-color:#000000; 
border-style: none;
border-top-width: 1px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px;
scrollbar-face-color: #000000;
scrollbar-highlight-color:#000000; 
scrollbar-shadow-color: #ffffff; 
scrollbar-3dlight-color: #ffffff; 
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff; 
scrollbar-darkshadow-color: #000000; 
scrollbar-base-color: #000000;">
Your text goes here! Make sure you add enough, or your box will not scroll!Your text would go here... Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the boscroll!Your text would go here... Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box won't scroll!
</div>

Be sure to change the width, height, image url and colors to whatever you like. *Important- If you choose to put an image for the background make sure you also adjust the font color so that your visitors can read what is on your blog.

3. After you have done that you are finished with a basic blog and if you are happy with the results you are done with this tutorial. If you want to learn how to turn a picture in to a blog please view below.

How to make a Blog with a Background

Tutorial written by Crystal

Please do not copy this tutorial.
Instead feel free to link this page to your site.

------------------------- First it is best if you have some knowlege of how to work with tables. If you do know how to work with tables please continue. If you do not know how to make tables please view our [tables tutorial]

1. First have your picture already done in an image editor or use any picture you desire.
2. Make a table and then put the code from above in between the table tags. Depending on where you want your blog to be will depend on which part of the table you put it in. For example, I am going to be putting the blog in the lower half of the image I'm using, where it says "blog area." This is what my image looks like and just below that is what the code should look like. It is color coded to show you what is what and what goes where.

[HERE]

Here is what the code should look like:

GREEN - Table Coding

RED - Blog Coding

BLUE - Where text should be added

<table width="223" height="196" border="1" bordercolor="red" background="http://www.filenamehere.gif">
<tr><td width="150"></td> </tr><tr><td width="13" height="50">
<div style="width:100; height:50; overflow: auto; background-image:url(http://www.filenamehere.gif); background-color: #ffffff; border-color:#000000; border-style: none; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; scrollbar-face-color: #000000; scrollbar-highlight-color:#000000; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #000000; scrollbar-base-color: #000000;"> Your text goes here! Make sure you add enough text, or your box will not scroll! Your text would go here... </div> </td></tr> </table></center>

3. Then you have put the blog coding in the table set the image you want to use as the background for the table NOT the blog itself. You can do this by replacing the 'http://www.filenamehere.gif' in green, from the above code example.
4. Once you have done that adjust the size to of the blog to the size of the image. (It should be in a bold green color from the above code example.)
5. Next add adjust the colors for your scroll bar. You can change all the underline red from the above code.
6. Lastly, adjust the size of the blog itself by changing the red bold numbers from the above code example.

Here is what my example looks like when I am done:

Example... Example... Your text goes here! Make sure you add enough, or your box will not scroll!Your text would go here... Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box Make sure you add enough, or the box won't scroll!Your text would go here... Make sure you add enough, or the box won't scroll!

-------------------------

[HERE]	[HERE]
Before	After

If you like this blog and want to use it you can find it on our anime blog page.

Tutorial written by Crystal
This tutorial has not been tested

Webmistress comment: Well, that is it for the tutorial. Hopefully, I covered everything about the tables and blog part. Now it is up to you to try it yourself.

FYI- All tutorials on this site have been tested. Meaning that we ask someone who does not know how to do it to try it. If they learn how to do it without any problems we put it up on the site. If the experience any problems we rewrite the tutorial until it is right. With that said this tutorial has not been tested. If you are already familiar to blogs and tables please review this tutorial and let me know if there is anything missing or should be added. If there is any questions please ask. Thank you for taking this tutorial. - Crystal.

Terms and Conditions

Please do not copy this tutorial.
Instead feel free to link this site to your site with one of our buttons.

Credits

All Anime Images © Respective Owners.
No parts of this site may be reproduced without permission.
Layout and Content © 2007-2008 to Crystallized Anime Dreams.