Posted By Doteasy

Sitemaps, as the name implies, are a map of your website. There are two types of sitemaps:

  • HTML – a web page you show the structure of your website. This type of sitemap is created for visitors to your website. (Example: Doteasy Site Map)
  • XML – a file you list all URLs of your website. This type is called “Sitemap” and is created for search engine crawlers

XML Sitemaps

XML Sitemaps offer the opportunity to inform search engines about your website.

Search engine crawlers usually discover pages from links within the site and from other sites. Sitemaps are particularly helpful if:

  • Your site has dynamic content
  • Your site uses rich Ajax or Flash (not normally processed by search engines)
  • Your site is new and has few links to it
  • Your site has a large archive of content pages that are not well linked to each other, or not available through the browsable interface some areas of the website

In addition, Sitemap allows webmasters to include additional information about each URL: when it was last updated, how often it changes and how important it is, relative to other URLs in the website. This allows search engines to crawl the site more intelligently.

NOTE: Sitemap does not guarantee that web pages are included in search engines nor does it influence the way that web pages are ranked in search results. By submitting Sitemaps to a search engine, a webmaster is only helping the engine’s crawlers do a better job of crawling their site.

Sitemap Generators

You can use a sitemap generator to create your sitemap. Google has a sitemap generator for creating a sitemap for a static web site.

Other sitemap generators and services:

Manually Creating a Sitemap

You can also manually create a Sitemap based on the Sitemap protocol.

1. Create a text file and save it with a .xml extension (ie. sitemap.xml)

2. First lines of the file:

<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

3. Create an entry for each URL. The <loc> tag is required, the others are optional.

 <url>
      <loc>http://www.example.com/</loc>
      <lastmod>2005-01-01</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
 </url>

4. Last line of the file:

  </urlset>

5. Upload the file to your server and then submit it to the search engines.

Element Definitions

Element Required? Notes
<loc> Y Provide the full URL of the page, including the protocol (ie. http, https). This value must be less than 2048 characters
<lastmod> N Provide the date that the file was last modified, in YYYY-MM-DD format.
<changefreq> N Possible values include: hourly, daily, weekly, monthly, yearly and never. This is only used as a guide for crawlers and is not used to determine how frequently pages are indexed.
<priority> N Allows webmasters to suggest to search engine crawlers which pages are considered more important. Valid range is from 0.0 to 1.0 (highest). The default value is 0.5. Rating all pages on a site with a high priority does not affect search engine lists.

Guidelines and Limitations

Keep in mind when creating your Sitemap file:

  • Sitemap files have a limit of 50,000 URLs and be no larger than 10MB when uncompressed.
  • The Sitemap URL can contain only ASCII characters.
  • Sitemaps can be compressed using gzip.
  • A Sitemap can be contain a list of Sitemaps (a Sitemap index file serving as an entry point for no more than 50,000 Sitemaps)

Submitting Your Sitemap to Search Engines

There are different ways to submit your Sitemap to search engines:

1. Adding the following line to your robots.txt file

Sitemap: <sitemap_location>

The <sitemap_location> should be the complete URL to the Sitemap, such as http://www.yourdomain.com/sitemap.xml

2. Submitting directly to a search engine (aka. pinged)

  • Google – http://www.google.com/webmasters/tools/ping?sitemap=location
  • Yahoo! – http://search.yahooapis.com/SiteExplorerService/V1/ping?sitemap=location
  • Ask.com – http://submissions.ask.com/ping?sitemap=location
  • Live Search – http://webmaster.live.com/ping.aspx?siteMap=location

Replace location with the complete URL to your Sitemap, such as http://www.yourdomain.com/sitemap.xml

For example, http://www.google.com/webmasters/tools/ping?sitemap= http://www.yourdomain.com/sitemap.xml

Additional References


 
Posted By Doteasy

We will end this CSS Menu Series by learning how to turn this:

  • Home
  • Services
  • Products
  • Support
  • About
  • Contact

into this:

buttonmenu

1. Let's start with the HTML code for our CSS menu:

<div id=”mainmenu”>
    <ul>
        <li><a href=”#”>Home</a></li>
        <li><a href=”#”>Services</a></li>
        <li><a href=”#”>Products</a></li>
        <li><a href=”#”>Support</a></li>
        <li><a href=”#”>About</a></li>
        <li><a href=”#”>Contact</a></li>
    </ul>
</div>

2. Then, we will have to remove the bullets by creating a new CSS rule:

#mainmenu ul {
    list-style: none;

    padding: 0;
    margin: 0;
    }

3. Next, to get these menu items all on one line, we will insert this CSS rule:

#mainmenu li {
    float: left;
    margin: 0 0.15em;
    }

4. Now that we’ve got the menu items all lined up next to each other, we need to make the buttons. We will be using a background image to create the buttons.

#mainmenu li a {
    background: url(background.gif) #FFFFFF
    bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 9em;
    display: block;
    border: 0.1em solid #DCDCE9;
    color: #0D2474;
    text-decoration: none;
    text-align: center;
}


The Full CSS Code

So, to achieve the menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

    <style type="text/css">

        #mainmenu {
            width:30em
            }

        # mainmenu ul{
            list-style: none;
            padding: 0;
            margin: 0;
            }

        # mainmenu li {
            float: left;
            margin: 0 0.15em;
            }

        # mainmenu li a {
            background: url(background.gif) #fff bottom left repeat-x;
            height: 2em;
            line-height: 2em;
            float: left;
            width: 7.5em;
            display: block;
            border: 0.1em solid #DCDCE9;
            color: #8CC919;
            text-decoration: none;
            text-align: center;
            }

    </style>

</head>
*NOTE: You can specify any hover effect for these menu items, including changing the background image or the text color. Simply make a copy of the entire #mainmenu li a CSS rule and change the selector to #mainmenu li a:hover

Example, as in our image above,

#mainmenu li a:hover {
    color: #333333;
}

Resources


 
Posted By Doteasy

Creating a pop out menu is very similar to creating a dropdown menu.

We'll start by adding a nested list to our basic list menu.

<ul id="mainmenu">
    <li><a href="home.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li>

        <ul>
            <li><a href="services1.html">Service 1</a></li>
            <li><a href="services2.html">Service 2</a></li>
            <li><a href="services3.html">Service 3</a></li>
        </ul>

    </li>
    <li><a href="products.html">Products</a></li>
    <li><a href="support.html">Support</a></li>
    <li><a href="about.html">About</a></li>
     <li>

          <ul>
            <li><a href="history.html">Company History</a></li>
            <li><a href="staff.html">Staff</a></li>
            <li><a href="press.html">Press Releases</a></li>

        </ul>
    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

popout menu 1

By modifying the CSS, we can move the submenus to the right and hide them until the user hovers over one of the parent menu items. Here are the steps

1. Set the position of the main menu items to relative.

    #mainmenu li {
        position:relative;
          }


2. Position the submenus absolutely and hide the submenus.

    #mainmenu li ul {
        position: absolute;
        width: 150px;
        left: 118px;
        top: 5px;
        display: none;
        }


3. Style the submenu options.

    #mainmenu li ul li {
        font-size: smaller;
        }

4. Display the submenu when the user hovers over the main option.

    #mainmenu li:hover ul {
        display: block;
        background-color: #8CC919; /*for IE7*/
        }

Note: the background-color declaration is necessary for Internal Explorer 7. Without it, the submenus can disappear while the user is hovering over them.

5. Position a tags relatively. This is another fix for Internet Explorer 7. If the a tags are left statically positioned, then they won’t fill the full width of their parent list items and the menus will only work when users hover over the text of the link.

    #mainmenu a {
        position: relative; /*for IE7*/
        }

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

        <style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu {
                margin: 10px;
                width: 120px;
                font-family: Tahoma;
                }
 
            #mainmenu li {
                position:relative;
                display: block;
                border: 1px solid #333333;
                border-top: 0px;
                }
           
            #mainmenu li:first-child {
                border-top: 1px solid #333333;
                }

             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                position: relative; /*for IE7*/
                }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }

            #mainmenu li ul {
                position: absolute;
                width: 130px;
                left: 79px;
                top: 5px;
                display: none;
                }

            #mainmenu li ul li {
                font-size: smaller;
                }

            #mainmenu li:hover ul {
                display: block;
                }

        </style>

    </head>

And your pop-out menu now looks like this:

popout menu 2

Resources:

Next week, we will end the CSS Navigation Menu series with "Menus with Background Images"


 
Posted By Doteasy

Summertime is all about family barbeques, pool parties and road-trips, and nothing captures all the special moments better than the good old home video. But how do you add these videos onto your website to share with family and friends?

The Free and Easy Way

There are many ways to add videos to your Doteasy website or blog. The easiest and more affordable way is to use a free video hosting service, such as YouTube.

Some other video hosting service providers include:

Advantages of using a free video hosting service:

  • they take care of all video conversions for you
  • your video is hosted on their server (you don’t have to worry about bandwidth usage)

Disadvantages:

  • you don’t have control over logos, ads and other videos they place on your video

How to Proceed?

Let’s use YouTube as an example.

1. Signup for an account on YouTube.

2. Upload your video. YouTube will convert your video into web-friendly.

3. Once your video is converted and added onto YouTube, you will be given two codes: URL and Embed.

  • To create a link from your website or blog to your video on YouTube, simply copy and paste the URL code to your webpage.
  • If you want to embed the video on your website or blog, then copy and paste the Embed code onto your webpage.

YouTube

The Do-It-Yourself Way

The Free and Easy way might not be the best solution for you if:

  • you do not want to promote another company on your website
  • your video doesn’t fit the guidelines or limits of the free services
  • you just don’t want to look like an amateur

If this is the case, you may want to look into using a Flash video player on your website to play your videos. With these options, you will be hosting your videos on your web hosting account, so we recommend upgrading to the Doteasy Unlimited Hosting plan - it offers unmetered monthly bandwidth usage!

Some of the Flash video players you can check out:

a) Free
b) Commercial (purchase required):

 
Posted By Doteasy

There was a time with it was necessary to use JavaScript to create dynamic menus. But, the wide support of the :hover pseudo-class has changed that.

To create the dropdown menu, we will first need to add a nested list to our basic list menu.

<ul id="mainmenu">
    <li><a href="home.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="support.html">Support</a></li>
    <li><a href="about.html">About</a>
        <ul>
        <li><a href="history.html">Company History</a></li>
        <li><a href="staff.html">Staff</a></li>
        <li><a href="press.html">Press Releases</a></li>
        </ul>

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

dropdown menu 1

By modifying the CSS, we can hide the submenus until the user hovers over one of the parent menu items. Here are the steps:

1. Set the position of the main menu item to relative.

#mainmenu li {
    position: relative;
    }

2. We will also need to set the position of the submenus to absolute. Submenus are contained in the ul elements within the li element.

#mainmenu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: -3px;
    top: 22px;
    }

3. Hide the submenus by adding the display:none; to the submenu rule.

#mainmenu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: -3px;
    top: 22px;
    display: none;
    }

4. Style the submenu options. We can turn the top border off for all but the first submenu item with the :first-class pseudo-class.

#mainmenu li ul li {
    width: 150px;
    font-size: smaller;
    border-top: none;
    }

#mainmenu li ul li:first-child {
    border-top: 1px solid #333333;
    }

5. Display the submenu when the user hovers over the main option. Modern browsers allow the :hover pseudo-class for almost all elements, including list items.

#mainmenu li:hover ul {
    display: block;
    }

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>

        <style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu li {
                position:relative;
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }

            #mainmenu li {
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }
 
             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }

            #mainmenu li ul {
                position: absolute;
                margin: 0px;
                padding: 0px;
                left: -3px;
                top: 25px;
                display: none;
                }
           
            #mainmenu li ul li {
                width: 150px;
                font-size: smaller;
                border-top: none;
                }

            #mainmenu li ul li:first-child {
                border-top: 1px solid #333333;
                }

            #mainmenu li:hover ul {
                display: block;
                }

        </style>

    </head>

And your dropdown menu now looks like this:

dropdown menu 2

Resources:

Next time, we will take a look at pop-out menus.


 


 
Google

Recent Entries
 
Category
 
Latest Comments
 
Archives
 
Free Tools and Applications
 
Doteasy Knowledge Base
 
 
Links
 
Doteasy Reviews
 
Visitors

You have 2047630 hits.

 
$0 Web Hosting

$0 Web Hosting
 
 

Add to Technorati Favorites



Add to Google Reader or Homepage

Add to My AOL

Add to netvibes

Subscribe in Bloglines

Powered by FeedBurner