Sitewide Dots

Click to watch video clip

The 18 Sitewide Dots that you'll see on your home page (and every other page) allow you to add common content to your entire site, with just a few clicks of your mouse. (Depending on the design you selected, you may see fewer.)

As you add content to the various dots, your pages will begin to "fill up" with text, code and images that are common to every page.

Some of the common content that you might want on every page of your site is...

It's easy to remove sitewide common content from a particular page. For instance, you added an AdSense ad unit just below the first paragraph, but don't want that ad unit on an affiliate product sales page.

Simply click on the red just to the left of the dot's name (in this case, "Below First Paragraph").

Red minus sign

Clicking hides the content in BlockBuilder (and removes it from the published page), and the red minus symbol becomes a red +.

Red plus sign

Click on the + if you want to put the sitewide content back on this page.


Below is a discussion about each Sitewide Dot, including what it's best used for.

Top of Header Sitewide Dot

Click to watch video clip

The Top of Header Sitewide Dot is best used for horizontal navigation...

Anguilla-Beaches.com horizontal nav

To create your horizontal navigation, you'll need to build the pages that you want to link to. Once they're all built, copy the following code and paste it into a text document.

<div class="ExtraNav">
<ul>
<li>
<a href="http://www.yourdomainname.com">Home</a>
</li>
<li>
<a href="http://www.yourdomainname.com/aboutus.html">About Us</a>
</li>
<li>
<a href="http://www.yourdomainname.com/contactus.html">Contact Us</a>
</li>
<li>
<a href="http://www.yourdomainname.com/privacypolicy.html">
Privacy Policy</a>
</li>
<li>
<a href="http://www.yourdomainname.com/site-concept-keyword-blog.html">What's New!</a>
</li>
</ul>
</div>
Directions for Use
  • Copy the code above and paste it into a text document.
  • Change the code for your site's domain name and file names. Change the link text if required.
  • Save the code. Copy it.
  • Drag a Raw HTML Block to the Top of Header Sitewide Dot.
  • Paste the navigation code into the text box in the block.

In your text document, change "yourdomainname" to your site's domain name. Then change the file name for each link to the file name that you used.

You can also switch the order of the links.

When you're done, save the code and copy it.

Back in BlockBuilder, drag a Raw HTML Block to the Top of Header Sitewide Dot. Paste the code into the Raw HTML Block.

Preview the page to see what the navigation will look like.

Build this page to save your changes. The new horizontal navigation will now appear on every existing page and every new page of your site.

If you don't want to have horizontal navigation at the top of your pages, leave the Top of Header Sitewide Dot empty.

Tips

Bottom of Header Sitewide Dot

Click to watch video clip

Directions for Use
  • Drop a Text Block on this dot and add the text you want to appear on your Header Image.

The Bottom of Header Sitewide Dot can be used to add a logo (instead of adding one to the Header Image itself).

Or you can use it to add a tagline (a line of PREselling text about your site).

Another option is your site's domain name. Use this dot for the domain name to free up the logo you created in Site Designer to become a PREselling line of text.

Note that any text you add to this dot may display differently in various browsers. So the effect you want may be lost for some visitors.

We recommend that you use Site Designer to add a logo to your Header Image, or upload an image with the logo (and tagline, if desired) already added to it.

If you do decide to add a logo or tagline via the Sitewide Dot, be sure to test it in all browsers on both PCs (Windows) and Macs.

If you want to have your horizontal navigation here, use this code...

<div class="ExtraNav" style="margin-top:150px;">
<ul>
<li>
<a href="http://www.yourdomainname.com">Home</a>
</li>
<li>
<a href="http://www.yourdomainname.com/aboutus.html">About Us</a>
</li>
<li>
<a href="http://www.yourdomainname.com/contactus.html">Contact Us</a>
</li>
<li>
<a href="http://www.yourdomainname.com/privacypolicy.html">
Privacy Policy</a>
</li>
<li>
<a href="http://www.yourdomainname.com/site-concept-keyword-blog.html">What's New!</a>
</li>
</ul>
</div>

Note: You'll have to change the 150px to whatever number puts the navigation where you want it on the header image.

Tip

Top of Nav Column Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Raw HTML Block to this dot and paste in AdSense or other ad code.

    Or drag a What's New Box Block.

    Or drag a Newsletter Form Block.

    Or drag a Social Block, select Facebook Like, and then select a button created in Face It! (width less than 180px).
  • Add more than one block, if desired.

The Top of Nav Column Sitewide Dot is the place for small ads (e.g., AdSense Link Units) or your What's New Box or Newsletter Form, anything small that you want on every page.

This dot is also a good location for a Facebook Like button that asks for a site Like (not a page Like). Ensure that the button is the correct type for the width of the column.

See the Face It! Like Buttons help for a discussion on the best places to put your Like buttons.

Click to watch video clip

The NavBar Sitewide Dot comes pre-populated with the code that will display your Tier 2 page links, once you begin building those pages. This applies only to templates that have the vertical navigation. Some have only horizontal navigation.

You'll see a sample NavBar in this position as you build each page. On the live page, your visitors will see the actual NavBar.

If you want to add some short text that introduces the NavBar, place it in the Top of Nav Column Sitewide Dot, discussed just above.

If you prefer to use horizontal navigation, remove the NavBar from this Sitewide Dot. If you change your mind later, you can always add it back with the Navigation Bar Block.

Bottom of Nav Column Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Raw HTML Block to this dot and paste in AdSense or other ad code.

    Or drag a What's New Box Block.

    Or drag a Newsletter Form Block.

    Or drag a Social Block, select Facebook Like, and then select one of the buttons created in Face It! (width less than 180px).
  • Add more than one block, if desired.

The Bottom of Nav Column Sitewide Dot is the place for small ads (e.g., AdSense Link Units) or your What's New Box or Newsletter Form, anything small that you want on every page.

This dot is a good location for a Facebook Like button that asks for a site Like (not a page Like). Ensure that the button is the correct type for the width of the column.

See the Face It! Like Buttons help for a discussion on the best places to put your Like buttons.

Above H1 Headline Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Raw HTML Block to this dot and paste in AdSense for Search code.

    Or drag a Social Block, select Facebook Like, and then select one of the buttons created in Face It!.

The Above H1 Headline Sitewide Dot is a great place for an AdSense for Search tool.

You will not be able to create an AdSense for Search tool until you're accepted into the AdSense program, which will require at least 20 pages of content, so that Google staff can determine if your site is good enough to have ads on it.

Don't place an AdSense Ad Unit here. You don't want your ads to be more prominent than your main headline or the content. A large ad block here could do that. Stick with a search tool.

This is a location to add a Facebook Like button. However, a better location for this is the Above Socialize It! Sharing Sitewide Dot (see below).

See the Face It! Like Buttons help for a discussion on the best places to put your Like buttons.

Below H1 Headline Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Raw HTML Block to this dot and paste in AdSense for Search code.

The Below H1 Headline Sitewide Dot can be used for an AdSense for Search tool, instead of having it above the headline (see Above H1 Headline Sitewide Dot, just above).

Do not put an AdSense ad block here.

You will not be able to create an AdSense for Search tool until you're accepted into the AdSense program, which will require at least 20 pages of content, so that Google staff can determine if your site is good enough to have ads on it.

If you want to have an ad block near the top of the content, use the next Sitewide Dot (Below First Paragraph) to include it on all of your pages.

Below First Paragraph Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Raw HTML Block to this dot and paste in AdSense or other ad code.

Use the Below First Paragraph Sitewide Dot to add a rectangular or square AdSense ad block (or one from another ad service) to your pages.

This ensures that your visitor sees some content before the ad, and helps with the ad's contextual targeting.

It's best to left- or right-align the ad and wrap content around it. To do that, paste the following code into the Raw HTML Block and put your AdSense code in the middle...

<div class="AdSenseBoxLeft">
AdSense code goes here
</div>

If you want the ad on the right, change "AdSenseBoxLeft" to "AdSenseBoxRight."

Above Socialize It! Sharing Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Social Block to this dot, select Facebook Like, and select a button created in Face It!.

    Or drag a Social Block and select Facebook Comments.

    Or add both.
  • Or drag a Raw HTML Block to this dot and paste in AdSense or other ad code, if you want an ad here.

The Above Socialize It! Sharing Sitewide Dot is the optimal location for a Facebook Like button that asks for a page Like. It's also the place for a Google +1 button.

Since your visitors have just been wowed by your content, now is the time to ask them to vote on it and to let their friends know about it.

See the Face It! Like Buttons help for a discussion on the best locations for Like buttons.

Another option for this dot is a Facebook comments box, which you set up with Face It!.

Your visitors are ready to comment on your content, or may have a question after reading something on the page.

This dot is also where you'd place an AdSense ad if you want one at the end of your content, when visitors are looking to take action.

You can place the Like button, Google +1 button, and comments box in this dot. However, don't add the Like button and/or comments and an AdSense ad. Having conflicting options could end up splitting the action your visitors take, with the possibility that neither a social action nor AdSense will do well.

Socialize It! Sharing Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Social Block to this dot and select Socialize It! Sharing.

This is where the Socialize It! Sharing 2-pack or 6-pack button bar goes, if you want it on every page of your site.

You need to have set up Socialize It! to have access to this option.

Below Socialize It! Sharing Sitewide Dot

Click to watch video clip

Use the Below Socialize It! Sharing Sitewide Dot for any sitewide content that you want at the bottom of the page, such as an AdSense ad block. Remember, however, that placing AdSense ad units that far down the page can result in lower income due to fewer clicks and lower earnings per click.

Top of Extra Column Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Social Block to this dot, select Facebook Like, and select a button created in Face It! (width less than 180px).

    Or drag a Newsletter Form Block.

    Or drag a What's New Box Block.

    Or drag a Raw HTML Block and paste in AdSense or other ad code.
  • Or combine two or more of them.

The Top of Extra Column Sitewide Dot is an excellent location for a Facebook Like button for a site Like. Ensure that the button is the correct type for the width of the column.

See the Face It! Like Buttons help for a discussion on the best locations for Like buttons.

Other possibilities are your Newsletter Form and/or a What's New Box (if you didn't place either in the Nav Column), and/or a 160x600 AdSense ad block.

Middle of Extra Column Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag one or more Headline Blocks, Text Blocks and Raw HTML Blocks to create a mini-site navigation on every page.
  • Or drag a Raw HTML Block and paste in AdSense or other ad code.

Use the Middle of Extra Column Sitewide Dot for mini-site navigation (e.g., to your site's most important sections).

Add Text and Image blocks (even Headline Blocks) to create the links to each section/page.

Other options are a 160x600 AdSense ad block, and your Newsletter Form, if you didn't add them to your Top of Extra Column Sitewide Dot.

Bottom of Extra Column Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Social Block to this dot, select Facebook Like, and select a button created in Face It! (width less than 180px).

The Bottom of Extra Column Sitewide Dot is a good location for a Facebook Like button for a site Like. Ensure that the button is the correct type for the width of the column.

However, if you placed one in the Top of Extra Column Sitewide Dot, don't add one here (place it in the Nav Column instead).

See the Face It! Like Buttons help for a discussion on the best locations for Like buttons.

Above Bottom Nav Sitewide Dot

Click to watch video clip

Anything that you'd like to have on every page, but is not that important to the visitor's experience on your page, you can place in the Above Bottom Nav Sitewide Dot.

It's best not to put ads here, as few visitors will click on an ad this far down the page.

Bottom Navigation Sitewide Dot

Click to watch video clip

The Bottom Navigation Sitewide Dot is best used for horizontal navigation, linking to non-content pages of your site (About Me, Contact, Privacy Policy, etc.).

To create your horizontal navigation, you'll need to build the pages that you want to link to. Once they're all built, copy the following code and paste it into a text document.

<div class="ExtraNav">
<ul>
<li>
<a href="http://www.yourdomainname.com">Home</a>
</li>
<li>
<a href="http://www.yourdomainname.com/aboutus.html">About Us</a>
</li>
<li>
<a href="http://www.yourdomainname.com/contactus.html">Contact Us</a>
</li>
<li>
<a href="http://www.yourdomainname.com/privacypolicy.html">
Privacy Policy</a>
</li>
<li>
<a href="http://www.yourdomainname.com/site-concept-keyword-blog.html">What's New!</a>
</li>
</ul>
</div>
Directions for Use
  • Copy the code above and paste it into a text document.
  • Change the code for your site's domain name and file names. Change the link text if required.
  • Save the code. Copy it.
  • Drag a Raw HTML Block to the Bottom Navigation Sitewide Dot.
  • Paste the navigation code into the text box in the block.

In your text document, change "yourdomainname" to your site's domain name. Then change the file name for each link to the file name that you used.

You can also switch the order of the links.

When you're done, save the code and copy it.

Back in BlockBuilder, drag a Raw HTML Block to the Bottom Navigation Sitewide Dot. Paste the code into the Raw HTML Block.

Preview the page to see what the navigation will look like.

Build this page to save your changes. The new horizontal navigation will now appear at the bottom of every existing page and every new page of your site.

If you don't want to have horizontal navigation at the bottom of your pages, leave the Bottom Navigation Sitewide Dot empty.

Tips

Below Bottom Nav Sitewide Dot

Click to watch video clip

Directions for Use
  • Drag a Text Block to this dot and enter the text and links you want on every page.

The Below Bottom Nav Sitewide Dot gives you the opportunity to place sitewide content that may be required on your pages, but that you don't want to focus your visitor's attention on.

An affiliate income disclosure is one of those. If you sell affiliate products, you need to have an affiliate disclosure (and perhaps a link to a disclosure page) on your pages.

This is a location where you can add it to satisfy government requirements, while at the same time making it less important than the rest of the content on the page.

If you prefer to only put the disclosure on pages where you sell affiliate products, turn your disclosure into a Reusable Block instead, and add it to just those sales pages.

A disclaimer (e.g., for medical or financial advice) is another option.

Click to watch video clip

Directions for Use
  • Drag Text and/or Raw HTML blocks to this dot to create a custom Footer.

Build the footer here in this dot, by dragging over a Text Block and, if necessary, a Raw HTML Block.

Note

If you add navigation links to your Bottom Navigation Sitewide Dot (discussed above), don't also add navigation links to the Footer. Use it just for your copyright information.

Tip

A Permanent Shortcut

SiteSell Pro AJ provided some code in the forums that ensures that your copyright is always up to date. Add it to the Footer Sitewide Dot. On January 1 next year, return and make one small change (schedule it in your calendar or planner now!). Then you'll never have to worry about the copyright again.

There are two parts to this. First, click on the Head button in the top right of BB2 for any page you're editing. In the Sitewide text box, paste in this code, if it's not already there for some other purpose...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Click Save to Head.

Scroll to the bottom of that page in BB2. Drag a Raw HTML Block to the Footer Sitewide Dot. Click in the text box. Copy this code...

<p>
Copyright © <span style="display:none">2018-</span><span id="year"></span> All Rights Reserved
</p>
<script>
var currentYear = (new Date).getFullYear();
$(document).ready(function() {
$("#year").text( (new Date).getFullYear() );
});
</script>

Paste the code into the text box. You may want to open the block into a larger text box, so that you edit the code more easily.

The <span id="year"></span> span tag is what powers the year change every January 1. So don't remove it or change it.

The two parts in bold are what you'll remove on January 1 next year. Note: This only applies if you start your site in 2018. If you started it in 2017 or earlier, remove the code now, then change 2018 to the year that you started your site.

The text in italic is what you can change to say whatever you want. Add your own name or your site's name. Or give some access for reuse with a Creative Commons license of all of your site content.