Actually, I don't know what to call them. Basically, for most free blog users, you only have one page to host your blog. However, most people want it so that their blogs look like websites.
For some reason, others even want their blogs to look like those cool websites that offer online bingo services like Foxy Bingo and equally competitive websites. You can click on navigation links like profile, and then the profile shows up in the content area.
An example of a blogskin which has navigation like a website can be found here.
Originally, this was not possible for free blog users, but now, you can have many "pages" within one page (HTML file) without using DHTML or PHP, just simple HTML!
Note: This is not the only way to do it, there are many others, and this is one of the cleanest and simplest. I have to credit whoever that first thought of it, and I have made my modifications as well to improve it. Also, it might not be 100% W3 approved coding.
Starting
Well, first of all, you need to know how to make skins. If you are just a started, I suggest you take a breather course here first, and get used to making skins. I am not going to re-cover the basics.
If you know how to make skins, we will be using Notepad for this tutorial.
1. Create your base skin image, alongside with your content box.
2. Put this code in your body:
This is your start code. Here is a breakdown of what each section I deem important mean:
div id="box" = Box is what we are going to call the area where your content goes in, and this includes the main page. Take note that if you change this, you will have to change the rest of the codes accordingly later.
width, height = Width and Height of content area, in pixels.
left, top = The positioning of your content area.
If you are doing this in conjunction with my Tabling tutorial please do not add style="position:absolute; padding:5px; z-index:2; width:670; height:290; left:10; top:249; overflow: auto; ", just leave it as div id="box"
3) Links code. For your links, use this bit of code...
cursor:crosshair = The shape of the mouse cursor when you mouse over the link. If you don't want the shape of the mouse cursor to change, delete this bit.
onClick = When you click on the link, the content changes. If you are really mad, you can change this to onMouseOver, then the content will change upon mousover. I've never really tried though.
('box') = The name of your Welcome layer. The splash/main/index page. Take note that if you change this, you will have to change the rest of the codes accordingly later.
('blog') = The name of the page you are linking to. For now, we are going to assume that when you click, your blog will show up in the content area.
img src... = The image of your link. If you want your links to be text, just delete this and put the link text.
4) Your other page layer. Just now, we have added in the code for linking an image to your blog page. Here is the code for the page itself.
div id="blog" = The name of the layer you have linked to.
If you are doing this in conjunction with my Tabling tutorial please do not add style="position:absolute; padding:5px; z-index:2; width:670; height:290; left:10; top:249; overflow: auto; ", just leave it as div id="blog" visibility:hidden;
5) Simple eh? So now you will have a page where you first see a welcome note in the content area, then when you click on a link, the content area will change into another page! And all using one HTML page and no DHTML!
If you want to add more links, simple repeat steps 3 and 4, remember to change the id names respectively for both as well.
I hope this tutorial has helped =)
