Monthly Archives: May 2012

Adding a Site-Map Page in LightCMS

I have not found functionality to-date in LightCMS where a site map can be printed to the main content area of a page. Most site maps that are developed for people to read (as opposed to XML maps that are designed for search spiders) simply print an unordered list to the body are of a page and then link to it within the site’s footer area.

The easiest method for accomplishing this in LightCMS that have found is to:

1) Create a new template (call it “Site-Map.html”) and template icon (call it “Site-Map.html.gif”).

2) Add the standard “main region” token to this in case you want to add a little content to the page. (If you are copying an existing template like your “Inside.html” template you might already have this tag in your file.)

<$region name="main"$><$/region$>

3) Below that token in the template code add the following global menu token:

<$globalmenu cssClass="site-map" alwaysShowChildren="true" /$>

4) Upload those to your two files to your server through FTP or the LightCMS file manager.

5) Create a page called “Site Map” in LightCMS’s content management system and assign that new template to it.

Websafe Fonts and Other Options

[quotes_right]

  • Arial, Helvetica, sans-serif;
  • ‘Arial Black’, Gadget, sans-serif;
  • ‘Bookman Old Style’, serif;
  • ‘Comic Sans MS’, cursive;
  • Courier, monospace;
  • ‘Courier New’, Courier, monospace;
  • Garamond, serif;
  • Georgia, serif;
  • Impact, Charcoal, sans-serif;
  • ‘Lucida Console’, Monaco, monospace;
  • ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
  • ‘MS Sans Serif’, Geneva, sans-serif;
  • ‘MS Serif’, ‘New York’, sans-serif;
  • ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
  • Symbol, sans-serif;
  • Tahoma, Geneva, sans-serif;
  • ‘Times New Roman’, Times, serif;
  • ‘Trebuchet MS’, Helvetica, sans-serif;
  • Verdana, Geneva, sans-serif;
  • Webdings, sans-serif;
  • Wingdings, ‘Zapf Dingbats’, sans-serif;

[/quotes_right]

Websafe Fonts

If you don’t use an HTML editor that readily reminds you of all available websafe fonts it can be hard to remember those. Here is a list of several sites that have some good reference info on this.

www.ampsoft.net/webdesign-l/WindowsMacFonts.html
www.w3schools.com/cssref/css_websafe_fonts.asp
www.fonttester.com/help/list_of_web_safe_fonts.html
web.mit.edu/jmorzins/www/fonts.html

Font Hosting Sites

Another thing to note is that if you need something a little more specific than the typical websafe font and don’t want to embed it all in a graphic, there are several font services — some free and some paid — that will serve the fonts to your website on demand.

Essentailly, all you do is put a link tag in the header of each page on which you use the font (<link href=”” />) and pull in the font as people visit your pages. Then you just call out the font in your CSS class (in your style sheet, within the <style></style> tags on your page, or inside of the style=”” attributes) like you normally would. Here are some places to find these.

Google.com/webfonts (www.google.com/webfonts)
Fonts.com (new.fonts.com/)
TypeKit.com (typekit.com/)

HTML Conditional Statements (IF IE)

IF conditions are allowed in HTML and can be a very powerful way to quickly eliminate cross-browser issues. The IF IE set of conditionals is great to have on hand and can save hours of frustration when trying to wrap up projects quickly.

Here they are:

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

Note that they are only allowed in HTML and not in CSS. IF you want to load a whole separate CSS file for IE for one reason or another you can put the link tag into the conditional as follows:

<html>
  <head>
    <title></title>

    <!--[if IE]>
      	<link rel='stylesheet' href='stylesheet.css' type='text/css' />
    <![endif]-->

  </head>
  <body> ... 

[quotes]Reference:

  1. quirksmode.org/css/condcom.html
  2. css-tricks.com/how-to-create-an-ie-only-stylesheet/

[/quotes]

Custom Title Tags for OpenCart

If you are concerned at all about SEO you won’t use OpenCart long before realizing that the out-of-the-box OpenCart software does not allow you to write page title tags that are different from the actual titles of your products. In the stock-version these two items are one and the same making it impossible to write custom title tags that look good in the search engines but don’t mess up the look and feel of your website.

The solution is actually very simple — and actually very FREE.

Just below the Meta Description field in the product admin area is the field for Meta Keywords. This tag has long been abandoned by the search engines so rendering it useless to us, until now.

Use that field in the admin area to enter all of your unique page title tags and then just do a slight modification to the header template and voila, custom title tags for OpenCart!

Here’s the code:

Edit is file: "/catalog/view/theme/YOURTHEME/template/common/header.tpl"

Replace this:

<?php echo $title; ?>

With this:

<?php if ($keywords) { echo $keywords; } else { echo $title; } ?>

Then, simply delete the useless meta keyword tag to keep things clean in the code.

SEO Tips Post Penguin

[quotes_right]Reference:

[/quotes_right]SEOMoz posted an article this week that contained seven great tips for surviving and thriving in the post-Penguin update that Google recently went live with. The article outlines the following tips in depth:

  1. Understand your link profile
  2. Learn what makes a good link
  3. Map out your crawl path / know your crawl path
  4. Know about every page type and noindex the low value ones
  5. Almost never change your URLs
  6. Setup SEO monitoring
  7. Embrace inbound marketing

In addition to presenting clear, quality pointers for webmasters and web marketers, they support their points with great visuals like charts/graphs, video tutorials, and real-world examples.

Ultimately, Penguin is all about search relevance. The better your site relates to your target market the better you will fair as SEO grows and evolves in the near future.

Printing HTML with Page Breaks

A common need for a web developer is to be able to design a web page that is intended to be printed by an end-user. Printing through the web browser’s “print” button or the JavaScript window.print feature is not too difficult, particular with the CSS properties: “page-break-before” and “page-break-after“.

div {
  page-break-before: always;
}

OR

div {
  page-break-after: always;
}

[quotes_right]
Here are some references:

[/quotes_right]

Here are the property options:

Value Description
auto Default. Insert a page break after the element if necessary
always Insert a page break after the element
avoid Avoid inserting a page break after the element
left Insert page breaks after the element until it reaches a blank left page
right Insert page breaks after the element until it reaches a blank right page
inherit Specifies that the value of the page-break-after property should be inherited from the parent element

(table content from w3schools.com)

NOTE: Keep in mind that if you have the page-break-after: always; set on a page element, even if nothing follows it on that particular page, there will always be a second page printed each time you print. If you want to stop that second page from always printing, use the page-break-before: always; property instead. Use that property any place you want the new page to START.

Running PHP Script Inside of .HTM and .HTML Files

If your site is running on a LAMP (Linux, Apache, MySQL, PHP) platform it is possible to make the server execute PHP scripts inside of a .HTM or .HTML page.  Pages with the HTML file extensions (.htm or .html) typically, when requested from the server are just sent straight to the browser by the server. With those extensions the web server assumes that there is nothing more to do than that. With Apache’s .htaccess file, however, you can alter this.

Why would you want to do that? It is common for webmasters to come across situations where a site consists entirely of static HTML files and the job does not allow for changing those extensions. Typically this is for search engine reasons.

The quick work-around for this is to add a line or to into the .htaccess file in the site’s root directory that will tell the server to look through each .html or .htm files for PHP scripting prior to sending them to the requesting browser/user. The exact lines of .htaccess code will depending upon the settings of the server that you’re running on but here are the most common.

AddHandler php-script .htm .html

or

AddType application/x-httpd-php .php .htm .html

Each simply tells the server to parse HTML pages as if they were PHP pages and generally, one of those two lines will accomplish the goal.

.HTACCESS File Resource

Here is a nice resource for common questions regarding Apache’s .htaccess file. The file can be used for supplemental PHP and general website config settings on sites that are running on Apache web server.

Link: www.htaccesstools.com

Topics include:

  • Htpasswd Generator
  • Htaccess Authentication
  • Prevent hotlinking of images
  • Block IPs with .htaccess
  • Block hitbots with .htaccess
  • Error Document
  • Redirection by Language

Managing an Ambiguous Brand

[quotes_right]One famous example of search ambiguity is Apple – are searchers looking for the corporation that sells computers, iPhones, iPods, and iPads, or are they searching for the fruit?[/quotes_right]

This article on Search Engine Watch covers the details of managing an ambiguous brand, but it also contains some nice points that apply to any brand. What happens when a searcher is quickly glancing down through the search results pages? How do you attract clicks that are relevant to your site’s content?

Nine tips for managing an ambiguous brand … Read full article.

How To Make Money Online

Here is a great little list that I came across that is made up of 21 items that pertain to general rules of making money online. They are a great starting point for anyone considering an online business.

  1. The first step is to stop Googling things like, “how to make money online.” Not because you shouldn’t want to make money online, but because the stuff you’re going to find by doing that is going to help youlose money online. Sort of like asking a casino owner how to make money in Vegas…
  2. Don’t pay anyone for simple and proven instructions on how to achieve this goal. In particular, don’t pay anyone to teach you how to write or sell manuals or ebooks about how to make money online.
  3. Get rich slow.
  4. Focus on the scarce resource …

Read the rest of the article here: http://sethgodin.typepad.com/seths_blog/2012/05/how-to-make-money-online.html