div#page>div.logo+ul#navigation>li*5>a

…can be expanded into:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Show all download links from Zen Coding

Demo
Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

• Aptana (cross-platform);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

• TextMate (Mac, and can be used with E-text editor for Windows);
• TopStyle;
• Sublime Text;
• GEdit;
• editArea online editor;

The Expand Abbreviation function transforms CSS-like selectors into XHTML code. The term “abbreviation” might be a little confusing. Why not just call it a “CSS selector”? Well, the first reason is semantic: “selector” means to select something, but here we’re actually generating something, writing a shorter representation of longer code. Secondly, it supports only a small subset of real CSS selector syntax, in addition to introducing some new operators.

Here is a list of supported properties and operators:

• E
  Element name (div, p);
• E#id
  Element with identifier (div#content, p#intro, span#error);
• E.class
  Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
• E>N
  Child element (div>p, div#footer>p>span);
• E+N
  Sibling element (h1+p, div#header+div#content+div#footer);
• E*N
  Element multiplication (ul#nav>li*5>a);
• E$*N
  Item numbering (ul#nav>li.item-$*5);

As you can see, you already know how to use Zen Coding: just write a simple CSS-like selector (oh, “abbreviation”—sorry), like so…

div#header>img.logo+ul#nav>li*4>a

…and then call the Expand Abbreviation action.

There are two custom operators: element multiplication and item numbering. If you want to generate, for example, five <li> elements, you would simply write li*5. It would repeat all descendant elements as well. If you wanted four <li> elements, with an <a> in each, you would simply write li*4>a, which would generate the following output:

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

The last one–item numbering is used when you want to mark a repeated element with its index. Suppose you want to generate three <div> elements with item1, item2 and item3 classes. You would write this abbreviation, div.item$*3:

<div></div>
<div></div>
<div></div>

Just add a dollar sign wherever in the class or ID property that you want the index to appear, and as many an you want. So, this…

div#i$-test.class$$$*5

would be transformed into:

<div id="i1-test"></div>
<div id="i2-test"></div>
<div id="i3-test"></div>
<div id="i4-test"></div>
<div id="i5-test"></div>

You’ll see that when you write the a abbreviation, the output is <a href=""></a>. Or, if you write img, the output is <img src="" alt="" />.

How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:

'html': {
'snippets': {
'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
...
}, 

'abbreviations': {
'a': '<a href=""></a>',
'img': '<img src="" alt="" />',
...
}
}

more updates??
leave comment...

Over the last few years we have seen the rise of some fantastic tools to allow us to get creative with the typefaces we use on our websites. There are really two mainstream approaches here; @font-face, and of course, Flash.

All of the solutions available have their drawbacks; not all are free for instance, but one thing is for sure; They are all advancing web typography for everyone. Let’s get stuck in and see what options are available to us to use different fonts on the web.

1. Google Font API

Google recently entered the font replacement game with their free Font API and font directory. It is still a beta lab product, but is incredible easy to use, and loads the fonts on Google’s back, just like has become common for loading Jquery these days. The problem with Google Font API, is its font directory though. There are only 19 fonts currently available, and compared to other options that are only limited by the amount of free fonts that you can find, this is fairly lacking in choice.

However, like most of Google products, it is a fantastic piece of engineering, and is incredible easy to use. All you have to do is include a dynamic  file in the head of your document, and from there, you are free to use the font anywhere in your css. The syntax allows you to load multiple fonts, different font variants and so on in the same single line which is fantastic. The following line, for instance, would load Cantarell italic and Droid Serif bold.

<link rel="stylesheet" type="text/css"  href="http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold" />

To learn how to implement the Google font API, Jeffrey Way at Nettuts has made a fantastic quick video

2. Typekit

Typekit is a premium web font replacement service, with a useful free plan on a limited selection of fonts. They work with foundries from all over the world to provide their users with the best selection of fonts possible, and this shows with the number of fonts they are able to provide compared to other services; nearly 500! Some of the most influential web designers on the internet use it, and that’s testament to its quality and delivery.

Typekit aims to make using custom fonts in your web design as easy as possible, and so offers two ways to implement your chosen fonts into your website. The first is via the kit editor. This Kit Editor is for those that are a little less web language savvy than some of us, and instead of having them hand code the fonts into their design, it asks you what selectors you want the font applied to (class’s, id’s, elements), and by clicking publish, Typekit will sort everything else out for you via the one line of code you insert into your html document.

The other option provided to you is not to use the Kit Editor, but hand code the fonts into your css yourself. Once you’ve included the one line of code in your document, the font name will be recognised and loaded!

If you are willing to pay premium for your web fonts then, this is the way to go. The range of premium and free fonts that you have access to, and the ease of implementation is incredible. A portfolio price plan weigh’s in at $49.99 a year, so it is all about weighing the pro’s and con’s of what you are getting with that, and whether the fonts you want to use are available under other font replacement techniques.

3. Google Font Loader

The Google Font Loader is a secondary part of the Google font API; a Javascript library that gives you more control over font loading than the Google Font API does.

Co-developed by Google, and Typekit, it allows you to load fonts from multiple font providers, including Google, Typekit, and Ascender, as well as pretty much any custom site you want.

What the font loader does, that the Google Font API doesn’t is applies class’s to the page while the font’s are loaded, and after the font is loaded, allowing you specify a font to render in while the font loads. This is not supported in the Google Font API however, where for example, Chrome, IE and Safari will just not render the text until the font loads andFirefox will render the font in the browsers default font until the font loads causing a flash of unstyled text. Although you may still get a flash with Google Font Loader, the change won’t be so drastic as you’ll be able to choose that default font.

4. FontSquirrel

FontSquirrel is more of a database of free font’s, but it comes with a fantastic integration for font-face, a css way of serving web fonts. Google and Typekit use font-face, although it is far more refined via server sided scripts, and javascript. FontSquirrel however, is pure CSS. Once you browse the incredible directory of free fonts (theres 610 of them at the time of writing this!), the site will tell you if the font license allows you to use it with font-face, and on most fonts, there is a pre-built tab where you can instantly download a font-face kit for that font, which will then take you only a few seconds to implement into your css.

For those font’s that aren’t provided with a font-face kit, but are still font-face compatible, or font’s that font-squirrel is yet to come across, there is also a free font-face kit generator available! Simply upload your font file, and the generator will pretty much do the rest, unless you are looking to customise your kit a bit. This is by far the easiest, and best free way to implement a fantastic set of fonts into your website in my opinion. The ease of use, and speed of implementation is incredible.

5. sIFR

sIFR stands for Scalable Inman Flash Replacement, but its basically a technology that replaces your text with a flash replacement, styled in your required font. It does require javascript and flash to be enabled; if not, then your css defined font will be used. sIFR does however seem fairly complex to set up; you have to create a flash file of your font, load javascript, and then choose what elements you want to font replace via javascript. The problem though, is that sIFR is heavy, so causes pages to load slower, and of course, doesn’t work on most mobile devices.

However, like font-squirrel, and it’s font-face kit generator, it doesn’t limit you to a select library of fonts like the Google Font API does, and so provides much more versatility. Unlike the font-face alternatives above though, sIFR should only be used for small pieces of text, like headings. Using it on your whole site will seriously damage your site’s download time, and usability.

6. Cufon

You upload your font (with different variants if require), choose your characters, and then optimise your performance (quality), and file size for your site. Once this is done, you’ll need to include cufon javascript file, as well as your generated font file, and then choose what selectors you want to apply the font to. Definitely not as tidy as some of the font-face examples. It is however, compatible with most javascript libraries, so with their support, your selectors can become more dynamic.

But, have you ever thought about which post made your reader subscribe to RSS or follow your twitter? Which post made your readers think “this guy knows what he’s talking about” or “I definitely want to see what she says next” or simply “that’s awesome, I want to read more!”.
These readers are important to you, because they “marked” your blog and will get back to it in the future, even if they don’t say it out loud right now.

Obviously, not all readers comment and it is hard to know whether they liked what you wrote or not if they don’t provide feedback.
However, there are ways to measure the success of a post besides comment count:

1. Which posts have the highest number of visits?
2. The highest average time of visits?
3. Did the visitors leave your blog right after reading these posts or did they navigate to another page in your blog (bounce rate and pageviews stats).
4. Which posts have search engine as the largest source of traffic? which keywords were used?
   If your blog is not ranked high at search engine results by default, but still you get a lot of traffic from search engines for some keywords, it means you wisely used long tail keywords in your posts.
5. Which posts were found in internal site search? using which keywords?

1. Which posts got high rankings in blogging communities?
2. Can you detect the posts that got re-tweeted or stumbled upon many times?
3. Or the ones with the highest number of trackbacks and pingbacks?
4. Some bloggers add a voting plugin that displays a ranking box below each post. This is also an excellent tool to detect the best posts.

Now you can get to know your readers better and learn what they look for.
If your blog deals with various topics, this is your chance to know which topics to focus on.
I’m not saying you should accommodate all readers and write about things that you have no interest in.
My point is that after you picked a niche, and your blog is already up and running for some time, you can (and should) refine your blog niche and detect those topics that both you and your readers find the most intriguing.

Additional resources

• Driving Traffic to your blog by using your Google Analytics
• What to do When No One is Commenting: 10 Tips
• Google Analytics Video Tutorial – Blogging Guide
• 12 ways to Increase comments on your Blog

Select any number between 10 and 99 in your mind. Add the two digits of number and subtract the result from the original number. Now see the sign for final number from the table above. Concentrate on the red circle for an instance and click it ,you will see the sign for the resulting number

For eg. select 76. add 7+6=13, subtracty 13 from 76=63.

Not only have social media marketers taken up the infographic craze, but SEOs as well. Infographics, done well, can build a large portfolio of quality links. I’ve since noticed many SEO companies who are developing infographics for their clients and pushing them in the social media sphere.

When I discovered that so many SEO infographics already exist, I decided to rate them. David McCandless, at informationisbeautiful.net, revealed four criteria when evaluating information design:

1. Interestingness - Is the content relevant and original, such that the viewer sees value in it?
2. Integrity - Can I trust the content?
3. Form - Is it pleasing to the eye?
4. Function - Is this information useful and useable?

Take a look at his infographic about infographics:

Below, you’ll see some of the best infographics I could find about online marketing. I’ve rated them by giving pluses (+) for each category discussed above.

Elliance has, by far, the most search marketing infographics. The infographics cover everything from PDF Optimization to Keyword Clustering. I found most of the infographics contained quality graphics and interesting ideas, but they slightly lacked in functionality — meaning, most of the concepts presented are low-level, basic concepts that most SEOs should already know.

SEO Factors

• Interestingness: +
• Integrity: +
• Form: +
• Function: +

Google PageRank Explained

I found this infographic very beneficial in visualizing the Internet in terms of PageRank. PageRank is valued exponentially. While it’s easy to increase PageRank by 1 at the bottom of the mountain (e.g., from 2 to 3), it becomes much harder to increase by 1 (e.g., from 6 to 7) as you move up the mountain.

• Interestingness: ++
• Integrity: +
• Form: +
• Function: +++

Google Facts and Figures

Although Pingdom’s infographic about Google doesn’t entirely pertain to SEO, I thought it was a great visualization of numbers. It is interesting to note how Google’s innovative search technology has made it the leader among search engines.

• Interestingness: +
• Integrity: ++
• Form: ++
• Function: ++

Being involved in SEO and marketing in general, I am usually bombarded by family members and friends with questions about marketing their website or their future website on the Internet. Because of this and my willingness to help just about anyone I know, you can usually find me in a small dark corner at a family party (it has to be small and dark because my wife gets ticked when I’m not up and socializing with everyone), on the phone in the car, or answering an email, Facebook message, or Twitter message about SEO and other internet marketing tactics.

I was on a call yesterday with one of my best friends from high school. Our conversation was focused on general search engine optimization principles and link building tactics that could provide a good foundation and hopefully, if he does them right, some strong rankings in the search engines. One thing I emphasized is the fact that what ever he does, he needs to build links naturally. A natural link building campaign is crucial for success in SEO.

A natural link building campaign is one that is just that, natural! Getting 50,000 links within the first twenty days of your website’s existence is definitely not natural. Getting a slow trickle of links coming into your website and then building up looks much more natural. Also, getting 50,000 links pointing to your home page with the same anchor text is not natural. Vary your anchor text and include long tail versions of your keywords. You should also build links to other pages of your site in addition to your home page. All of these things help with building a natural link campaign.

In terms of links, there are two types of links you can get for your websites, external and internal links. Both are very important and can make a huge difference in your search engine rankings. I want to discuss in detail, ten ways to effectively jump-start your link building campaign.

Friends & Family Members

When beginning a link building campaign, one very natural way of obtaining links is from friends and family members. I just opened up our family blog and counted all of the friends and family who we have added in our blogroll. The grand total… 41. How hard is it to simply call up (recommended – it’s more personal) or email your family and friends who have blogs or other sites, and ask them for a link to your new website? Not hard at all! In fact, because they are your friends or family members, they will probably do it without hesitation. You can do the same thing with Facebook, MySpace, Twitter, etc.

Add A Blog To Your Domain

Google loves blogs! Google loves fresh content! Google loves internal links! Internal links from other pages of your website are a guaranteed way to help you increase your rankings in the search engines. Adding a blog to your domain is a great way for you to easily add new content to your website on a regular basis. In most cases, adding a blog to your main domain is rather simple and can be done in as little as three clicks of your mouse. Web hosting companies like myhosting.com, Hostmonster, & Bluehost offer one click installations of blog platforms like Wordpress or b2evolution.

Adding a blog, posting to it at least once daily, and linking back to your home page and other important pages of your website with keyword anchor text is a great way to gain a lot of internal links. When blogging, you should also link out to other websites that interest you and websites that are in similar industries. You might also consider adding images, videos, polls, etc. Mix things up! Make it look natural! Most important, have fun!

Local Organizations

Just about every city in the country has a local chamber of commerce; mine would be the Lehi Area Chamber of Commerce. Joining a chamber of commerce will not only get you a very good link back to your website, but also provides networking opportunities with other local businesses. Most times, depending on your business, you can generate new leads rather easily by getting to know other individuals and businesses in your area.

Local News

Developing relationships with local newspaper writers and always making yourself available for comments on news stories that involve your industry is a great way to build awareness about your company and get links back to your website (if the newspaper is published online).

Help A Non Profit Organization

You would be surprised how many non-profit organizations are operating in your city and your state. Every one of us has been given talents and certain things that we are good at. I guarantee that there is a non-profit organization that could use your help, whether it is with designing their website or painting the conference room of their new office building. If you offer of yourself and your services freely, you can most likely ask for, and get a link to your website from theirs.

Submit Your Site To Local & Industry Specific Online Business Directories

Anyone studying SEO can usually find a blog post about submitting your website to directories on the Internet. Yes, this is a valuable link building tactic, but before you go crazy and start submitting to thousands of directories, seek out local directories and directories that are specific to your business. Submit to these first and take your time filling out all of the information that they ask for. These will be some of your most valuable links since they are so relevant to your website and business.

Social Bookmarking

You have probably heard the term social bookmarking. You have probably heard that social bookmarking is a great way to build links. Well, it is and it isn’t… You can waste a lot of time social bookmarking if you are submitting to the wrong sites. I limit my social bookmarking to Mixx, Propeller and sometimes Kirtsy. The trick to social bookmarking is to not only bookmark your website, your blog posts, and other things related to your website, but bookmarking lots of different things that interest you. This will make your bookmarking profiles look much more natural to both viewers and the search engines.

Write An Article And Submit To Article Directories

Writing articles and submitting them to sites like Ezine Articles, Article City, and Go Articles, also known as article marketing, is a great way to get links back to your website. Take time to write a very detailed article about your industry and submit it to a few article directories like the ones I listed above. You will get links back to your website by properly using the author resource or bio box at the end of the article. You should tell a little about yourself and your company, while adding keyword rich anchor text links pointing back to your website.

Write And Submit A Press Release

Writing press releases and submitting them to places like PR Web or Web Wire is a great way to generate interest and buzz about your business and also to get links back to your website. This method of link building is a little more difficult than other links that you can get for your website. Writing a press release takes skill… a skill, which the average person, like me, does not have. Press releases have certain requirements that must be met, a certain format that must be followed, and in most cases, need to be super interesting. Not having any of these elements can almost guarantee that your press release will either be outright rejected or not distributed to other news related websites.

Build A Hub Page Or Squidoo Lens

Building a Hub Page or Squidoo Lens is a fun way to get links back to your website. To date, I have built 73 Hubs and 25 Lenses for my own personal websites and hundreds for clients that I have managed. The most effective Hub Pages and Squidoo Lenses are those that have at least 450 words of text about a certain topic or subject, videos, pictures, polls, and other gadgets that are easy to add. You want to make the page as interactive as possible so it provides value for anyone who happens to read it. You are allowed two links to other websites from your Hubs and a handful of links (be conservative, don’t spam) from your Lenses.

Building links isn’t pretty. But, in order to rank well in the search engines, it is absolutely necessary. These are ten excellent ways for new companies or new website owners to start building links to their websites. There are many others and I encourage any of our readers to add to this list by commenting on this post.

My biggest concern was the lack of extensions (“plugins” for Firefox users), but after about an hour on the Google Chrome Extensions site, that was no longer a problem. So, I’ve compiled a list of the best Chrome Extensions for SEO and a few other can’t-live-without extensions (in no particular order).

Includes page, backlink, traffic and rank stats, and more.

[download & install now]

Includes internal and external page data, social media stats, server information and more.

[download & install now]

Shows pages similar to the Web page you’re currently browsing.

[download & install now]

Shows domain, website and server details at a glance.

[download & install now]

Shows Google PageRank on your toolbar.

[download & install now]

Appears to be based on the Firefox plugin (currently in beta).

[download & install now]

Shows page performance data.

[download & install now]

Get domain, page and server data as well as PageRank and the hosting country’s flag icon.

[download & install now]

Shows great on-page content information.

[download & install now]

Get Whois, DNS, Email and Ping information for the current domain.

[download & install now]

Great for front-end inspection of the Web page you’re browsing.

[download & install now]

Web developer tools for Chrome.

[download & install now]

Converts image links to a full gallery with thumbnails. Lightbox-style.

[download & install now]

Replaces image and video links with a lightbox preview popup.

[download & install now]

Display web pages using IE in a tab.

[download & install now]

Draw a ruler to measure any Web page element.

[download & install now]

Web developer tools. This is a miniature toolset. Pendule has more functionality.

[download & install now]

Load the page through a proxy.

[download & install now]

Switch proxy setting with one click.

[download & install now]

Chrome session management.

[download & install now]

Save sessions of your opened tabs to quickly re-open whenever you like.

[download & install now]

Displays your current IP address.

[download & install now]

Auto-loads the next page as you scroll through a Web page. For example: Google SERPs, Delicious bookmarks, etc.

[download & install now]

Save interesting stuff you see on the Web into your Evernote account for use on the Web or mobile.

[download & install now]

Quickly access your Google Apps, or custom URLs, that you frequently use.

[download & install now]

Test web pages in different resolution settings or set your own resolution.

[download & install now]

Block all Flash on all pages or use the whitelist manager to allow certain pages to display Flash.

[download & install now]

Preview PDFs, PowerPoint documents and other docs in Google Docs viewer.

[download & install now]

A safe browsing tool that warns of malicious sites.

[download & install now]

Automatically loads the next page for multi-page sites by just scrolling with your mouse.

[download & install now]

Converts HTML pages to PDF with one click.

[download & install now]

Highlight text and it’s automatically copied to your clipboard.

[download & install now]

Create mouse gestures to perform certain tasks.

[download & install now]

URLs and Emails displayed in text will be automatically converted to a link.

[download & install now]

Find tabs in this vertical tab list and easily switch to new tabs or close immediately.

[download & install now]

Backup and sync your bookmarks across computers and browsers.

[download & install now]

Translate Web pages into your language of choice.

[download & install now]

Use to remember your passwords. Can be turned off.

[download & install now]

Manage your passwords with RoboForm.

[download & install now]

Manage your password with LastPass.

[download & install now]

Right-click on links will automatically open the link in a new tab.

[download & install now]

Shorten URLs with goo.gl

[download & install now]

Limit the amount of time you spend on certain sites so you can focus.

[download & install now]

Always opens new tabs to the far right of your toolbar. The default in Chrome is to open new tabs directly to the right of the current tab.

[download & install now]

Easily search in multiple search engines.

[download & install now]

Organize your feeds into a magazine-style start page.

[download & install now]

Performs a site search for the current domain rather than just a page find search.

[download & install now]

Send current Web page to several Internet services: Gmail, Facebook, Twitter, Delicious, Wordpress, PDF Online, etc.

[download & install now]

Set yourself reminders that can be synced on multiple machines.

[download & install now]

Opens new tabs and brings them to the front for immediate attention.

[download & install now]

Take a screen capture and edit it immediately with Aviary tools.

[download & install now]

Capture a screen image and edit immediately using Picnik tools. Also pulls images from online at Flickr, MySpace, etc.

[download & install now]

Grab the entire page or just a section and save it to your desktop or edit using Pixlr tools.

[download & install now]

Capture the whole page or sections of the page in a JPG format.

[download & install now]

Support for many blogging platforms: Wordpress, Blogger, Typepad, etc. Associates images, video and other content to be inserted into your blog post as you write.

[download & install now]

Easily shorten and share links with Bit.ly.

[download & install now]

Shows tweets about the current Web page.

[download & install now]

Share the Web page on your favorite social network.

[download & install now]

Easily Digg the latest story and find out what is being discovered at the moment.

[download & install now]

Manage your Stumbles and discover new pages.

[download & install now]

One-click submission to bookmark your current Web page.

[download & install now]

Manage your Delicious account, use a pop-up window for tagging and keyboard shortcuts are available.

[download & install now]

Easy access to your tags, bookmarks and Delicious account management.

[download & install now]

Receive alerts for Twitter, Google, Backtweets, etc.

[download & install now]

Quickly post status updates and view your wall and news feeds.

[download & install now]

Manage your Twitter accounts easily. Based on the Firefox plugin.

[download & install now]

Manage your Yelp account.

[download & install now]

Will automatically redirect to the HD version, if available, and play as normal.

[download & install now]

Customize your start page to include shortcuts and recover closed tabs. Also take notes as you browse.

[download & install now]

Subscribe to feeds, in Google Reader, from the address bar.

[download & install now]

Who says you don’t need music to do SEO and blog?

[download & install now]

During the writing of this post, I had several windows & tabs open with all of these extensions and more running simultaneously. I installed plugins and managed to tweet through Tweetdeck as well. Nothing slowed down. Nothing froze. I experienced no problems. That’s huge compared to Firefox or IE.

I’m sure I’ve missed more than a few so please comment with your favorite extensions to share with everybody.

** Be aware that extensions are not always published by the brand represented (e.g. Flickr, Delicious, Yelp, etc.).

Visitors, here’s the chance for you to grab free quality web resources right on my blog. Yeah, I have gathered some free web directory which is certainly human edited and have good PageRank. Most expert says that submitting in Web Directories are not worthy. I do not disregard their views but the year I have spent in this industry and seen some web directories creates back links for websites. And if it is from quality web directories then that will certainly fetch some values for your websites. And above all its free. Nothing comes free on the web except web directories. Yeah you have to spend your few hours to judge the quality of web directories.

Btw I’ll update the lists whenever I’ll be free. These are all free web directory. Btw if are a admin of web directory and don’t find your web directory in my lists. Just drop a comment with a link. I’ll certainly review and upload, if its a quality web directory.


If you find any listings which is made for sponsor/reciprocal only. Please do a favor by dropping a comment with the link of that web directory. I’ll immediately remove.

Lists of Free Web Directories: