Neopets Blog Tutorial

Blogs for your shop or for your gallery, are almost a must for any site. Sometimes the coding can get a bit confusing. A lot of different coding is out there. Some work in some browsers and not in others. Fire Fox seems to be the browser that most have problem coding for. One thing to remember is to not make it harder than it really is. Don't over think it. Coding for all browsers is not as hard as most think.

I am going to so you how to code a blog so it works in all browsers. Its quick and simple, as long as you are familiar with basic table coding. You should catch on quick.

First you will need to make a blog. ( like the one I have below ). A must have is a designated text area. You can plainly see mine in the faded area. This will be the area that needs to scroll. Next once your blog is complete you will need to upload it to the web. Just like any other image.

Place your image in a basic MS paint program and mark where you would like your tables to be. It isn't necessary, but I sure helps with any tables. I even go a head and add in the the Width and Height in each box. Makes everything move a lot smoother and quicker once you get that out of the way.

So now you can begin to add the coding for the tables. Mine looks like this:

This is the basic table coding. I put "text area" in the area I want the scroll box appear. This way I don't loose it. I am really bad about forgetting which table cell the scroll box was meant to go in. So its always a good idea to add something in that area to make sure you don't loose that cell in all the coding.

Now we need our scroll box coding.

Did I loose you yet? That is ok, I'll explain it.

  • The first DIV goes at the start of your table. So this is the first part of all your coding.
  • Next (under the ---) is the coding that is to be added to the table cell area you wish to scroll.
  • Change the ### to the correct Width and Height.
  • The last DIV (after the second ---) goes at the end of the whole table.

    Also you will notice that I added the scroll bar coding. Feel free to make the scroll bar colors match your blog. I know in some browsers you can not see the colorful scroll bars, but in some you can. So its always a good rule of thumb to go ahead and add a scroll bar. If your browser can not see the scroll bar try to match the background of your blog.
    In other words take the background color of the scroll box area and apply it to all of the scroll bar coding except the "arrow". Leave that black. Not very colorful, but it will match and look good in all browsers. Now apply all that you have learned an yours should look something like mine.

    Finally you have the finished product. Your blog!! So here is mine all complete.

    YOUR TEXT WILL GO HERE TO MAKE THE BOX SCROLL














    Blog by KeliJo.net



    Do not redistribute this guide. If you do find it helpful that is awesome, but please do not hotlink this page or call it your own.