Includes in Your SBI! Template
Introduction
Don't think of a Web page as a single page of HTML. That is what a Search Engine sees, yes. And your human visitors see a single Web page in the browser, yes. But...
You will "assemble" a Web page like you would a jigsaw puzzle. The main piece, masterTemplate.html, contains the overall HTML structure of every Web page. You enter the page-specific information into it.
This page also contains 22 places for you to place special sitewide pieces of HTML (or other coding) into it. Your selected SBI! Template comes with 21 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. Other SBI! tags (ex., ***TOC***, ***RSSIT***, ***SOCIALIZEIT*** and Content 2.0 tags) do not display with QPI!.
In the Head Section
- Copy the third-party code you want to put into this Include tag.
- Paste the code into a z-end-of-head.shtml 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 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's Asynchronous Analytics, that code should go 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">
Important
If you change the file name from style.css to another name, or add a new reference to this Include, you will need to upload using Upload Your Own HTML for at least one page to have the new files uploaded. They can't be uploaded via Quick Upload It!.
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 noted 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 be able to start loading until all the JS is finished loading. And Asynchronous Analytics code should be last.
All remaining SBI! Includes are between the <body> and </body> tags of the file...
Horizontal Navigation
- If you want the horizontal NavBar at the top of your header, do nothing.
- If you want the NavBar 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 NavBar 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 NavBar.
-
***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 nav buttons in a different location, open z-top-of-header-horizontal-nav.shtml, then cut all the code (Ctrl-X; Command-X on a Mac) 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.
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 best location for it. The code will not appear on the page, but will allow Analytics to track all the pages properly.
-
***z-bottom-of-header-horizontal-nav.shtml*** between </div><!-- end Liner --> and </div><!-- end Header -->.
This Include places the horizontal NavBar 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 NavBar just below, and flush with, the header logo.
Only use one of the above, of course. But it's good to Include all three in your template. You never know when you might want to change your top horizontal NavBar 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 NavBar 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.
If your tracking reveals to you, after a month or two, that this ad type and/or location isn't making you a good income, consider changing the ad size. Or remove the ad from this Include and add a 468 banner ad or a rectangle/square ad in z-below-h1.shtml.
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 blocks farther down the page, so your income from these blocks could also be lower).
See the discussion above about putting AdSense code into Includes.
If you want a custom Table of Contents on your home page, above your Socialize It! button bar, open your index.html file and add a custom Include tag (ex., ***home-toc.shtml***) in this same location, then create the Include file (ex., home-toc.shtml) for the TOC links.
-
***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, even thousands, 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 e-zine opt-in form and RSS 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 will wrestle with what to put here, but make it something important.
If you want an e-zine opt-in form above your NavBar, paste the code into z-top-nav.shtml, between the comment tags. You can also add ***RSSIT*** if you want to add the RSS box you designed in RSS/Blog It!.
If you want to add a custom RSS box above the NavBar, cut the RSSbox div from your template and paste it into this Include. The code to cut is...
<div id="RSSbox">
</div><!-- end RSSbox -->
To make a custom RSS box, go to...
http://help.sitesell.com/rssblog-it.html#BEHAVIOR
Scroll up the page just a bit and click on the click here for instructions on adding the above four buttons text link. The following page provides the code for each of the buttons you may want to add to the box.
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 ad.
-
***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 e-zine opt-in form and/or your RSS box 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.
-
***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 center column. You will 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 is 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 (traffic and monetizable) on your Home 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 SBI! owner 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 e-zine 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 put 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***
It's best to split functions among your Includes. For example, Anguilla Beaches could have the e-zine opt-in form in the top right Include, ads in the middle, and "Related Links" in the bottom. That gives the owner maximum flexibility.
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-bottom-navigation.shtml***
This Include contains your bottom horizontal text NavBar. To edit or add links, open z-bottom-navigation.shtml and make the changes, then save and upload the file with Quick Upload It!
This Include contains your copyright notice. Update yearly. Also 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, Tynt), 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 2 minutes, a perfect example of the benefits of this system of pre-located SBI! Includes.
You will never have to do what those who use "regular" templates do... discover that they must change hundreds of pages. A few months later, they discover they need to do it all over again at another location.