July 3, 2009 by 5 Comments

CSS Menu – How to Create a Multi-color Navigation Menu

What if you want to make one link in a CSS menu a different color from the rest of the links?

Most CSS menus contain one color for the background, another color for the link text and another for the hover effect. My client wanted one of the links to stand out from all the others so visitors’ eyes would get drawn to it and take action.

See the live multi-color navigation menu at: http://www.unitcoins.us

Here’s how the multi-colored menu was created:

1. Here’s the original html for the left menu (“request a quote” link only)

White text on a blue background with a red hover color


<div id="leftnav">
<ul id="navlist">
<li id="active"><a href="http://www.unitcoins.us/" id="current">Home</a></li>
<li><a href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
</ul>
</div>

2. Here’s the original css for the left menu


#leftnav {
width: 170px;
position: relative;
margin-left: 5px;
margin-top: 20px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#leftnav a
{
display: block;
padding: 3px;
width: 160px;
background-color: #5A79A5;
border-bottom: 1px solid #eee;
}

#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#leftnav a:hover
{
background-color: #990000;
color: #fff;
}

3. Here’s the html for the multi-colored navigation menu

Blue text on a white background with a red hover color.
A class called “request” was added.


<div id="leftnav">
<ul id="navlist">
<li id="active"><a href="http://www.unitcoins.us/" id="current">Home</a></li>
<li><a class="request" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
</ul>
</div>

4. Here’s the CSS for the multi-colored navigation menu


#leftnav {
width: 200px;
position: relative;
margin-left: 5px;
margin-top: 20px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#leftnav a
{
display: block;
padding: 3px;
width: 160px;
background-color: #12366A;
border-bottom: 1px solid #eee;
}

#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #CC3300;
color: #fff;
}
#leftnav a.request
{
color: #12366A;
background-color: #FFF;
}

Resource
Pacfic Wings Multi color Menu

*********************
Need a Customized Design or Redesign for your Web Site?
Select one of my Web Site Design Packages

Filed Under: CSS, Web Design Tagged With: ,
June 17, 2009 by 2 Comments

CSS3 – Kick Your Design Up a Notch

Cascading Style Sheets Level 3 or CSS3 is the next stage CSS. It offers greater design flexibility, faster completion time and easier maintenance. The problem is internet browsers like internet explorer (which most people use) won’t be able to see the new features..yet. This means you’ll need to create extra CSS (ie 2 style sheets) which takes a whole lot more work to implement. Also CSS3 features have not been released so your style sheet will not validate making it difficult to find any errors.

Features of CSS3

* Selectors
* Multi-Column Layout
* Text Effects and Layout
* Paged Media and Generated Content
* First-Letter and First-Line Pseudo-Classes
* Ruby

Here are 5 techniques to immediately implement in your future web designs:

5 CSS3 techniques

Read these 2 articles to look at some of the advantages of CSS3

Take your design to the next level

CSS3 advantages

So should you use CSS3 in your future designs?

If you are a professional web designer you can implement the features to show other designers what’s possible. For regular computer users I would hold off incorporating CSS3 features until the main browsers correctly render your designs otherwise they will look horrific.

Resource
Everything you need to know about CSS3

**********
Looking for a professional, attractive, search engine friendly design?

Please visit Affordable Web Site Design

Filed Under: CSS Tagged With: ,
May 5, 2009 by 2 Comments

Blog Marketing – 10 advanced strategies to attract web traffic

My previous article discussed the top 10 ways to attract web traffic to your blog however there are many other strategies you can also use that are also very effective. The key is try a few strategies that work well for you then focus on using them consistently.

10 advanced strategies to attract web traffic to your blog

1. Write and publish articles

The top article directories receive millions of visitors a day and get indexed by the search engines almost immediately. If you write and submit articles consistently to these directories you will build an ongoing stream of visitors to your blog. This happens because newsletter publishers constantly visit article directories to find fresh content. You can also increase the rankings of you blog or article by including a link to it at the end of your article.

To learn more about how to write, organize and submit articles pick up a copy of my ebook: Article Marketing Strategies

2. Guest blogging

Blog owners are constantly looking for new content. It’s difficult to always come up with a new topic and content that will interest readers. A guest blogger adds a fresh perspective to a blog plus you can include a link to your own blog at the end of the blog post. If the blog is a popular one you’ll receive lots of new traffic. Make sure the content you offer is unique (not published elsewhere) and well written.

3. Submit to search engine directories

Besides submitting your blog to blog and rss directories submit your blog to free and paid directories.

For more information read:
Which search engine directories should I submit to?

What Search Engine Directories Should I Pay to Get Listed?

4. Give away a free report or ebook

People love to receive free information particularly if it contains valuable information that you could easily charge for. Create a report of 10-20 pages then offer it to your newsletter subscribers, joint venture partners, forums, blogs, ebook directories and resource box of your articles, etc. Include links to your blog (product or newsletter) throughout the report to generate traffic to it.

For information read:
How to Create a Report

5. Write a press release

Your press release should contain content that is newsworthy such as a story about your product and what it will do for the customer. Select one of your blog posts that is newsworthy, expand upon it then convert it into a press release.

For more information on the benefits of a press release, how to write one and where to submit it read:

Press Releases Get Instant Traffic

6. Create videos of your articles

Not all people like to read content in its written form. Many prefer visual and audio presentations. To convert your articles into videos either read them in front of a video camera or create slides of them.

For an easy and affordable way to put videos on your web site purchase a copy of VideoWebWizard:

After creating your video distribute it to video sharing web sites to attract tons of new visitors that wouldn’t normally read your articles.

For a list for video sharing web sites read:
Where to Upload Your Videos

7. Do teleseminar presentations

You can use your blog articles to hold your own teleseminar. Google “web conferencing software” to find software to run your teleseminar. String a series of related articles together to present to your audience. Make an announcement on your blog, joint venture partners and newsletter subscribers about your teleseminar. Be sure to mention your blog URL several times throughout your presentation to gain lots of new visitors.

8. Use Social bookmarking

Social Bookmarking refers to web based applications that enables you to store bookmarks online instead of in your favorites or bookmarks on your computer. The immediate advantage of this is that you can access your bookmarked sites from any computer or mobile phone.

To make it easy for visitors to bookmark your posts download and install this plugin for Word Press:

I Love Social Bookmarking

This plugin currently supports the bookmarking sites:
Blinklist, Bloglines, Blogmarks, Digg, del.icio.us, Facebook, Furl, Ma.gnolia, NewsVine, Reddit, StumbleUpon, Technorati.

9. Set up an autoresponder

It’s well known in Internet Marketing you need to touch base with a visitor several times before they act (ie subscribe to a newsletter or buy a product). An autoresponder enables you to automatically build a relationship with your visitor over several days or weeks by sending them new information.

Instead of only contacting them once and losing them forever you have the potential to create a life long relationship.

The most robust and well known autoresponder service is Aweber. They even give you a free test drive or get started for $19.00 a month.

10. Pay Per Click Marketing

Pay per click advertising is a great way o get instant traffic to your blog. Your ads can be immediately displayed on the first page of the search engine results pages. You pay whenever someone clicks on your ad. The key to making a profit is your return on investment (ROI). For example if your product price is $100, your cost per click (CPC) is 10 cents and you sell 1 item for every 100 clicks your profit will be by $90.00. Google, Yahoo and MSN offer pay per click advertising.

For more information read:
How to Set Up A Successful Google AdWords Campaign

Tip
The success of these traffic generating methods for blog marketing will vary for each person. Select 3 methods that work well for you then use them on a consistent basis. Monitor your blog statistics to view the increase in visits each month, where they are coming from and what keywords they are using to find your blog.

*****
For more ways to attract traffic to your blog pick up a copy of my ebook:
101 Highly Effective Strategies to Promote Your Web Site

Filed Under: Blogging, CSS Tagged With: ,
February 23, 2009 by Leave a Comment

Inline CSS – How to style text within your web pages

Do you need to quickly style the text within your web pages with CSS?

Answer: Use css inline tags

Normally the best way to use CSS is an external style sheet. It allows you to easily style the web pages throughout your whole site by editing one file however sometimes you just need to style one heading or paragraph (not the whole page or pages).

Why use inline css?

Recently I had to do a quick update to a WordPress web site. Unfortunately the standard WP web editor does not allow you to enlarge the font and I had no time to search/edit the external style sheet.

Here’s the css inline styling I used to create large text:


<p style="font-size:20px; font-weight:bold; color: #000;">Introduction</p>

Here’s how it’s displayed:

Introduction

Features of inline css

* Allows you to insert the CSS within the HTML code.
* Overrides the styles that are defined in an external CSS.

Resources:

http://www.tizag.com/cssT/inline.php

Filed Under: CSS Tagged With: ,
October 17, 2008 by 3 Comments

Zen Cart SEO | Building Backlinks

If you want your web site to rank well in the search engines you need to implement a link building campaign. The number and quality of links pointing to your web site (backlinks) will increase rankings and boost your web traffic.

Internal Linking

Make sure the main sections of your online store are linked from the home page because when submitting your site to directories you only submit the home page URL not all the internal URLS. Search engines will crawl the pages that are linked from your home page.

1. Create a Site Map

A Site Map page includes links to all your internal pages. Some internal links may be several directories away from the home page. Search engines may not crawl these pages. A Site Map linked to the home page will enable search engines to crawl all your pages. Fortunately the Zen Cart Store generates a site map page automatically. You can edit your site map page by logging in to your admin panel-tools-define pages editor and select define_site_map.php from the drop down box.

2. Link to other pages within your content

If one of your internal pages mentions “stainless steel sinks” in its content, link that phrase (anchor text) to the main stainless steel sinks page. This will help boost its rankings because you have a link pointing to it that contains the anchor text “stainless steel sinks”

3. Practice deep linking

External links pointing to your internal pages are known as deep links. The more deep links you get the more traffic you will attract to these internal pages. When obtaining deep links make sure the anchor text is related to the content of the internal page. For instance use “stainless steel sinks” as the link text when linking to the stainless steel sinks page.

Building backlinks through internal links will fortify the theme of your web site, increase page rank, rankings and attract more visitors.

Build 1000s of NEW BACKLINKS to your Zen Cart Store with
highly effective “Article Marketing Strategies”

Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of Web Design, Web Hosting, SEO

Filed Under: CSS, SEO Tagged With: ,
October 13, 2008 by 1 Comment

Zen Cart SEO | How to Optimize the Content

Each page of your web site is an entry point for your visitors. An online store usually contains many pages. Most visitors will not enter your site through the home page but through its internal pages. The content for each page should be optimized separately to attract the maximum amount of traffic. This means you need to target a different keyword phrase for every page.

How to optimize your home page content

The content on your home page should include your main keywords. For example SinkBiz.com sells stainless steel sinks, porcelain sinks and eco taps. Stainless Steel Sinks is the keyword phrase that gets the most searches according to the keyword research tool WordTracker and is the main product being sold so I placed that phrase at the beginning of the title meta tag and also included it in the opening paragraph.

Here’s the title tag:

Stainless Steel Sinks | Porcelain Sink | Eco Taps – SinkBiz.com

Noticed how I placed the name of the web site at the end. It wouldn’t get much traffic if I placed it at the beginning as no one would be searching for Sinkbiz.com. Stainless Steel Sinks is also included in the navigation links and in the banner title to make it obvious to visitors what the site is about. The keyword phrase “kitchen sink” is also used in the short description under a few of the products on the page.

Tip
When optimizing a web page don’t clutter it with your keywords but mention them naturally through the page e.g. paragraphs, navigation links, product descriptions and header tags (h1, h2).

*****************************************
Attract 1000s of NEW visitors to your Zen Cart Store by creating
highly effective “Article Marketing Strategies”

Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of Web Design, Web Hosting, SEO

Filed Under: CSS, SEO Tagged With: ,
December 24, 2007 by Leave a Comment

CSS Menus – Horizontal Drop Down CSS Menu

Sometimes a normal horizontal menu is not enough to satisfy the customer. Recently I designed a web site which contained anchor links to several different sections on the page. I placed links to all the sections at the top of the page. After almost completing the site, he asked if that page could be changed to have a horizontal drop down menu. Instead of creating a DHTML menu I decided to build it with CSS and a little javascript (to make it correctly in IE 6).


[Read more…]

Filed Under: CSS
December 20, 2007 by 1 Comment

CSS Menus – Top 7 Benefits of a CSS Menu

For years most web designers used the traditional style navigation menus for building web sites. The last few years many have moved to creating css menus. Technological changes have enabled web designers to create web sites that attract visitors from the search engines. Instead of using the once popular table-based design, they now create the whole site using css and xhtml.

[Read more…]

Filed Under: CSS
November 22, 2007 by 6 Comments

CSS Menus – Create a horizontal css menu using classes

CSS menus have much greater versatility than the traditional javascript-based menus placed in tables.

Here are some of the main benefits for CSS Menus:

1. Quickly create horizontal or vertical navigation menus without cluttering up your html code.

2. Fast loading. Search engines can spider the code faster than javascript or flash menus because it generates clean code.

3. Versatile. You have the capability to create horizontal, vertical and drop down navigation menus for any site. You also have the ability to create hover effects and use background images. This gives you alot of creativity in developing the best navigation menu for your web site.

4. Accessibility. A CSS-based navigation menu is accessible to all types of computer users no matter what type of browser, screen resolution or computer they use.

5. Flexibility. If you need to create multiple css menus, use css classes in your web page design.

Recently I had to convert an entire web site’s navigation from using applets (often created using the now defunct Front Page Editor) to a css menu. I had to use multiple css classes (instead of ids) to create multiple horizontal menus.

CSS Horizontal Menu Using Classes

Here’s how the css horizontal menu is displayed on a web page:
http://www.ihost-websites.com/test2.htm

CSS


.navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul.navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

.navlist li
{
display: inline;
list-style-type: none;
}

.navlist a { padding: 3px 10px; }

.navlist a:link, .navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

.navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
-->
</style>

HTML

<div class="navcontainer">
<ul class="navlist">
<li class="active"><a href="#" class="current">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
<li><a href="#">LINK4</a></li>
<li><a href="#">LINK5</a></li>
</ul>
</div>

Here is the same CSS horizontal menu using DIV IDS

CSS


#navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
-->
</style>

HTML


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
<li><a href="#">LINK4</a></li>
<li><a href="#">LINK5</a></li>
</ul>
</div>

Filed Under: CSS, Web Design
April 4, 2007 by 1 Comment

CSS Tutorial – How to Style CSS Links

This CSS tutorial will discuss how to use the same CSS links throughout the design of your web site. If you place them all at the
beginning of your CSS style sheet the links on all your web pages will behave the same.

You will notice I haven’t defined the size of the links because they will inherit the size of the font styled in the body of your cascading style sheet.

CSS


<style type="text/css">
a:link {color: #0000FF;}
a:visited {color: #3366FF;}
a:active {color: #FF0000;}
a:hover {text-decoration: underline;}
</style>

Here are the 4 different styles of links called selectors:

a:link
Defines the style for normal unvisited links.
The color is dark blue in the example above.

a:visited
Defines the style for visited links.
The color of the visited link above is light blue.

a:active
Defines the style for active links.
A link becomes active once you click on it.
The color of the active link above is dark red.

a:hover
Defines the style for hovered links. A link is hovered (changes color or form) when the mouse moves over it. The hover link becomes underlined in the above example.

The next CSS tutorial will discuss how to create multiple link styles on the same page so you use different colors and font sizes according to what your design needs are.

Filed Under: CSS
Next Page »