Includes in Your Template
Contents
Includes in Your Template
Don't think of a web page as a single page of HTML. That's what a search engine sees, yes. And your human visitors see a single page in the browser, yes. But...
You "assemble" a web page like you would a jigsaw puzzle. The main piece, your HTML template file, contains the overall HTML structure of every page. You enter the page-specific information into it.
This file also contains places for you to place sitewide pieces of HTML (or other coding) into it. Your selected template comes with SBI! Include tags coded into masterTemplate.html.
This help discusses what to put into each Include, or, in some cases, what's already in there.
When you view masterTemplate.html in your browser or through your HTML editor's Preview function, you'll see the actual tag code of each SBI! Include (ex., ***z-below-paragraph-1.shtml***) instead of seeing the contents of the SBI! Include file. So...
To see what your page will look like with the content of all your Includes displayed, go to the WebFTP section of Site Central and click on the Quick Preview It! button. Follow the instructions on using it to view any page of your site before you upload it.
Quick Preview It! (QPI!)
Quick Preview It! shows you the masterTemplate.html properly. All images, media files and SBI! Includes will appear on the page. Functionality tags (ex., ***SOCIALIZEIT***, Face It!, Form Build It! and Content 2.0 tags) do not display with QPI!.
In the Head Section
- Copy the third-party code you want to add to the Include tag.
- Paste the code into the z-end-of-head.shtml file between the comment tags, and/or type your meta tags or other code.
- Save the file.
- Upload the file with other files. Or use Quick Upload It! to upload it after editing it.
***z-end-of-head.shtml***
You'll find this SBI! Include tag just before the </head> tag.
-
Put the CSS file reference into this Include. This will let you add other CSS files later, should you desire.
If you decide to add this reference to the Include, ensure that you place it before any Javascript code. Otherwise, your page's styling will not start to load until all the Javascript code has finished loading.
If you do add your CSS reference tag to the Include, be sure to remove it from the template, or from each page file before your final save and upload. Otherwise, you'll be referencing the CSS styling twice.
-
Use it for Javascript that you may want to remove or change later (ex., InfoLinks ad code script).
-
Use it for other coding or head tags that should appear on every page (ex., if you have a local site, you can add meta tags with your location, city, postal code, etc. If you ever move your business, you change just one file!).
-
If you're using Google Analytics, its code goes in this Include. It needs to be the last thing in the <head> section, placed just before the </head> tag. So make it the last code in this Include.
In other words, put page-specific information inside the masterTemplate.html's <head> section. This means you keep the <title> and both <meta> tags where they are, as you'll need to add different information to those tags for each page you build.
But we suggest that you remove this line of code in masterTemplate.html from the <head> section, cutting-and-pasting it into your ***z-end-of-head.shtml*** Include file (between the two comment tags)...
<link href="support-files/style.css" rel="stylesheet" type="text/css">
As mentioned above, you can add, change, or remove any other sitewide information or coding here at any time. (But page-specific information does not belong in this Include.)
Note
As mentioned above, if you're going to add Javascript references to this Include, place them after your CSS file reference. Otherwise, your site's design will not start loading until all the JS is finished loading. And Google Analytics code should be last.
Another Note: If you have two sites with AdSense ads, and want to track both sites in one Google Analytics account, Google provides special code that must go before the AdSense and Analytics code on every page of the second site. This Include is the location for it. The code will not appear on the page, but will allow Analytics to track all the pages properly.
All remaining SBI! Includes are between the <body> and </body> tags of the file...
Horizontal Navigation
- If you want the horizontal navigation at the top of your header, do nothing.
- If you want the navigation in a different location, cut (Ctrl-X/Command-X) all the code between the comment tags.
- Paste (Ctrl-V/Command-V) the code between the comment tags of your preferred horizontal navigation Include file. Save the file.
- Upload the files with other files. Or use Quick Upload It! to upload them after editing them.
This section discusses SBI! Includes for three possible locations for a top horizontal navigation menu.
-
***z-top-of-header-horizontal-nav.shtml*** between <div id="Header"> and <div class="Liner">.
This one places the horizontal navigation at the top of the header.
Important Note: This SBI! Include is the one that contains the code for the horizontal navigation.
If you would like the menu items in a different location, open z-top-of-header-horizontal-nav.shtml, and cut all the code (Ctrl-X/Command-X) between the two comment tags.
Then paste (Ctrl-V/Command-V) it into one of the other two Include files (between the comment tags). Both Includes are discussed next.
-
***z-bottom-of-header-horizontal-nav.shtml*** between </div><!-- end Liner --> and </div><!-- end Header -->.
This Include places the horizontal navigation at the bottom of the header logo, but on top of the logo.
-
***z-attached-to-bottom-of-horizontal-nav.shtml*** between </div><!-- end Header --> and <div id="ContentWrapper">
This Include places the navigation just below, and flush with, the header logo.
Only use one of the above, of course. But it's good to have all three Include tags in your template. You never know when you might want to change your top horizontal navigation location!
In the Content Column
- Copy the third-party code you want to put into a Content Column Include file.
- Paste the code between the comment tags of the relevant Include file, or type in your text or other code.
- Save the file.
- Upload the files with other files. Or use Quick Upload It! to upload them after editing them.
This section discusses the six Includes in your Content Column, including...
-
***z-above-h1.shtml*** immediately above the <h1> tag.
If you want to add an AdSense banner ad just below your header logo, add it to this Include.
If you use this ad type here, do not put your horizontal nav (discussed above) in z-attached-to-bottom-of-horizontal-nav.shtml.
The navigation and the ad will sit too close together and may conflict with AdSense Terms of Service.
-
***z-below-h1.shtml*** immediately below the </h1> tag.
This is an excellent location for an AdSense for Search search box. Many SBIers have increased their income substantially by placing the search box here.
-
***z-below-paragraph-1.shtml*** immediately after the </p> tag of your first paragraph.
This is a good location for an AdSense square or rectangle ad, inside a .AdSenseBoxLeft class (<div class="AdSenseBoxLeft">). What about AdSense channels?
If you put your AdSense code with a channel into an SBI! Include, the channel reports on the effectiveness of the location of the ad across the site. Use "URL Channels" to track each page. The downside is that you lose the fine granularity that AdSense custom channels can deliver.
Of course, you do not have to use the Include sitewide. You could create a new, different Include for each Tier 2 and its related Tier 3 pages. That would enable you to create a different channel for each Tier 2 "mini-site," so that you can track the income earned from each of these. Planning ahead pays dividends.
Be sure to add the second and following paragraphs after this tag (not before it), exactly as shown in masterTemplate.html. Otherwise, this Include will be pushed to the bottom of your page.
-
***z-above-socialize-it.shtml*** (immediately above the ***SOCIALIZEIT*** tag).
A good location for a final AdSense ad block (although cost-per-click rates are usually lower for ad units farther down the page, so your income from these units could also be lower).
See the discussion above about putting AdSense code into Includes.
-
***z-socialize-it.shtml*** (optional)
Put your ***SOCIALIZEIT*** tag into this Include, or just use the tag instead. If you think you might want to stop using Socialize It! at a later time, put the tag into an Include.
Note: Putting anything that will go "sitewide" into an Include file gives you more flexibility and protects you from having to make sitewide changes for hundreds of pages, later.
-
***z-below-socialize-it.shtml*** (immediately below the ***SOCIALIZEIT*** tag).
In the Navigation Column
- Update the z-navigation.shtml Include file every time you build a new Tier 2 page. Save and upload the Include.
- Place your newsletter opt-in form and What's New Box code in the Include above or below the NavBar to suit your preferences.
- Upload the files with other files. Or use Quick Upload It! to upload them after editing them.
This section discusses the three Includes used in the Navigation Column of your template.
-
***z-top-nav.shtml***
This top-left corner of your site is an important part of your page, an area that often catches the eye. You'll wrestle with what to put here, but make it something important.
If you want a newsletter opt-in form above your NavBar, paste the code into z-top-nav.shtml, between the comment tags.
Other examples include widgets or other snippets that take little space but provide usefulness or value to your visitor (ex., Google search box, a Facebook Like button, etc.). You could even experiment with a Google AdSense Link unit.
-
***z-navigation.shtml***
This Include already contains the code for a "dummy" NavBar. Simply replace each " # " with a Tier 2 page's URL and the dummy text with that page's button text.
If you want to group your buttons into sections, keep the <h3> tags, and replace the dummy text with your preferred heading text.
-
***z-bottom-nav.shtml***
You can place your newsletter opt-in form below your NavBar if you prefer. Follow the instructions above, pasting the code into z-bottom-nav.shtml.
You can also place ads below your NavBar. Obtain the code from the advertiser and paste between the comment tags in this Include.
In the Extra Column
- Edit z-extra-default-nav.shtml to add navigation to certain parts of your site. If you don't want this navigation, remove the code between the comment tags. Save the file.
- Add text or code in z-top-extra.shtml and/or z-bottom-extra.shtml to suit your needs. Save the file(s).
- Upload the files with other files. Or use Quick Upload It! to upload them after editing them.
This section discusses the three SBI! Includes used in the Extra Column on the right side of your template (if you're using a 2-column template, it will not have these 3 Includes).
-
***z-top-extra.shtml***
This is a prime spot to sell advertising directly to businesses.
Note: Google AdSense ads do not usually perform well in the left or right columns because the visitor tends to become "blind" to them (with the possible exception of the top-left, mentioned above).
Embed Google AdSense ads in your main content in the Content Column. You'll cover this in more detail when you reach this topic.
-
***z-extra-default-nav.shtml***
Use this for "thumbnail-image" navigation to important pages. The code has already been added for this navigation. It's effective because...
-
the image attracts attention while the caption clarifies that this is a link to pages and not an ad
-
you can group your most important Tier 2s (high traffic and monetizable) on your home page and other pages ("Related Pages")
-
you can duplicate this Include and re-name it, using it to group important Tier 2s together (ex., Related Pages when visitors are on pages about "Anguilla villas" and "Anguilla hotels").
Study anguilla-beaches.com to see how this SBIer achieves all of the above major roles for the right column (direct advertising as "Site Sponsors," "Related Pages" at the "site" and "mini-site within the site" levels), while also using it to take newsletter subscriptions.
This is, of course, not the only way to use the Extra Column, but it's an excellent use of it. Details in the tip just below.
On the other hand, don't use the Extra Column just to display an AdSense skyscraper ad. You would be better off with a simpler, 2-column site. Not only will visitors learn to ignore the ad, the targeting may be less related to the page's content and more to the content in this column.
Tip: Various groupings of pages could have variations of ***z-extra-default-nav.shtml***. For example, your home page of anguilla-beaches.com would feature important links to Anguilla Hotels, Anguilla Villas, etc.
So for any page about Anguilla villas, replace ***z-extra-default-nav.shtml*** with a new Include tag, ***z-extra-villas-nav.shtml***, which features thumbnail links to Tier 3 pages (or other important Tier 2 pages) that are specifically related to Anguilla villas.
This helps visitors navigate to pages relevant to their current location and helps engines identify "mini-theme-sites" within your niche.
If you don't want to use this navigation, open z-extra-default-nav.shtml, remove the code between the comment tags, and save the file. Upload it with the other files.
-
-
***z-bottom-extra.shtml***
Use this Include, or the one at the top of the Extra Column, for the What's New Box, which displays snippets from and links to your newly published pages.
In the Footer Section
- Edit z-bottom-navigation.shtml to change any of the navigation links at the bottom of the page. Save the file.
- Edit z-footer.shtml to change the copyright year or add other information to that part of the footer. Save the file.
- Upload the files with other files. Or use Quick Upload It! to upload them after editing them.
This section discusses the four SBI! Includes used in the Footer section of your template.
***z-above-bottom-nav.shtml***
***z-bottom-navigation.shtml***
This Include contains your bottom horizontal text navigation. To edit or add links, open z-bottom-navigation.shtml and make the changes, then save and upload the file with Quick Upload It!
***z-below-bottom-nav.shtml***
***z-footer.shtml***
This Include contains your copyright notice. Update yearly. Add anything else you want to z-footer.shtml. Save and upload/re-upload the file.
The End of the File
- Edit z-end-file.shtml to add or change tracking code. Save the file.
- Upload the file with other files. Or use Quick Upload It! to upload it after editing it.
The last SBI! Include in the template file is ***z-end-file.shtml***. Use this for tracking code that needs to go at the end of every page of your site.
If you're not ready to use a tracking system (ex., Statcounter), leave this Include as is.
When you're ready to add the tracking code, copy the code from the tracking system, paste it between the comment tags in z-end-file.shtml, then save and re-upload the file.
Bingo! You'll have sitewide tracking in 60 minutes, a perfect example of the benefits of this system of pre-located SBI! Includes.