"I Can Do It Myself" Videos» I Can Do It Myself Video Series : Videos That Empower You : Cenay Nailor

Optimize Your Site On A Budget

Cenay Nailor — Sun, 05 Jul 2009 17:33:36 +0000

I subscribe to the Google Webmaster Videos’ series, because they talk about what’s important to me. SEO and optimizing my site.

In today’s video, Google Webmaster answered the question from Glendale, CA. Keen Agents from Glendale, CA asks:

“How does someone begin to SEO their site on a small budget in an overwhelmed industry such as real estate?”

Basic HTML: Webpage Tutorial

Cenay Nailor — Sun, 05 Jul 2009 07:14:07 +0000

Found a somewhat simplified example of creating a basic webpage with Notepad, a tool that all Windows users have on their computer. If you don’t own Dreamweaver or another WYSIWYG editor, then this tutorial is for you.

This is an introduction to HTML using Notepad. While some prefer to use a WYSIWYG editor, Manually editing HTML can be a great benefit if you want to modify your MySpace profile, embed video clips on your blog, etc.

New Features Coming!

Cenay Nailor — Sat, 04 Jul 2009 07:45:54 +0000

Just a quick announcement to let you guys know, we got some really cool changes coming.

As you may have noticed, the theme has changed. Based on feedback from my loyal readers (that’s you guys), I am making it easier to find and play the videos. I will also be grouping them into series (where appropriate) and (coming soon – hopefully) adding playlists so you can group (and ungroup) what you want to watch in the series that YOU choose.

Anyway, all this is gonna take a little time and the theme test drive won’t work for me because there are so many custom options for this theme. So, I beg your patience for the next week or so. If something doesn’t work, please do let me know, but I am leaving the video’s embedded on the posts until everything is done.

Premium Content Coming

Also requested was access to more advanced techniques and more monetization strategies. So, coming soon I will offer a Membership option that will deliver premium videos, advanced techniques, monetization strategies in detail and a members only forum.

The Members Only forum will provide you a place to come and ask questions, share successes, suggest videos, tweaks or whitepapers and connect with other bloggers from all over the world. My current coaching classes speak to Brazil, United Kingdom, East Coast, West Coast and 4 states in between.

Current and active coaching students will have 100% free access to all the premium content. Non-coaching guests will pay a small monthly fee (amount to be announced soon).

Once again, thanks for your patience while we tear down some walls and build some new ones. I hope it won’t take long to get the polish just right.

Thanks for all the great feedback and suggestions. You guys are the reason I create *I Can Do It Myself* How to videos.

Affiliates Link Cloaking A Mystery To You?

Cenay Nailor — Tue, 30 Jun 2009 18:47:09 +0000

So, how do affiliate mask their links? iFrame PHP Redirect Generator software, or something similar.

If you are into any type of Affiliate marketing, then you know the value of being able to mask those long ugly affiliate links with something more visually pleasing and professional looking. It’s a boring process and requires you get the code exactly right, every time. Or, you could use a service like ViralURL or HopURL, which add banners, ad’s and overhead to your affiliate page, seriously diluting your message.

I wrote some software to solve the problem of hosting other peoples ad’s when you are trying to market something and included meta tags like keywords, title, description. I even went one step further and added Google and Woopra tracking! So now you can see where your buyers are coming from.

This video shows you how to get iFrame Generator, install it, and use it to build solid professional PHP code that will redirect your web visitors safely and quietly to the page of your choice.

Convinced yet? I knew you would be.

Go ahead and click -> iFrame Generator ~ Link Cloaking with Tracking and I will take you to the download page.

Don’t forget to sign up for Lifetime Free Updates. You’ll want to do this to avoid being charged in the future. This software will be a paid product as soon as I have enough testimonials.

SEO With Plugins: Exploring Headspace2

Cenay Nailor — Sat, 27 Jun 2009 06:27:59 +0000

A recent coaching session covered the SEO benefits of installing and using Headspace2. As members of that call will recognize, about 45 minutes was cut from this video. All the wasted time on technical difficulties is gone. Areas where the information was repeated (as in answering questions or covering the same concept on a different part of the call) were removed or spliced together to provide a single explanation.

If you are looking for a bit of help in improving your organic listings in the search engines, then check out this video. Additional concepts covered include the right way to post to your blog, what the search engines are evaluating first, and the one thing every post must have, in order to get found by both the search engines and your visitors.

Resources for items shown in video:

Install TeamViewer – Remote Support Software

Cenay Nailor — Thu, 25 Jun 2009 07:11:01 +0000

Need to quickly *look over the shoulder* of a friend’s computer but live 15 minutes away? Remote Support Software just might be the ticket! If both machines have the software installed, you can connect over the Internet and see their computer, or they can see yours.

Since it allows us to connect our machines together, I can see what you see, or you can see what I see (depending on which *direction* we connect). This video is to help those needing my help, find and install the TeamViewer software.

It’s free to use for Personal use and easy to install and use.

I highly recommend this tool.

Install Revolution Streamline Theme

Cenay Nailor — Sun, 21 Jun 2009 05:21:43 +0000

If you purchased the Revolution Streamline Theme and got it installed, only to discover your blog doesn’t look like the demo site, you are not alone, especially if you are installing it on an existing blog with lots of posts.

That happened to a friend of mine recently.

Bill reached out for help. Together, we got online with his blog and I stepped him through the entire process and all the little tweaks to make his blog look as good as the demo of Streamline.

Have one of the Revolution themes and need to know how to *get the thumbnails to work* or exactly how the content gallery thingy works, watch this short video.

If you want the Revolution Theme after seeing the video, you can find it here. Studiopress – Premium Wordpress Themes

Add Page Peel To Your Blog

Cenay Nailor — Thu, 14 May 2009 10:12:06 +0000

If you are doing any type of marketing from your blog, I have a cool little trick that will help you *engage* your readers that isn’t quite as obvious as a 250 x 250 *ad* placed in front of them. They don’t see those unless they are specifically looking for a solution.

It’s called a Page Peel effect, and it allows you to place an ad *under* your page. If the reader clicks the little link in the upper right hand corner, it opens the whole ad in a unique and *fun* peel away effect.

This video will show you where to get the code, how to update your theme and install it on your domain. I was able to find, install, edit, upload AND record in the video in under 10 minutes. Don’t believe me? Grab a stop watch and let’s go. Press play on the video bar below.

Resources:

Get the PageEar code here
http://www.webpicasso.de/blog/pageear-free-peel-away-ad/

Edits To Your Theme:

Header File

Location
header.php file, just above closing tag
Code:

<script src="http://www.YourDomain.com/pageear/AC_OETags.js" type="text/javascript"> </script><br /> <script src="http://www.YourDomain.com/pageear/pageear.js" type="text/javascript"> </script>

Don’t forget to change YourDomain to the name of YOUR domain.
Footer File

Location
footer.php file, just above closing tag
Code:

<script type="text/javascript"> writeObjects(); </script>

Don’t forget to change yourDomain to YOUR domain name.

Want to see any other cool tricks or effects? Leave a comment!

PS: Really, I want to know… what’s the one thing you haven’t done yet, that you want to do to your blog?

Affiliate Theme In Review

Cenay Nailor — Mon, 04 May 2009 08:32:56 +0000

Converting An Existing Blog To Affiliate Theme

There are a lot of Wordpress Themes out there, but none that could make affiliate marketing easy. Until now.

I recently purchased Affiliate Theme by Unique BlogDesigns to give it a whirl. Before getting the Affiliate Theme, I had to find a Wordpress theme that somewhat matched my *market*, and then make extensive edits and upgrades to make it work. Getting the Affiliate Theme was like getting an *Easy Button* for affiliate marketing.

The real test came when it was time to convert an existing site over the Affiliate Theme. This video shows you exactly what I did and how I did it. It wasn’t painless (because the blog already had a numbers of *posts* or products I was reviewing), but it was easy. Let me show you how.

To see their video on features and what is offered, click the Learn More About Affiliate Theme link here. Oh, and tell them Cenay sent you. They already know my name, I spent some time in the support forums helping folks out that were asking questions about how to set it up.

A Trick For Tracking Your Tweet URL’s

Cenay Nailor — Thu, 30 Apr 2009 03:09:25 +0000

Here’s a trick for tracking those shorty URL’s you create when you are sending Tweet’s out.

Yep, it is one extra step for you, but well worth it since you can see exactly how many times that shortened URL has been visited.

Want to experiment with different types of Tweet’s pointing to the same URL to see how effective your Tweet’s and calls to action are? It’s all here.

Links Referenced in the video:

Coming soon: A video on reading and understanding all the stat’s available to you once you collect a little data. How many visitors were human, how many were bots. Where do they live and what browser are they running. It’s really cool stuff.

Not seeing a video you want? Ask me with Request Vid at the top of the page

SEO Juice With Internal Linking

Cenay Nailor — Sat, 25 Apr 2009 10:49:11 +0000

Recent articles on my main blog have focused on the organic traffic you want from the search engines, and how to get it. I hope you have been following along.

Today, I want to show you a shortcut.

I say *show you*, because this little tip is best understood with a video where I can show you click by click and step by step exactly what to do. I reference a couple of sites in the video that will be linked under the video.

Just to recap the basics of SEO and inbound links though, you should understand that Google counts each inbound link to your post or page as a sort of *vote*. A pledge of support or an agreement from your peers (niche partners) that your content is relevant to the topic at hand.

However, a little known fact is that links from your blog also count as votes. Now, all this is just from an SEO standpoint, but there is another benefit to all this internal linking.

More eyeballs.

That’s right. Your visitor finds something he or she likes and clicks to go read the rest. At that point they have demonstrated their willingness to *consume* your content. Great!

Now give them more.

This video will show you two additional techniques to keep their interest, deliver exactly what they want, and get a little search engine love in the process.

It’s a win-win.

To sign up and get the Zemanta Wordpress Plugin or Firefox Browser addon, visit Zemanta here.
To read more from Carol Hansen, check out her blog FromMyKitchenTable.com here.

Reciprocity and SEO (CenayNailor.com)
Blog More Effectively With Zemanta (bloggingot.com)
Zemanta Spreads To Safari, Chrome, Opera (mashable.com)
Enhance your emails and blog posts with Zemanta (read2know.com)

Add AWeber Form To Wordpress Blog

Cenay Nailor — Thu, 16 Apr 2009 06:19:28 +0000

Using AWeber as an Autoresponder will improve your chances of reaching the right people, at the right time, by allowing you to continue marketing to them over time.

A Wordpress blog (the best blogging platform in my opinion) can be a great place to allow people to "Opt-In" to your list.

So, how do you add an AWeber Opt-In form to your Wordpress blog? Well, this video takes you step by step through the process. When you are done, you will be able to create a list in AWeber, add a Web Form, and then put it on your Wordpress blog.

Haven’t yet signed up for an account? Click here to Take a free test drive of AWeber

Filezilla FTP Client To Transfer Files

Cenay Nailor — Tue, 14 Apr 2009 18:12:25 +0000

Find, Install and Use Filezilla FTP Client To Transfer Files

When you have your own domain, you will often need to transfer files between your computer and the Internet location (your domain). FTP (File Transfer Protocol) is the means by which you send and receive those files.

I recommend Filezilla for those on a budget (it’s free), and demonstrate how to find it, download it, install it and use Filezilla in this video. Personally, I use (and recommend) FTP Voyager for those that can afford it (it’s about $40) because it also contains a built in scheduler that will monitor directories and upload / download files automatically for you. For most people however, Filezilla will do everything you need it to.

Amazon Carousel Widget For Wordpress Blogs

Cenay Nailor — Thu, 19 Feb 2009 15:37:18 +0000

If you are an affiliate for Amazon, then you are probably familiar with their widget section. Like the aStore, slide shows, and special deal widgets, Amazon now offers a new one I really like. It’s called the carousel, and like it’s name-sake, it places photo’s of your *products* in a 3D round and round that the visitor controls.

When I came across this fun little widget on someones site, I immediately wanted one for my main blog.

Fortunately, I knew the person who had the blog it appeared on so I gave her a call to learn more about it. We got together on Skype and together went to find and create one for me. I recorded the process to find, select the products and put it on my blog.

This isn’t like one of my regular video’s, all planned out and the process defined before I record but it does show every step. You can hear her in the background and I am talking with her during this video, but I think you will enjoy it.

This is the *widget* we created during the session. If you want one, follow the steps in this video to go make your own.

Create HubPages Account & Build Your First Hub

Cenay Nailor — Mon, 12 Jan 2009 17:44:01 +0000

HubPages is another free-to-use social networking site that allows you to publish articles, ad’s, posts, ramblings, photo’s, or whatever you want (within reason, obviously there are some restrictions).

When you are trying to get web visitors to go to one of your sites, this place really helps drive traffic for you. One of the reason’s is that Google indexes this site hourly, so any new content you add, shows up almost immediately in the search results.

This video will have you up and running in about 20 minutes with your very first *Hub*.

Magnetic Sponsoring Backoffice Primer

Cenay Nailor — Fri, 12 Dec 2008 21:17:28 +0000

If you are using Magnetic Sponsoring to help you generate leads and commissions (getting paid to prospect), then you will need to know how to use the back office to locate links, banners, and training aids.

This video also covers setting up a "campaign" for tracking the different ways you are promoting the products, seeing the breakdown of where you traffic is coming from and following up with your prospects initially.

As I said, this is just a primer. Future video’s will go into more detail.

As you can probably tell from the links, banners and posts about Magnetic Sponsoring, I personally think this product is singlehandedly changing the face of network marketing. However, you might not realize that what is being taught in the Magnetic Sponsoring book, and the 7 Days of Free Videos, is a blueprint for success in any business. Clink the link Magnetic Sponsoring Videos to grab your 7 free videos and see exactly what I mean.

View Full Screen version in a new window (800 x 600)

Using iFrameGen With A Site Build It! Site

Cenay Nailor — Sat, 18 Oct 2008 01:48:25 +0000

Site Build It! is a great tool for both the beginning webmaster and the more experienced *been online for years* kinda guru. In fact, I wish I had found it before I built all my sites, embedded all my analytics and did things the hard way. Oh well.

However, there are a couple of things you need to know to use iFrameGen on your site if you build with SBI. Watch this video to see what those things are.

If you haven’t yet chosen your *hosting* options and analytics, consider Site Build It! since it rolls everything you need to succeed online into one comprehensive package.

Get Your Own Copy Of iFrameGen

iFrameGen, unlike many other redirect generators out there that just give you a scaled down, stripped out PHP file, this software also allows you to enter a Title, Keywords and a Description so you can get some *Google Love* in the process.

Click here to Download iFrameGen Right Now.

Install Your Own Wordpress Blog

Cenay Nailor — Thu, 02 Oct 2008 17:33:40 +0000

Wordpress claims a *5 minute install* in their literature and videos. Bull-crap.

Oh, I know, the installation part really is that fast, but there is so much more to a self-hosted blog than just the Wordpress software install. You have to buy a domain, get hosting, create a MySQL database, download Wordpress, extract it, upload it to your domain, install the software, then update settings and add a theme.

When I explain to those I am mentoring on *branding* themselves that they need a blog to help, most get a glazed look in their eye. Some just give up.

I set out to break it down into manageable chunks, in a step by step video (actually, it’s an 8 part video) that would help anyone, regardless of experience, create their very own self-hosted Wordpress blog.

Because this video series has 8 parts, I created a *theater* for it on a different page. The theater is just too large to fit within the blog post. So, click the image above, or the link below to see the *Install Wordpress * video.

I am also including all 8 videos here if you prefer. They should be viewed in order if at all possible!

The remainder of the series is below…

Create Folder

Download and Extract Wordpress

Create MySQL Database

Install the Wordpress Software

Tweaks – Updating Your Blog’s Settings

Settings Within Wordpress

Working With Themes

View Full screen video in a new window (800×600)

You Can Now Download The Videos And Play Them Offline

Cenay Nailor — Tue, 23 Sep 2008 17:46:15 +0000

A gentleman in Brazil recently complained that his dial up connection was simply too slow to allow him to view the videos (without frustration ) so I looked for a solution. I think I have it.

I have begun rendering the videos into an FLV format (smaller size) and am making them available to download to your personal computer. I have also provided a *Player* so you can watch them offline. Not all the videos are rendered this way, but as they are, I will be adding them to the download page, so check back often.

If your Internet connection is slow, please feel free to download the one(s) you want to watch.

Download *I Can Do It Myself* Videos
(This will open a new window )

Organize, Compress and Send Digital Photos

Cenay Nailor — Thu, 21 Aug 2008 07:20:26 +0000

I was recently asked to complete a *How To* video for a company called Tears Of Joy Video. They offer the really cool service of taking your photos (digital and paper) and building a video montage, set to music.

As a part of her ongoing efforts to make building a lifetime of memories into a shareable, beautiful video, she wanted an instructional video showing visitors how to organize and submit their photos to Tears Of Joy for their project.

So, forgive any references to Tears of Joy, but I felt this was a cool video for showing you how to organize, zip and send via email your photo’s. Great for parents to send pictures of their kids to grandparents living across the country or across the street.

Republished here with permission from Tears of Joy.

Here’s an excerpt from the Tears Of Joy Video site.

Let us tell your story with a Montage from Tears of Joy Video. The “Tears of Joy Video” Ethic demands we view each project we create as a custom, one of a kind, creation. We do not use “cookie cutter” music, transitions, or formats. We take time to listen to our clients to get to know their story and their vision. Then we set to work to create your custom montage that will move your audience to “tears of joy”!

You should check out Tears Of Joy Video to save those precious memories now.

Publishing Adsense Ready Sites

Cenay Nailor — Thu, 07 Aug 2008 01:47:26 +0000

You found a great *package* online, it’s 10 Adsense Ready Websites . Just add your Google Adsense account number and publish.

Well, I know it sounds easy, but perhaps you didn’t count on editing, FTP’ing or creating subdomains? Yep, I know it sounds like a lot, but it really isn’t.

Follow along with this short video and let me walk you through it, step by step.

When you finish this video, you will have a much clearer grasp of the process, and will be ready to publish your first Adsense Ready Website . Hey, it’s just 20 minutes. What do you have to loose?

While the lady that requested this video supplied the Adsense Ready site for the purposes of this video, there are few really good *Packages* out there you can purchase to setup your very own Adsense Ready sites in any niche you choose. One I use (and is free), is called HyperVRE . This package comes with keyword tools, content selection from the web based on keywords, built in templates and an automated way to generate as many *pages* as you want.

Upgrade Wordpress Version

Cenay Nailor — Mon, 04 Aug 2008 06:22:22 +0000

One of the most popular blogging platforms on the web today, Wordpress offers a lot of features to make "push button publishing " possible for almost everyone.

If this is your blogging platform of choice (as it is mine), then you will need to upgrade the "software" to the latest version whenever they release a new one. While the process isn’t "hard", there are a few steps. This video details each of those steps.

If you prefer just reading about it (boy, is this stuff dry though! ), then the instructions are below. I got these directly off Wordpress’ site here. http://codex.wordpress.org/Upgrading_WordPress

Overview of the Upgrade Process

1. Backup your database. Read Backing Up Your Database for a detailed explanation.
2. Backup ALL your WordPress files in your WordPress directory. Don’t forget your .htaccess file.
3. Verify the backups you created are there and usable. This is essential.
4. Deactivate ALL your Plugins.
5. Ensure first four steps are completed.

Do not attempt the upgrade unless you have completed the first four steps.

6. Download and extract the WordPress package from http://wordpress.org/download/.
7. Delete the old WordPress files on your site, but DO NOT DELETE

wp-config.php file;
wp-content folder;
Special Exception: the wp-content/cache
wp-content/plugins/widgets folders should be deleted.
wp-images folder;
wp-includes/languages/ folder–if you are using a language file do not delete that folder;
.htaccess file–if you have added custom rules to your .htaccess, do not delete it;
robots.txt file–if your blog lives in the root of your site (ie. the blog is the site) and you have created such a file, do not delete it.

8. Upload the new files from your computer’s hard drive to the appropriate WordPress folder on your site.
9. Run the WordPress upgrade program and follow the instructions on the screen.
10. Update Permalinks and .htaccess. Update your Permalink Structure and merge the custom rules, if necessary, into your .htaccess file.
11. Install updated Plugins and Themes. Please review the list of Plugins that work in Version 2.5.1. Check for Theme Compatibility with 2.5.1 and ask your Theme author for any new version.
12. Reactivate Plugins
13. Review what has changed in WordPress.

Easy Website Creation – No Geek- Speak Required

Cenay Nailor — Thu, 24 Jul 2008 22:49:06 +0000

Okay, doing things a little differently today. This is not my video…

As we all know, creating a website and displaying on the internet for the world to see, is a very complicated process for the average person. The website creation process was not designed for the average, every-day person. It was designed for people that have a knack for, and understanding of geeky computer programming languages. The end result, the average, every-day person is either stuck with a very poorly designed, boring website… OR no website at all.

Enter BlinkWeb.

Finally… An easy way to create a professional looking website without knowing HTML, PHP, Javascript, and all the other techie nonsense needed to put a website online. (Well, okay, it’s not nonsense, it’s how I make a living (in my day job), but it is *nonsense* to a lot of folks).

Let’s face it, it should NOT be complicated to create a website. I mean, come on, it’s the year 2008! By now, you shouldn’t be forced to use bulky HTML editing software or pay some "nerd" (that would be me!) thousands of dollars to create a site for you.

For the past 8 months, Brad and Matt Callen, have been working extremely hard to provide a solution to this MAJOR problem that most people face. (You might know them as the creators of SEO Elite, Keyword Elite, Affiliate Elite and other web tools designed to make your Internet/Network Marketing business explode).

They’ve created a short video (below) to show you just how easy it will be to create a professional looking website with Blinkweb. I’m super excited about it and they have poured their hearts and souls into creating this for you, so I hope you like it.

After watching the video, please post your comments below by clicking on the comments link. I’d LOVE to hear what you think!

Convinced? Here’s where you can go sign up for your free account right now.

BlinkWeb – Website Creation In The Blink Of An Eye

Edit Wordpress Themes To Add External Links

Cenay Nailor — Wed, 25 Jun 2008 08:03:04 +0000

Most Wordpress themes automatically add navigation links at the top that point to pages you have added to your blog, but did you know you can add to that list? Even if it’s not a "page" within your blog.

If you have extra web pages you want to make available to readers of your blog, you can simply upload them and add "references" to them in your theme files. This 8 minute video will walk you through editing your Wordpress theme "header" file (I’ll even show you where that is!) and have to editing your theme like a mad woman in no time. (Figure of speech guys)

Advanced Domain Name Search Feature

Cenay Nailor — Tue, 10 Jun 2008 19:54:08 +0000

You finally made the decision to get your own domain name, only, someone has already registered the exact name you wanted to use.

What do you do now?

Well, you can grab your Therasaus and look up words that mean the same thing, or you can use Register.com’s Advanced Domain Name Search feature and let it suggest 20 or 30 different but similar names.

Me? I take the shortcuts where ever I find them.

Google Alerts – Your Personal Assistant

Cenay Nailor — Mon, 09 Jun 2008 07:33:43 +0000

How would you like to have a personal assistant that does a lot of the research you need to do, in order to be successful in whatever "niche" you choose to market in? An assistant that works without pay, without cost, without rest or even potty breaks?

Google offers a free service that does just that. Give it a keyword to monitor, and every time something is added to the web for that keyword, Google will send you an email alert containing the link(s) to the pages that contain your word(s) of choice.

Let Google help you keep track of what you are interested in.

Create eBay Sellers Account & Insert First Auction

Cenay Nailor — Wed, 04 Jun 2008 05:28:57 +0000

Recently, a client came to the house for a bit of training on using eBay to liquidate some of the items at his house he no longer wanted. (I am sure you know how that goes)

He agreed to allow me to record the training session both for his own use, and to share here.

This video walks you through creating an eBay sellers account, choosing your auction options (such as title, price, shipping options, photos, etc), and building the ad using basic HTML. Starting at about 11 minutes on the timeline is the HTML used to create and format your auction ad.

Low Bandwidth or Dial Up? Here’s An Option

Cenay Nailor — Mon, 12 May 2008 22:54:48 +0000

Even though it’s 2008, not every one has high speed Internet (I am sad for you) so I created a channel on DailyMotion where you can see some of the video’s I post here in a lower quality streaming format.

If you do have high speed, or aren’t having trouble viewing the video’s here, great! But if you are, you can check them out by clicking on one of the images below. (Hover over one to get a little mini preview)

Dropdown Menus Using CSS

Cenay Nailor — Tue, 06 May 2008 02:01:36 +0000

Skill Level: Intermediate

Christian Wilson wrote in with a request this week which I would like to share here (thanks Christian!).

Christian Writes:

How do you make a pull down navigation menu that is all in CSS?

As I said before, this is not a beginners task and might not even be an intermediate one, but I will throw down on it and you can pluck from this what you will.

First challenge I had in answering this question is that it doesn’t lend itself well to the whole "video" thing, so I am going to publish an article, right here in the video section to get you going while I try to think of a way to make this into a video.

There are two methods to adding a navigation bar across the top of a web page. One uses Javascript and "events" to launch an action, and the other relies on the cascading nature of style sheets to define rules that are applied from the top down.

First, the goal… Here’s a sample from my other video site (which uses the CSS to build pull down menu’s). Those of you who visited my original site will remember that the Category "link" had a drop down menu. Since this wasn’t a "blog", I had some freedom in what I did. Here’s a screen shot showing the drop down under the "Category" link in my top navigation bar.

The HTML is pretty straight forward as you can see from below. It just uses nested unordered lists. It’s the CSS that makes it all work.

Please Note: In order to display the actual code (and not have it BUILD the lists), I had to use an image of a screen capture. Here is a text file that contains both the navigation and the CSS.

I told you it was straight forward! In fact, you have seen this many times before. Want proof? Here is that exact same HTML but because this blog doesn’t share that style sheet, well, you can see the difference. Please note: Since it is the exact same HTML, none of these links will work!

Now that we have the HTML written and know our goal, let’s get busy with the CSS. If you aren’t interested in HOW it works, just download the sample file from the link shown above and copy and paste into your web page. Play around. Just keep the sample file separate in case you need to start over.

We will use this section for the discussion so you might consider printing this part out.

/* NAV - top horizontal nav */ #nav, #nav ul { padding: 0; margin: 0; list-style: none } #nav { font-weight:bold; height:2.09em; font: bold 96% arial; margin: 0 105px 0 40px; } #nav li { position:relative; background: #999; float: left; width: 10em; display:block; margin: 0; border-bottom: 3px solid #666; border-right: 3px solid #252525; padding:0 } #nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active { text-decoration:none; cursor:pointer; color:#fff; display: block; padding: 4px 10px 2px; } #nav a:hover { color:#000 } #nav li ul { border-left: 1px solid #c00; background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%; width:15.8em; font-size:90%; margin-top:3px; position: absolute; font-weight:normal; left: -999em } #nav li:hover ul, #nav li.sfhover ul { left: 0; z-index:99999 } #nav li li { background:none; float:none; border:none; border: 1px solid #999; border-top:1px solid #fff; border-right:none; border-left:none; padding-left:0 } #nav li li.last { border-bottom:none } #nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover { color:#000; padding: 3px 10px 2px; width:14em; } #nav li li a:hover { color:#fff; background:#c00; } #nav li.active { background: #c00; border-bottom: 3px solid #c00 } #nav li.active ul { border:none; background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100% } #nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active { } #nav li.active a:hover { color:#000 } #nav li.active li { border:none; border-top: 1px solid #c15c5c; border-bottom: 1px solid #870000 } #nav li.active li.last { border-bottom: none } #nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active { color:#fff } #nav li.active li a:hover { background: #666 url("images/sprites.gif") repeat-x 0 99%; color:#fff } #nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active { color:#fff; font-weight:bold; background: #666 url("images/sprites.gif") repeat-x 0 99% } /* hide from IE mac \*/ #nav li { width:auto } /* end hiding from IE5 mac */

Wow, that’s a mouthfull, huh?

Okay, direct your attention to the very first bit, that defines the overall style for the entire navigation bar:
#nav, #nav ul { padding: 0; margin: 0; list-style: none }

This set’s the stage for the CSS to work by defining the list-style initially as none. Subsequent tags will override this default. After this section is just a rule for the font weight, size and height of the background area. Pretty standard stuff.

The next rule really get’s busy enabling our drop down.

#nav li { position:relative; background: #999; float: left; width: 10em; display:block; margin: 0; border-bottom: 3px solid #666; border-right: 3px solid #252525; padding:0 }

Notice that it’s position is relative and it floats left. This is the "category" link itself. It’s the very first "li" level. What makes the drop down work is the display:block command. This forces all the unordered list items into a "block" under the Category "link".

To be consistent, the next section defines display:block for the anchor tags as well.

The section that defines the li ul (the unordered list UNDER a list item within an unordered list), sets the position to absolute. That might seem counter intuitive but remember that position relates to the container it is in. Since the ul is within a li, within an ul, the position is relative to that item. (Whew, try saying that three times in a row).

#nav li ul { border-left: 1px solid #c00; background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%; width:15.8em; font-size:90%; margin-top:3px; position: absolute; font-weight:normal; left: -999em }

This rule also refines the background images (replace with your own or remove to just use color), and the default width of the "box" that drops down. (width:15.8em)

The rule that defines the li li section (shown below) turns the float off, and defines the borders.

#nav li li { background:none; float:none; border:none; border: 1px solid #999; border-top:1px solid #fff; border-right:none; border-left:none; padding-left:0 }

The rest of the CSS defines colors, font’s background and behaviors when links are hovered and are pretty standard.

My only other suggestion is to download the file, paste into your web page and CSS files and play with it. That’s what I did. I can’t remember the site I came across that used this, but I used the Web Developement add-on for FireFox to display the CSS (which I copied) and the page source (which I copied). I put them both into a "play" page and experimented. It only vaguely resembles the original page I found it on since I made it my own.

Christian, I hope this helps. Now, go play.

Update: Hey Christian,

Thanks for the question. First, you need to realize one thing about CSS and table-less formatting. Containers are everything.

Here’s what I mean.

With traditional tabled format, your table was the primary “object” that you placed content in. While it is pretty simple to do, it made for tougher “reading” when it came to your code. And everything had to fit inside.

With the new CSS method, you just need to build containers (div tags) and place your content there. So, to center your “body content”, created a tag called b_content (or something similar) and set the properties so that it has margins of “auto” and is the width you want.

Create a new tag for the navigation and float it left (ie: c_navigation) and set it’s width. So, div c_navigation is contained in b_content and floats to the left side of that container.

Most of my layout’s use something similar. A main container, and then two or three sub containers.

If this doesn’t answer your question, let me know and I will try to make a video about it, or go into more detail in an article or something.

Update: 7/5/2009

Found a cool online tool (free of course) that will allow you to build your menu for your website interactively, and then download the code for it. You can check that out at Pure CSS Menu

Working With The Hero Book

Cenay Nailor — Sat, 12 Apr 2008 18:44:27 +0000

This video was also created for the Ad Group I manage, but again, offers some insights into finding, saving, and emailing an Adobe document (or any Office type document you find on the Internet. This video introduces a second concept for saving a PDF to your local computer that is a little faster than the previous method shown. It also introduces more email options.

To the Ad Group, please refer to this video or the email I sent to find where your report is located on the web.

Save Adobe PDF’s and Send Via Email

Cenay Nailor — Sat, 12 Apr 2008 18:33:40 +0000

(Using the Arthritis Pain Relief Report as an Example)

You have probably read a dozen or more PDF files that you came across on your many web-travels. Did you know you could save it to your local computer?

Once on your computer, you can print it or email it to anyone in the world.

This video was created for the Ad Group I manage, to teach them how to use a particular document I created for them, but it applies to any PDF you find on the web.

(Disclaimer: I am not telling you to share PDF documents you paid for with friends and family. That called stealing)

Nuts, you caught me again. I haven’t yet rendered this video into the smaller FLV format that I can embed on the page with complex HTML. So, for now, please click the image on the right to see the video full screen.

If clicking on images isn’t your thing, then here’s a link just for you. Save Adobe PDF’s and Send Via Email

Using Signature Lines To Prospect

Cenay Nailor — Sat, 12 Apr 2008 18:09:01 +0000

Signature lines are a powerful tool you can use to get your message in front of people subtly. A well crafted Signature Line is like an army of people out there putting your message in front of people 24 hours a day, 7 days a week.

Bold claims, I know.

Signature lines are for more than just email though. This video will demonstrate how to setup and use signature lines in email, forum posts, your MySpace profile, or any place you would "sign your name", In addition to the concepts introduced, there are step by step "how-to’s" in creating a signature line in Outlook, Outlook Express and popular web-clients.

Use A Custom Image For A PayPal “Buy Now” Button

Cenay Nailor — Sat, 12 Apr 2008 17:54:29 +0000

If you are selling anything on the Internet, PayPal is probably one payment option you offer. Have you ever wished you could use your own image for the Buy Now button that PayPal offers?

Well, you can.

This video demonstrates how to use your own custom image as your Buy Now button, encrypted with the name, item number, amount and a few other settings.

(This video assumes you have a hosting account where you can place your own image (for PayPal to find), and that you have created (or had created for you) an image you want to use)

Nuts! You caught me! I don’t yet have this video re-rendered into FLV format, so for now, click the image to the right to play this full screen.

Basic HTML (For MySpace, Websites and Comments)

Cenay Nailor — Sat, 12 Apr 2008 17:09:26 +0000

Are the phrases "tags", "body text" and "tables" foreign to you? Do you wish someone would just explain what they are, and how you use them?

This video will show you the basic’s. By the end of the video, you can add headers and small formatting to your MySpace profile or embed a link to your page in your comments on other people’s sites.

For an online reference that teaches you more than this video, please visit http://www.html.net/tutorials/html/

Add an Opt-In Form To Your Blogger.com Blog

Cenay Nailor — Fri, 11 Apr 2008 06:12:08 +0000

When you have autoresponders setup and want to add an opt-in form to your blog, visit here. While this video is specific to an Ad Group I work with, the "how-to" part explains in detail how to add this type of form to your Blogger.com blog.

For the Ad Group members, please open the email I sent with the form particulars for you, before starting this video. For everyone else, copy the "Form Code" that you generated in your autoresponder instead of the code shown in the email in the video. If you have any questions, let me know and I will try to clarify it for you.

UPDATE: Recently, a viewer asked how to get a copy of the "email" used in the video. Here is my response. I hope this clarifies things a bit:

"Thanks for the question. Now, I am afraid I have some bad news.

That video was originally created for a group of people that are participating in an Ad Group I setup. Which means it’s specific to them.

Now for the good news. The *email* was nothing more than a *copy* of the AWeber web form I created in my AWeber account. In fact, I created another video showing how to create the list, the web form and copy the HTML text (what was in the email).

You can watch the *Adding an AWeber Opt In Form To A Wordpress blog* to see how to do that part. Then, once you have copied the text in the Get HTML page, continue with the Blogger.com video.

Sorry it’s in two parts. When I created the first video (Blogger.com), I wasn’t releasing the video’s to the public.

I will add these notes to the Blogger.com video to maybe cut down on the confusion in the future. And as always, please let me know if I can create a video for you. "

Delete Unwanted Comment From Blogger.com Blogs

Cenay Nailor — Fri, 11 Apr 2008 05:45:59 +0000

Sometimes, people you don’t know will post comments of a nature you would rather not have on your blog for all the world to see. Sadly, many people have discovered that adding a comment to your blog will "leech" some ranking (Google love) from your site, and send it their way. I have also had comments added to some of my blogs about drugs, porn, or someone else’s business opportunity.

This short video will show you how to remove the unwanted comment in less than 2 minutes.

Add A Link List To Your Blogger.com Blog

Cenay Nailor — Fri, 11 Apr 2008 05:18:52 +0000

I can already hear this question resounding in your head…

"Now what the hell is a link list?"

I could get all technical on you and say it’s a collection of related "sites" that you provide hyperlinks to access, but I might scare you. How about this definition… It allows you to send visitors exactly where you want them. This video builds on the process started in Create a Blogger.com Blog, so be sure you start there.

Add an Email Account To Outlook

Cenay Nailor — Fri, 11 Apr 2008 05:12:37 +0000

This video will take you step by step through the process of adding a new email account to Outlook using the built in wizard.

You will need to know the POP server and SMTP server names and account login information to make this work. While it only focuses on Outlook, most email clients are the same in terms of features. If you don’t know your POP and SMTP settings, please consult your system or ISP administrator.

Note: Generally, when you registered for a new email account, they sent this info in the introduction email, or provide the settings on the FAQ of their site.

Creating A MySpace Page

Cenay Nailor — Sun, 06 Apr 2008 13:25:56 +0000

MySpace.com is home to more than 100 million folks, just like you. They have discovered the fun of being able to connect with others of like interests, sharing video’s and blogs, passing around slide shows that show off vacation trips or products they offer.

To the smart "marketer", MySpace is a wonderous tool. More than 100 million people in a closed environment.

Although MySpace offers a lot, a lot of care has gone into making it user friendly. You don’t have to be scared to create a "web-presence" that extends your message, even if you don’t have a domain name and a hosting account.

MySpace makes it easy. This video makes it even easier

Updating Your MySpace Profile Photo

Cenay Nailor — Sat, 05 Apr 2008 07:59:40 +0000

In the MySpace community, every time you post a comment on someone’s page, send a message, or request a friendship, your photo is being displayed.

You can update the photo any time, as many times as you want.

This video walks you through uploading a new photo, and setting it as the default image to use. GIF’s made a great profile photo because they allow you to display more than one image at a time. In other words, more marketing space!

Add A Slide Show To Your MySpace Profile

Cenay Nailor — Sat, 05 Apr 2008 06:28:35 +0000

To dress up your MySpace profile, you can add slide shows of photos (or any digital images). Here are the basics on how to sign up for a free Slide.com account and create your first slide show.

Slide.com has options to create a single slide show, and share it across multiple platforms like MySpace, Facebook, Bebo, Friendster and a dozen other social networking sites, at the click of a button.

You can add music, backgrounds and set options for how the captions appear. There are lots of options to play with, so get bold and experiment.

Edit Your MySpace Profile

Cenay Nailor — Wed, 02 Apr 2008 06:55:56 +0000

It’s time to start really putting your personality into your MySpace page with colors, backgrounds, images and font choices. This video explores where you can edit your profile, tools you can use and third party options that have pre-built "themes" you can select from. This video is a little long, but covers a lot of information. I am working on a breakdown into smaller bite sized pieces, so check back often.

Find and Embed Video on Your MySpace Page

Cenay Nailor — Tue, 01 Apr 2008 05:50:09 +0000

Video enhances your message, demonstrates your point, entertains and provokes. There are dozens of ways to use video to enhance your marketing message or just entertain your MySpace visitors.

This video covers methods to find and embed video onto your MySpace page, add to comments that you leave for others or even embed and send in messages to other MySpacer’s.

MySpace makes it easy. This video makes it even easier

Create A Blogger.com Blog

Cenay Nailor — Mon, 31 Mar 2008 05:34:31 +0000

Before you can create a blog, you need a Google "recognized" email account.

This video starts at the beginning, and walks you all the way through defining an email address to use, validating that email address, setting up your Blogger.com account, creating a blog, choosing a template and making your first post.

Remember, a Blog is an amazingly effective tool for driving traffic to the site of your choice, train your downline or business partners in whatever you need them to know, allows you to "vent" and publish "whitepapers", all at the push of a button.

"I Can Do It Myself" Videos» *I Can Do It Myself* Video Series : Videos That Empower You : Cenay Nailor

Optimize Your Site On A Budget

Basic HTML: Webpage Tutorial

New Features Coming!

Premium Content Coming

Affiliates Link Cloaking A Mystery To You?

SEO With Plugins: Exploring Headspace2

Install TeamViewer – Remote Support Software

Install Revolution Streamline Theme

Add Page Peel To Your Blog

Resources:

Edits To Your Theme:

Affiliate Theme In Review

Converting An Existing Blog To Affiliate Theme

A Trick For Tracking Your Tweet URL’s

Links Referenced in the video:

SEO Juice With Internal Linking

Links Referenced

Related articles by Zemanta

Add AWeber Form To Wordpress Blog

Filezilla FTP Client To Transfer Files

Find, Install and Use Filezilla FTP Client To Transfer Files

Amazon Carousel Widget For Wordpress Blogs

Create HubPages Account & Build Your First *Hub*

Magnetic Sponsoring Backoffice Primer

Using iFrameGen With A Site Build It! Site

Get Your Own Copy Of iFrameGen

Related Videos

Install Your Own Wordpress Blog

Create Folder

Download and Extract Wordpress

Create MySQL Database

Install the Wordpress Software

Tweaks – Updating Your Blog’s Settings

Settings Within Wordpress

Working With Themes

You Can Now Download The Videos And Play Them Offline

Organize, Compress and Send Digital Photos

Publishing Adsense Ready Sites

Upgrade Wordpress Version

Easy Website Creation – No Geek- Speak Required

Edit Wordpress Themes To Add External Links

Advanced Domain Name Search Feature

Google Alerts – Your Personal Assistant

Create eBay Sellers Account & Insert First Auction

Low Bandwidth or Dial Up? Here’s An Option

Dropdown Menus Using CSS

Working With The Hero Book

Save Adobe PDF’s and Send Via Email

Using Signature Lines To Prospect

Use A Custom Image For A PayPal “Buy Now” Button

Basic HTML (For MySpace, Websites and Comments)

Add an Opt-In Form To Your Blogger.com Blog

Delete Unwanted Comment From Blogger.com Blogs

Add A Link List To Your Blogger.com Blog

Add an Email Account To Outlook

Creating A MySpace Page

Updating Your MySpace Profile Photo

Add A Slide Show To Your MySpace Profile

Edit Your MySpace Profile

Find and Embed Video on Your MySpace Page

Create A Blogger.com Blog

"I Can Do It Myself" Videos» I Can Do It Myself Video Series : Videos That Empower You : Cenay Nailor

Create HubPages Account & Build Your First Hub