Before you begin, make sure your brain is in HTML mode. From here out, it is assumed that you understand HTML at the source level. If you don't know HTML very well but want a very custom look to your site, we recommend locating a professional HTML developer to assist you. Editing the HTML for your ranking pages is done through the administrative script. Just select the Edit autorank.html function from the first drop down menu in the administrative interface.
Before you even begin working on your HTML in the administrative interface, we highly recommend that you layout how you want your ranking page to look. This can be done with your normal method for creating HTML pages. Once you have a look that you are satisfied with, save the HTML so you can work with it later in the adminisrative interface. Take a moment now to look over your HTML so you are sure you know how it works. The better you understand your HTML now, the easier it will be for you to set it up in the administrative script later.
When you get to the HTML editing interface you will be presented with three large text boxes. They will be labeled Header, Template, and Footer. This is where you will place all of your HTML for the page you are working on. The first time you view this page, the default HTML that is included with the software will be displayed. You should look this over to get a general idea of how things work. Add a few test accounts to your toplist, then rerank the list so you can see how the HTML is written to the page. From there, you can begin making changes to give the ranking pages your own look. Header In this box you should enter all of the HTML that you want to use up until the listing of ranked sites begins. On a simple page this will usually include the title and body tags, and any HTML that you want to appear at the top of the page. Because the HTML is completely up to you, you can make it as simple or complex as you like. Template In this box you will enter the HTML for a single ranked site. This HTML will then be used for each of the accounts ranked on the selected page. This HTML will generally include the site title, description, number of hits, and a link to the site. Footer In this box you should enter all of the HTML that you want to use after the listing of ranked sites has ended. On a simple page this will usually include any HTML that you want to appear at the bottom of the page. Because the HTML is completely up to you, you can make it as simple or complex as you like.
The template HTML is what will control how each of the ranked sites will look on your page, and this portion of your HTML will contain several template values. Template values can be recognized within HTML because they are surrounded by #%%# characters. For example, using #%TITLE%# in the template box will tell the software to replace #%TITLE%# with the site title for the account it is currently printing to the HTML file. This section will explain each of the template values that you can use, and how you go about replacing your HTML with them so you get the correct display. We'll start out by explaining the available template values.
Now that each of the template values has been explained, we will give a simple example of how you can take your HTML and insert the template values in the correct locations. Say that you want your list of ranked sites to look like the following:
What you need to do is look at your HTML and detemine what tags will generate one of those ranked sites. In our case, the HTML we have pulled out is:
1
|
Site Title |
Description
152/189
|
1
|
#%TITLE%# |
Description
152/189
|
#%OVERALL_RANK%#
|
#%TITLE%# |
Description
152/189
|
the site, #%HITS_IN%# for the in hits, and #%HITS_OUT%# for the out hits.
#%OVERALL_RANK%#
|
#%TITLE%# |
#%DESCRIPTION%#
#%HITS_IN%#/#%HITS_OUT%#
|
Note that this is not all of the HTML you need to use to get this look. In order to get the table started out correctly, and finish it correctly, we need to have some HTML in the header and footer. In this example we would use the following code for the header.
Once you have a template figured out, it's time to bring all of your HTML together. This is where planning ahead will come in handy. There are things you need to consider here, such as when to open and close an HTML tag. For example, if you want all of your ranked sites listed in a 600 pixel wide table in the center of your page, you will need to start the table in your header and close out the table in your footer. Take a few minutes to think about how your HTML works, especially if you are using tables in your page. If you're pretty sure you've got everything laid out how you want it, have your HTML seperated into header, template and footer, and have setup the template values, you're ready to insert into the administrative script. Just cut and paste the HTML you have created into the text boxes, and then save the HTML. You can then rerank the list and see how things look. Don't get too frustrated if you don't get it right away; getting your HTML just right can take some tweaking. |