Cosmos Blog » Technology

35 Adobe AIR Tutorials for Web Developers

cosmos — Wed, 13 Jan 2010 09:05:47 +0000

Adobe AIR gives developers all kinds of possibilities to create applications. As Adobe’s websites says, “The Adobe® AIR® runtime lets developers use proven web technologies to build rich Internet applications that run outside the browser on multiple operating systems.”

In this post we’ll feature 35 tutorials that will help you to learn more about working with AIR. Some of them are at a beginner level that will introduce you to AIR, and others are more advanced and will teach specifics.

Introduction to Adobe AIR

Adobe AIR and Flex – Getting Started

Building an Adobe AIR Application with Flex

Writing Well-Behaved, Efficient AIR Applications

Performance Apps for AIR (video)

Christmas is in the Air (building a to-do list app)

How to Build a Contact Manager in AIR using XML Part I and Part II

Building a Desktop Application with Ext, AIR, Aptana and Red Bull

Developing Cross-Platform Adobe AIR Applications

Create a Drag and Drop MP3 Player with Adobe AIR

Building Lupo: A Case Study in Building Commercial AIR Applications

Building Web and Adobe AIR Applications from a Shared Flex Code Base

Creating Desktop Applications for the Cloud with Adobe Flex, AIR, and Amazon S3

Adobe Air Tutorial for HTML/JavaScript Developers

Implementing Drag and Drop Between the OS and AIR

Notification Windows with JavaScript and AIR

Recreating MapCache on Adobe AIR

Creating a Downloader for YouTube with Flex/AIR

Walk on AIR: Create a To-do List in Five Minutes

Adobe AIR & Flash Tutorial

Developing AIR in Flash (video)

Webcams, PNGs, and AIR (video)

How to Store Adobe AIR Application Preferences Using JavaScript

Take Your CSS to the Desktop with AIR

Adobe AIR: Supercharged Development with Debugging

Creating an AIR RSS Reader Application from Scratch with Flex and PureMVC

Building an XML Viewer on AIR with Flex

Synchronizing Drupal Modules with Adobe AIR

Getting Started with Adobe AIR as a Web Developer/Designer

Simple Zip Viewer with JavaScript and AIR

Reducing CPU Usage in Adobe AIR

Performance Tips for Adobe AIR

Create Your Own Adobe Air Application with Flash

Build a Custom File Extension AIR App

How to Display your number of tweets in full text mode on your WordPress blog

cosmos — Mon, 28 Dec 2009 02:23:00 +0000

Twitter is obviously a very useful tools for bloggers. Did you ever wanted to know how many times your posts are sent to Twitter by your readers? If yes, just read on and learn how to know it, and display it on your blog, in full text mode.

paste the following function in your functions.php file:

function tweets($url){
$content = file_get_contents("http://api.tweetmeme.com/url_info?url=".$url);
$x = new SimpleXmlElement($content);
$tweets = $x->story->url_count;
echo "Tweets: ".$tweets;
}

Once done, you can get the number of tweets for any web page you want, for exemple:

To automatically display how many times your posts has been tweet, open the single.php file file and paste the following code:

permalink); ?>

The Tips of Writing Better CSS Code

cosmos — Mon, 09 Nov 2009 02:22:31 +0000

CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code.

1. Don’t Use Global Reset

Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it. Instead use subset of CSS Resets like one from Eric Meyer.
Not Good

*{ margin:0; padding:0; }

Better

html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Do not use IE Hacks

Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. You should use conditional statements instead to target specific versions of Internet Explorer.
For example, using the below lines of code within your tag will load the iestyles.css file only when browser is Internet Explorer version 6 or less.

"stylesheet" type="text/css" href="styles/ie-styles.css" />

For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments

3. Use Meaningful names for IDs and Classes

Suppose you define your sidebar styles using class .leftbox and after some redesign, you float it to right, then would it be meaningful to have leftbox as name for right floated box. You should put some thought before declaring classes and IDs for elements so that they are meaningful and easy to understand later.

4. Utilize CSS Inheritance

If multiple child elements of a parent element use same styles on your web page, it will be better to define them for their parent element and let the CSS inheritance do all the work. You’ll be able to easily update your code later and it’ll also reduce the CSS file size considerably.
Not Good

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Better

#container{ font-family:Georgia, serif; }

#container{ font-family:Georgia, serif; }

5. Combine multiple Selectors

You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.

Not Good

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Better

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Use Shorthand Properties

Utilize the shorthand properties of CSS to quickly write CSS code and reduce file size. Shorthand notation can be used for margin, padding, border, font, background and also for color values.
Not Good

li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}

li{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top:5px;
	padding-bottom:10px;
	padding-left:5px;
}

Better

li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}

li{
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	padding:5px 0 10px 5px;
}

Here’s a complete guide to CSS shorthand properties.

7. Organize CSS Code

Organizing your CSS code in a certain pattern will make it easier to find things at later time and save you a lot of time looking for a specific style definition.
Here is a sample organization that you may use:

/*————————-
CSS Reset
————————-*/
/*————————-
Generic Classes
————————-*/
/*————————-
Layout styles
————————-*/
/*————————-
Section specific styles
————————-*/

/*-------------------------
	CSS Reset
-------------------------*/

/*-------------------------
	Generic Classes
-------------------------*/

/*-------------------------
	Layout styles
-------------------------*/

/*-------------------------
	Section specific styles
-------------------------*/

8. Make CSS Readable

Writing readable CSS will make it easier to find and update a style declaration later. Either group all styles for a selector in one line or each style in its own line with proper indentation. You can also combine these two techniques together.

/*————————
Each Style on new line
———————*/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*————————
All Styles on one line
———————*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

/*------------------------
	Each Style on new line
	---------------------*/
div{
	background-color:#3399cc;
	color:#666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	height:300px;
	margin:10px 5px;
	padding:5px 0 10px 5px;
	width:30%;
	z-index:10;
}

/*------------------------
	All Styles on one line
	---------------------*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Add proper Comments

Comments can be used to separate different sections of CSS code

/*——————–
Header
—————–*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*——————–
Content
—————–*/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*——————–
Footer
—————–*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

/*--------------------
	Header
	-----------------*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/*--------------------
	Content
	-----------------*/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
	Footer
	-----------------*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Order CSS Properties Alphabetically

This might be a difficult way to write CSS but it’ll make it easier for you to find out any property easily at a later stage.

div{
background-color:#3399cc;
color: #666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height: 300px;
margin: 10px 5px;
padding:5px 0 10px 5px;
width: 30%;
z-index:10;
}

div{
	background-color:#3399cc;
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif;
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
}

11. Use External Stylesheets

It is always a good design practice to separate content from presentation. Place all of your CSS code into external stylesheets and use the to reference stylesheets within a web page. By placing CSS into external files, you can easily update your styles later at one place instead of looking into html templates or files for styles.
Not Good

<style type="text/css" >
#container{ .. }
#sidebar{ .. }
style>
OR
<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

OR

Better

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. Split CSS into multiple files

If you are working on a large web project that has multiple modules, each with different set of styles and looks, it will be better to split your CSS files into multiple files based on the module they are applied to. You can separate stylesheets like, one for reset, one for layout, one for generic classes and one for module specific styles. This technique will let you organize your code easily in a large project but loading multiple CSS files means more HTTP requests and slower loading time, this is where Bridging CSS files come to rescue. Create a separate CSS file and import other CSS files into it.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

13. Compress CSS code

Once you are ready to deploy the web design project, compress your CSS code using tools like CSS Compressor to reduce file size and improve loading time of webpage.

14. Be Consistent in Writing CSS

When you work on multiple web development projects, it’ll be a wise decision to choose a particular way of organizing and formatting your CSS code and stick to that way for all your projects.

I hope these tips will help you write better and manageable CSS code. If you would like to share a tip or two, feel free to add your comment below.

Illustrator Tip: How to Make a Beveled Star

cosmos — Tue, 03 Nov 2009 02:30:53 +0000

This tutorial will show you how to create a beveled star using adobe illustrator CS4. Using just the star tool, the line segment tool and the live paint bucket you will be able to replicate this 3D looking star.

1. Creating the star

Start by opening a blank artboard and select the star tool (hidden behind the rectangle tool), then click and drag anywhere on the artboard. Hold shift while you draw if you want a perfect looking star. You can change the number of points of the star and the radius by clicking inside the star after it was created.

2. Adding the Lines

Select the line segment tool () and start by clicking on the uppermost point of your star and drag down a vertical line down the star to the next point.

Do this for the rest of the points.

3. Preparing to use Live Paint

Select all the lines and the star using the selection tool (V)

4. Adding First Color

Select the live paint bucket (K) once and all the lines will be selected. Chose the first color you want to use ( choose a light color for the highlights).

Use the live paint bucket to fill in a pattern like this.

5. Adding Second Color

Go back to the color window and chose a slightly darker color for the shadow. Fill in the rest of the white space with the new darker color acting as a shadow.

6. Getting Rid Of The Stroke

If you want to get rid of the stroke, select the entire star with the selection tool and go to the color window and set the stroke color to none. You can also change it to any other color you want.

7. You’re Done!

That is how you make a beveled star.

8. Be Creative

With some tweaking and changing of the radius and number if points of the star you will be able to create many different outcomes.

Usefull CSS Techniques For Designers

cosmos — Mon, 19 Oct 2009 06:41:32 +0000

CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.

1. CSS Based Navigation

2. Navigation Matrix Reloaded

3. CSS Tabs

4. CSS Bar Graphs (CSS For Bar Graphs)

5. Collapsing Tables: An Example

6. Adam’s Radio & Checkbox Customisation Method

7. CSS Image Replacement

8. CSS Shadows (CSS Shadows Roundup)

9. CSS Rounded Corners Roundup (Nifty Corners)

10. Drop Cap – Capital Letters with CSS

11. Define Image Opacity with CSS

12. How to Create a Block Hover Effect for a List of Links

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

14. CSS Diagrams

15. CSS Curves

16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

17. CSS Image Map

18. CSS Image Pop-Up

19. CSS Image Preloader

20. CSS Image Replacement for Buttons

21. Link Thumbnail

22. CSS Map Pop

23. PHP-based CSS Style Switcher

24. CSS Unordered List Calender (CSS Styled Calender)

25. CSS-Based Forms: Techniques

26. CSS-Based Tables: Techniques

27. Printing Web-Documents and CSS

28. Improved Links-Display for Print-Layouts with CSS

29. CSS-Submit Buttons

30. CSS Teaser Box

31. CSS Tricks for Custom Bullets

32. Ticked Off Links Reloaded

33. CSS Zooming

34. Creating a Star Rater using CSS

35. The ways to style visited Links

36. PDF, ZIP, DOC Links Labeling

37. Displaying Percentages with CSS

38. Image Floats without the Text Wrap

39. Let visitors decide, whether or not will they open link in a new window

40. Simple accessible external links

41. Zebra Table with JavaScript and CSS

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

43. Unobtrusive Sidenotes

44. Image Caption with CSS (Styled Images with Caption)

45. Dynamic Piechart with CSS

46. Format Footnotes with CSS

47. Hierarchical Sitemap with CSS

48. Snook’s Resizable Underlines

49. Switchy McLayout: An Adaptive Layout Technique

50. StyleMap: CSS+HTML Visual Sitemap

51. Custom Reading Width

52. CSS Alert Message

53. CSS Production Notes

Choose Color Schemes in Web Design by Different Methods

cosmos — Mon, 05 Oct 2009 07:30:55 +0000

One of the most challenging aspects of design for many web designers is color selection. The color scheme of a site can have a huge impact on the overall look of the site, and it will have an impact on visitors as well. There are a number of different methods that can be used for finding the right color scheme for a particular project, and in this post we will look at several of those methods. Throughout the post you will find links to helpful resources that you may appreciate.

Getting Colors from Existing Marketing Materials

In many situations the client will already have an established color scheme from an existing website or from other marketing materials. In some cases they may want a change, but frequently you will need to work from the established color scheme. Sometimes making slight changes to the shades of colors but sticking with the same basic color scheme can make an impact, and combined with a fresh design of the website it can help to give the company some added interest to their identity.

In situations where you are not working with a client that has an established color scheme, here are some methods that you can try for finding the right one on your own.

Online Color Palette Resources

There are a number of websites and online tools available for selecting color palettes. Many of these sites allow users to upload color palettes that they have put together, and the rest of us benefit by being able to browse through those that have been uploaded. Most of these sites allow you to search or sort the color schemes by a particular hue or by keyword, which can be helpful if you have one color that you want to use but you are looking for others to use with it.

Here is a quick listing of some of the best places to find color palettes.

Adobe Kuler

COLOURlovers

ColorSchemer

ColoRotate

Others:

Other online tools exist for helping you to put your own color palette together. Here are some of the best.

Copaso

Color Scheme Designer

Toucan

ColorMunki

The Color Wizard

Color Explorer

Taking Colors from Photographs

Photographs are a great source of color inspiration. You can easily and quickly browse through photos either of your own or random photos from sites like Flickr and deviantART. When you find one that includes a beautiful color scheme, you can upload it to one of several different online tools that will help you to determine the specific colors that are used, providing the hex value so that you can use them in your design work.

Here are some of the best resources of this kind.

ColorSuckr

Pictaculous

What’s Its Color?

Others:

At From the Couch David Perel has a nice video tutorial where he goes over his process for choosing colors from a photograph. This is a method that can easily be applied by designers with impressive results.

Design and development blog Build Internet has a series of posts that showcase color schemes from Photographs. Check out their Motivation category to find the color scheme posts.

Taking Colors from Magazines and Other Printed Materials

Online resources aren’t the only place to find color schemes. Magazines, books, flyers, posters, brochures, cards and any other type of printed material can be another source of color inspiration. You can either find a scheme that you like and try to come close just by eyeballing it, or you can scan it in and take the colors directly from the scan in Photoshop or another program.

Browsing Web Design Galleries

One of the best ways to find color schemes that work well for the web is to browse through design galleries. As you do, you will come across some color schemes that you really like and it may give you some ideas for your own work. Of course, what is good for one site may not work very well for another, so it is a good idea to keep your particular project in mind so you can find some colors that will work well for your situation.

You can search around and take one color from a few different websites, or find a scheme that you like and work with Photoshop to find a similar color scheme that will work for you but will avoid copying the colors of the other site. One of the downsides to this approach is that you can wind up doing more copying than you intend, so be careful to make your scheme unique even if it is inspired by other sites.

I Like Your Colors is an online tool that allows you to enter a URL, and it will give you the hex value of the colors in use.

Based on Psychology of Colors

One of the factors that should be considered when choosing a color scheme is the psychology of color. There is a great deal of research that has been done over the years to indicate meanings and messages that are associated with various colors. In many cases this will vary from one culture to the next, so be sure that you are paying attention to information that is relevant to your client and their audience.

Here is a list of some online resources and articles regarding the psychology of color.

Nature

Color is everywhere in nature. Step outside, look around, and you are bound to find some inspiring color schemes. Plants, animals, sunsets, color schemes can be found from just about anything in nature. Of course, getting the exact colors and shades isn’t as simple as when you are working with a photograph (although you can always take a picture) or an inspirational website, you can still get many ideas simply from observing nature and the colors that appear.

What’s Your Approach to Choosing Colors?

If you have a method that works well for you, please share in the comments.

What is Robots.txt File, Creating and Using Robots.txt

cosmos — Sat, 26 Sep 2009 01:50:59 +0000

About Robots.txt file

It is great when search engines frequently visit your site and index your content but often there are cases when indexing parts of your online content is not what you want. This can be achieved by creating a simple text file on the root path of your server and naming it to exactly robots.txt. So, in other words, a robots.txt is a file placed on your server to tell the various search engine spiders not to crawl or index certain sections or pages of your site. You can use it to prevent indexing totally, prevent certain areas of your site from being indexes or to issue individual indexing instructions to specific search engines.

One thing to note down here is that the file Robots.txt is by no means mandatory for search engines but generally search engines obey what they are asked not to do.

How and where to create it?

The file itself is a simple text file, which can be created in Notepad or whatever is your favorite text editor. It needs to be saved to the root directory of your site, which is the directory where your home page or index page is. Misspelling is obvious, so be sure to name it correctly as "Robots.txt" and not "Robot.txt".

Structure of Robots.txt file

The structure of a robots.txt is pretty simple (and barely flexible) – it is an endless list of user agents and disallowed files and directories. Basically, the syntax is as follows:

User-Agent: [Spider or Bot Name]
Disallow: [Directory or Specific File Name]

User-agent: are search engines’ crawlers or bots and disallow: means the list of files and directories to be excluded from indexing. Also if you want to include comment lines – just put the # sign at the beginning of the line:
# All user agents are disallowed to index the secure directory.
User-agent: *
Disallow: /secure/

Examples of Usage

A few examples will make it clearer to how to properly write contents in robots.txt file.

Exclude all robots from the entire web site

User-agent: *
Disallow: /

Allow all robots from the entire web site

The only difference from above is to omit the trailing ‘/’ in Disallow section. Alternatively you can either create an empty robots.txt file or don’t create any.

User-agent: *
Disallow:

Exclude a part of your web site

e.g. if you wish to exclude some directories (not all), then you may use the following syntax.

User-agent: *
Disallow: /cgi-bin/
Disallow: /private/
Disallow: /secure/
Disallow: /temp/

Exclude a single bot from entire web site

User-agent: Slurp
Disallow: /

Allow a single bot

User-agent: Googlebot
Disallow:

User-agent: *
Disallow: /

Exclude a file from an Individual Search Engine

e.g you want to exclude your mydata.htm file that is placed under ’secure’ directory from Google. (the name of Google bot that indexes pages is Googlebot)

User-agent: Googlebot
Disallow: /secure/mydata.htm

Exclude a file from all Search Engines

User-agent: *
Disallow: /secure/mydata.htm

Handling Complex Situations

Also you can combine multiple command one after another to handle complex situations. Let’s take a bit complicated example in step by step manner.

(1) First you would ban all search engines from the directories you do not want indexed at all:

User-agent: *
Disallow: /cgi-bin/
Disallow: /private/
Disallow: /secure/
Disallow: /temp/

(2) Next, suppose you want to exclude Yahoo from the entire web site:

User-agent: Slurp
Disallow: /

(3) Further, if you want to exclude Google from indexing the images from your web site:

User-agent: Googlebot-Image
Disallow: /Images/
Disallow: /Public/Images/

(4) Again, if you want to exclude certain files from all spiders:

User-agent: *
Disallow: /private/mybio.htm

Fore further information about robots.txt file you can visit The Web Robots Page

Search Engine Optimization (SEO)

cosmos — Sat, 26 Sep 2009 01:47:49 +0000

Search Engine Optimization is the process or practice of designing web pages so that they rank as high as possible in search results from search engines. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine.

Optimizing a website primarily involves editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove the barriers to the indexing activities of search engines.

Steps to Follow for Better SEO

A partial list of some important steps that should be followed for better search engine optimization is given below

Try to get an old domain name. Also make sure that it should not be in blacklist during purchase or anytime in the past.
Design your site by keeping in mind of your target audience and not the search engines.
Research extensively to choose your main target keywords. Any mistake or ignorance may lead to unrelated traffic that further may become the major cause of high bounce rate.
Design and categorize your site architecture and navigation based on your keyword research so that people can find their interesting stuff easily.
Carefully build the page title and other important meta tags information by incorporating your target keywords into them.
Make titles and contents of each page unique. Duplicacy of contents or pages may result in lower SEO ranking.
Validate the contents of your website against industry standards (e.g. W3C validation). Also be sure that there should not be any broken or dead links present on your site.
Make the navigation of your site crawler friendly so that the search spiders can travel and index them easily.
Create a sitemap so that visitors and search engines can visit different parts of your website in an easy way.

While the above described steps are not a complete list but may be considered helpful in understanding the basics of SEO. You may consider hiring a SEO specialist to make your site well optimized from SEO point of view.

How to 301 Redirect a Web Page – 301 Redirect Methods

cosmos — Sat, 26 Sep 2009 01:46:04 +0000

What is 301 Redirection?

301 redirect is the most efficient and search engine friendly (SEO) method for webpage redirection. One of the biggest advantage is that it also pass on the PageRank value and hence preserves the current search engine rankings for that particular page. It is the best and safest way in case of renaming or moving files to other location. The code "301" is normally interpreted as "moved permanently".

Use this free 301 URL Redirection Checker tool to check the redirection of a webpage.

Benefits of Redirection

A web page may be redirected for several reasons:

A web site might need to change its domain name.
An author might move his or her pages to a new domain.
Two web sites might merge.

With URL redirects, incoming links to an outdated URL can be sent to the correct location. These links might be from other sites that have not realized that there is a change or from bookmarks/favorites that users have saved in their browsers.

Different Methods to Implement URL Redirection

Following are some common ways to do 301 redirection in different languages. The example are taken from internet, so make sure if all the things work well before finally implementing them.

Redirect through .htaccess file
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com
RewriteRule ^(.*)$ http://www.example.com/$1 [R=permanent,L]
-or-
Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

PHP Redirect
Header( "HTTP/1.1 301 Moved Permanently" ); Header( "Location: http://www.newdomain.com" ); ?>


CGI PERL Redirect

$q = new CGI;

print $q->redirect("http://www.newdomain.com/");
Ruby on Rails Redirect

def old_action

headers["Status"] = "301 Moved Permanently"

redirect_to "http://www.newdomain.com/"

end
Java Redirect

<%

response.setStatus(301);

response.setHeader( "Location", "http://www.newdomain.com/" );

response.setHeader( "Connection", "close" );

%>
ColdFusion Redirect

<.cfheader statuscode="301" statustext="Moved permanently">

<.cfheader name="Location" value="http://www.newdomain.com">
ASP Redirect

<%

Response.Status="301 Moved Permanently"

Response.AddHeader "Location","http://www.newdomain.com/"

%> 
ASP .NET Redirect


HTML Redirect (Meta Redirect)

To send someone to a new web page or site put this in the head section of your document:



Here content="5" means the time (e.g. 5) in second the browser should wait before redirecting to new location.
To check redirection of a web page, use this tool : 301 URL Redirection Checker



HTTP Status Codes, Response Code or Code Status
cosmos — Sat, 26 Sep 2009 01:42:44 +0000
HTTP, Hypertext Transfer Protocol, is the method by which clients and servers communicate. When someone clicks a link, types in a URL or submits out a form, their browser sends a request to a server for information. It might be asking for a page, or sending data, but either way, that is called an HTTP Request. When a server receives that request, it sends back an HTTP Response, with information for the client. The Response stream also contains a code number usually known as status code or response code, which tells the client in short about what server has returned. There are fairly a large number of status codes sent by servers, and the following is a list of the current ones in HTTP 1.1, along with an explanation of their meanings.
Informational
This class of status code indicates a provisional response, consisting only of the Status-Line and optional headers, and is terminated by an empty line. There are no required headers for this class of status code.
100 – Continue

The status code 100 is used to inform the client that the initial part of the request has been received and has not yet been rejected by the server. The client should continue by sending the remainder of the request.
101 – Switching Protocols

This means that the server is changing to the protocol it defines in the Upgrade header it returns to the client. The protocol should be switched only when it is advantageous to do so. e.g, switching to a newer version of HTTP is advantageous over older versions.
Successful
This class of status code indicates that the client’s request was successfully received, understood, and accepted.
200 – OK

This is by far the most common returned. It means, simply, that the request was received and understood and is being processed. Also the information returned with the response is dependent on the method used in the request, for example:

GET an entity corresponding to the requested resource is sent in the response;
HEAD the entity-header fields corresponding to the requested resource are sent in the response without any message-body;
POST an entity describing or containing the result of the action;
TRACE an entity containing the request message as received by the end server.

201 – Created 

A 201 status code means that a request was successful and as a result, a resource has been created. A 201 response may contain an ETag response header field indicating the current value of the entity tag for the requested variant just created.
202 – Accepted

It indicates that server has received and understood the request, and that it has been accepted for processing.The request might or might not eventually be acted upon, as it might be disallowed when processing actually takes place.
203 – Non-Authoritative Information 

It means that the request was received and understood, and that information sent back about the response is from a third party, rather than the original server.
204 – No Content 

This means that the request was received and understood, but that there is no need to send any data back.
205 – Reset Content 

The 205 status code is a request from the server to the client to reset the document from which the original request was sent.
206 – Partial Content 

A status code of 206 is a response to a request for part of a document. This is used by advanced caching tools, when a user agent requests only a small part of a page, and just that section is returned.
Redirection
This class of status code indicates that further action needs to be taken by the user agent in order to fulfill the request.
300 – Multiple Choices 

This indicates that a resource has moved. The response will also include a list of locations from which the user agent can select the most appropriate.
301 – Moved Permanently 

A status code of 301 tells a client that the resource they asked for has permanently moved to a new location. The response should also include this location. It tells the client to use the new URL the next time it wants to fetch the same resource. This response is cacheable unless indicated otherwise.
302 – Found 

A status code of 302 tells a client that the resource they asked for has temporarily moved to a new location. The response should also include this location. It tells the client that it should carry on using the same URL to access this resource.
303 – See Other 

It indicates that the response to the request can be found at the specified URL, and should be retrieved from there. It does not mean that something has moved – it is simply specifying the address at which the response to the request can be found.
304 – Not Modified 

This is sent in response to a request that asked for the document only if it was newer than the one the client already had. Normally, when a document is cached, the date it was cached is stored. The next time the document is viewed, the client asks the server if the document has changed. If not, the client just reloads the document from the cache.
305 – Use Proxy 

It tells the client that the requested resource has to be reached through a proxy, which will be specified in the response.
307 – Temporary Redirect 

307 is the status code that is sent when a document is temporarily available at a different URL, which is also returned. There is very little difference between a 302 status code and a 307 status code. 307 was created as another, less ambiguous, version of the 302 status code.
Client Error
 
The 4xx class of status code is intended for cases in which the client seems to have erred.
400 – Bad Request 

It indicates that the server did not understand the request due to bad syntax.
401 – Unauthorized 

This indicates that before a resource can be accessed, the client must be authorised by the server.
402 – Payment Required 

The 402 status code is not currently in use, being listed as "reserved for future use".
403 – Forbidden 

It indicates that the client cannot access the requested resource. That might mean that the wrong username and password were sent in the request, or that the permissions on the server do not allow what was being asked.
404 – Not Found 

The best known of them all, the 404 status code indicates that the requested resource was not found at the URL given, and the server has no idea how long for.
405 – Method Not Allowed 

A 405 status code is returned when the client has tried to use a request method that the server does not allow. Request methods that are allowed should be sent with the response (common request methods are POST and GET).
406 – Not Acceptable 

It means that, although the server understood and processed the request, the response is of a form the client cannot understand. A client sends, as part of a request, headers indicating what types of data it can use, and a 406 error is returned when the response is of a type not i that list.
407 – Proxy Authentication Required 

It is very similar to the 401 status code, and means that the client must be authorised by the proxy before the request can proceed.
408 – Request Timeout 

This means that the client did not produce a request quickly enough. A server is set to only wait a certain amount of time for responses from clients, and a 408 status code indicates that time has passed.
409 – Conflict 

It indicates that the server was unable to complete the request, often because a file would need to be editted, created or deleted, and that file cannot be editted, created or deleted.
410 – Gone 

A 410 status code is the 404’s lesser known cousin. It indicates that a resource has permanently gone (a 404 status code gives no indication if a resource has gine permanently or temporarily), and no new address is known for it.
411 – Length Required 

The 411 status code occurs when a server refuses to process a request because a content length was not specified.
412 – Precondition Failed 

A 412 status code indicates that one of the conditions the request was made under has failed.
413 – Request Entity Too Large 

This status code indicates that the request was larger than the server is able to handle, either due to physical constraints or to settings.
414 – Request-URI Too Long 

The 414 status code indicates the the URL requested by the client was longer than it can process.
415 – Unsupported Media Type 

A 415 status code is returned by a server to indicate that part of the request was in an unsupported format.
416 – Requested Range Not Satisfiable 

A 416 status code indicates that the server was unable to fulfill the request.
417 – Expectation Failed 

The 417 status code means that the server was unable to properly complete the request.
Server Error
Response status codes beginning with the digit "5" indicate cases in which the server is aware that it has erred or is incapable of performing the request. 
500 – Internal Server Error 

This indicates that the server encountered something it didn’t expect and was unable to complete the request.
501 – Not Implemented 

It indicates that the server does not support all that is needed for the request to be completed.
502 – Bad Gateway 

A 502 status code indicates that a server, while acting as a proxy, received a response from a server further upstream that it judged invalid.
503 – Service Unavailable 

A 503 status code is most often seen on extremely busy servers, and it indicates that the server was unable to complete the request due to a server overload.
504 – Gateway Timeout 

A 504 status code is returned when a server acting as a proxy has waited too long for a response from a server further upstream.
505 – HTTP Version Not Supported 

A 505 status code is returned when the HTTP version indicated in the request is no supported. The response should indicate which HTTP versions are supported.




How to increase backlinks for free
cosmos — Sat, 26 Sep 2009 01:40:04 +0000
Increasing backlinks helps in improving search engine optimization. This also helps in increased pagerank. The backlinks should be from quality and relevant web sites. There are many ways to increase backlinks to a website.
What are backlinks? Backlinks are incoming links to a website. Number of backlinks is an indication of the popularity or importance of that website. Backlinks are also called inbound links or incoming links. Here are some of the ways that backlinks can be increased.
Blog Commenting – Blog or article commenting is the most effective and easy way to increase backlinks, but it is overlooked more often than not. This also helps in increasing your pagerank. As these pages that you comment on gain their own pagerank, so will your page that links from these pages. Make sure that you do not spam people by commenting on irrelevant blogs or posting non valuable comments.
Wikipedia – Getting a backlink from wikipedia is a reward in itself. Although the outbound links you get from wikipedia are nofollow, but google gives special attention to outbound links on wikipedia. Receiving outbound links from wikipedia are a pain, and you should have a good history before you insert your own links in the wiki.
Article Writing – Writing original, unique and quality articles gets you in the good books of search engines. Providing useful resources that help readers looking for something specific makes your article stand out from others. You can build high quality backlinks and get your pages indexed fast. Building backlinks brings you organic traffic and who doesn’t like getting traffic the organic way? There are many popular article directories like ezinearticles, eHow, articlesbase where you can post your articles for free. All these manually review the articles so these deliver high quality backlink results
Social bookmarking – Many social bookmarking sites have emerged in the last few years and few popular ones help build you backlinks if you bookmark your pages. It helps if you have enough friends in your social bookmarking sites. You can share your pages with them, getting more exposure to your web site as well as good number of backlinks.
Forums Participation – Find forums related to your website’s niche and post often so you will get noticed and build up trust so people will click on the link in your profile or signature and possibly link to your site from their own site or in other forums showing where they found valuable information. Most forums now put a rel="nofollow" on all outgoing links so this may not benefit you other than getting some traffic.
Getting quality backlinks is a constant and lengthy process and can take several months to achieve the set goal. But it pays to have quality backlinks from the authority sites in the long run.
Check number of backlinks




30+ Most Wanted Wordpress Tips, Tricks and Hacks
cosmos — Tue, 22 Sep 2009 09:15:22 +0000


Apple Flashy Accordion Sidebar
Use the Accordion plugin in jQuery UI to create an Apple-alike Wordpress sidebar.



Adding Tabs to Sidebar
Creating tabs on Wordpress sidebar with Yahoo! UI Library



Sidebar With Dynamic Contents
Every blog visitor has different habits, but many tend to ignore sidebars because they are always the same. Mixing things up and keeping the contents of the sidebar relevant to the post can make them a bit more likely to be noticed.


Allow Users To Submit Blog Post
This plugin allows you to add highly customisable forms to your website that allows non-registered users and/or subscribers (also configurable) to submit posts.



Paginated Comments
Give you the ability to break your comments into a number of search engine optimized pages.



Image Caption
Extracts the title or alt attribute from images within your blog post and generates a neat caption directly underneath those images. Supports custom CSS styling for captions.



Random Redirect
Allows you to create a link to yourblog.example.com/?random which will redirect someone to a random post on your blog, in a StumbleUpon-like fashion.


Google Syntax Highlighter for WordPress
Easily integrates the Google Syntax Highlighter by Alex Gorbatchev into WordPress. Image below show how codes look like in Wordpress with Google Syntax Highlighter.



Facelift Image Replacement (FLIR) for Wordpress
FLIR allows you to convert text and title into images (better display quality) on the fly without hassle. Now this FLIR Wordpress plugin make things even easier for bloggers.


del.icio.us for WordPress
del.icio.us for WordPress displays your latest del.icio.us bookmarks in your WordPress blog.


Create Your Own PopURLs Within Wordpress 
Like the way how PopURL display contents? Now you can create similar inside Wordpress.



Exclude certain categories from being displayed
2 ways to hide posts from certain categories to be displayed on the blog. You can either put this code inside the loop






if ( have_posts() ) : query_posts($query_string .‘&cat=-1,-2′); while ( have_posts() ) : the_post();   
?>   
      


or you can use Advanced Category Excluder.


Another Date Image Hack 


Create a calendar view of your article post date.



Styling Individual Posts
Styling one post a little different from the rest with the use of the_ID.


How To Avoid Duplicate Posts
Duplicated contents are pretty bad and they somehow affects how search engine weights your site. Here’s how you can avoid getting duplicated contents on your blog.


Wordpress ‘Page Redirect‘ template
This template lets you specify a single URL as the page content, then as the page loads, the template automatically redirects the page to this new location, and that includes category or any tag pages you specify.


Delicious Save Buttons
Add badges that encourage people to bookmark your website or blog


DesignFloat Buttons, Website & Blog Integration
Give your website or blog visitors the option to submit your stories to Design Float and "Float" them






"text/javascript">submit_url = ‘Your URL Here’;"text/javascript" src="http://www.designfloat.com/evb/button.php">   
      








"text/javascript">submit_url = ‘Your URL Here’;"text/javascript" src="http://www.designfloat.com/evb2/button.php">   
      


Read here for more.


StumbleUpon Buttons & Tools
Add a Stumble It! button to your site to make it easy for your visitors to submit your content to StumbleUpon.



Dynamic Highlight Menu
This allows you to theme/style and control the currently selected menu tab in CSS by adding a class="current" on it.





"nav">   
  if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ‘ class="current"’; } ?>>"#">Gallery   
  if ( is_page(‘about’) ) { echo ‘ class="current"’; } ?>>"#">About   
  if ( is_page(’submit’) ) { echo ‘ class="current"’; } ?>>"#">Submit   
      


  >Gallery
  >About
  >Submit

Line 2:
If Home, or Category, or Archive, or Search or Single page is selected, class="current" will be included in 

Line 3,4:
If Page with page slug about or submit is highlighted, class="current" is added.
If you are looking at putting categories as menu tabs, here’s how to make the menu dynamic:





"nav">   
  if ( is_category(‘css’) ) { echo ‘ class="current"’; } ?>>"#">CSS   
  if ( is_category(showcase) ) { echo ‘ class="current"’; } ?>>"#">Showcase   
  


  >CSS
  >Showcase

Line 2,3
If category with category slug of css or showcase, class="current" is added.


DZone Buttons
Let your website’s users vote for our links on DZone without leaving your site.






"text/javascript">var dzone_url = ‘[url]‘;"text/javascript">var dzone_title = ‘[title]‘;"text/javascript">var dzone_blurb = ‘[description]‘;"text/javascript">var dzone_style = ‘1′;"javascript" src="http://widgets.dzone.com/widgets/zoneit.js">   
      








"text/javascript">var dzone_url = ‘[url]‘;"text/javascript">var dzone_title = ‘[title]‘;"text/javascript">var dzone_blurb = ‘[description]‘;"text/javascript">var dzone_style = ‘2′;"javascript" src="http://widgets.dzone.com/widgets/zoneit.js">   
      


More on DZone Buttons, Tools and Widgets


Reddit Buttons
Similar to the rest, place a reddit button on your site to promote blog post.






‘text/javascript’>reddit_url=‘[URL]‘‘text/javascript’>reddit_title=‘[TITLE]‘"text/javascript" src="http://www.reddit.com/button.js?t=1">  








‘text/javascript’>reddit_url=‘[URL]‘‘text/javascript’>reddit_title=‘[TITLE]‘"text/javascript" src="http://www.reddit.com/button.js?t=2">  








‘text/javascript’>reddit_url=‘[URL]‘‘text/javascript’>reddit_title=‘[TITLE]‘"text/javascript" src="http://www.reddit.com/button.js?t=3">  


Source.


Archive that works
Noura of Noupe.com shows various ways you can style your Wordpress Archive page. Techniques and guides includes:

Listing all Posts
Display monthly or Yearly Archive
Archives Ordered By Category

Read this entry.


Add Breadcrumbs to Your WordPress Blog
Breadcrumb trails are a good supplementary navigation system that aid in site usability. This plugin allows you to add breadcrumbs to your theme.



Landing Sites / Pages
When visitors is referred to your site from a search engine, they are definitely looking for something specific – often they just roughly check the page they land on and then closes the window if what they are looking for isn’t there. Why not help them by showing them related posts to their search on your blog?


WordPress Exploit Scanner
This WordPress plugin searches the files on your site for a few known strings sometimes used by hackers, and lists them with code fragments taken from the files. It also makes a few checks of the database, looking at the active_plugins blog option, the comments table, and the posts table.


Buy Me a Beer
Allows your readers to donate money to you via PayPal. Not something new, but worth knowing.



Display Feedburner Subscriber Count In Text
How to display feedburner subscriber count in text instead of using chiklets.



Notifixious – Notify Users via IM
This plugin allows you to notify your readers on their Instant Messaging (AIM, MSN, GTalk, ICQ…), Email or SMS when you publish new posts.


Installing Xampp and WordPress
Guide to setup Xampp and run Wordpress locally on your machine. You can also install plugins, upgrade to the latest nightly and virtually anything else confident in the knowledge that if it goes wrong, there is no impact on your actual site.



Create an Ajax-based Auto-completing Search Field
Why not helping your visitors to find what they’re looking for on your blog, by using a cool auto-completion on your search field?







How to Display Facebook Statuses on Your Wordpress Blog
cosmos — Tue, 22 Sep 2009 08:43:30 +0000

If you want to show your Facebook Statuses and you are hosting on a Wordpress.com blog that restricts you from installing plugins, try this. The following method make use of Facebook status feed and Wordpress RSS widget. It will also work for self-host Wordpress blogs, but you guys who self-host can use better plugins for that.
 
Step 1
Login into Facebook. Under Profile, look for Mini Feed column, click on See All.

Step 2
Under Mini Feed, click on ‘Status Stories‘ on the right column. Scroll all the way to the bottom, look for ‘My Status‘

Step 3
Copy the link of My Status, and we are about to use this in Wordpress blog. Your link will look something like the following:

Step 4 (Wordpress)
Under Wordpress admin, Navigate to Design -> Widget. Look for RSS Widget, add it to your side bar.

Step 5
Paste the copied URL inside, give it a name, save and your Facebook statuses (or status depends on how many you display) will now appear on your Wordpress blog.






WordPress Hacks to Encourage User Interactivity
cosmos — Tue, 22 Sep 2009 08:37:50 +0000
All bloggers would like to get more interaction and participation from their readers and visitors. In this post we’ll look at nine different things you can do to your WordPress theme to add the possibility of some type of interaction. Some involves comments, social media, and other ways of getting readers involved.
1. Show Most Recent Comments
One of the most important ways that blogs can encourage readers to get involved is through the comments. There are a number of different strategies for increasing comments and participation from readers, and many of them involve placing extra emphasis on the comments. By displaying the most recent comments (in the sidebar for example) you may be able to encourage more comments because visitors will see that you value their participation.
To display a list of the most recent comments, use the following code in your theme:

comments

LEFT OUTER JOIN $wpdb-&gt;posts ON ($wpdb-&gt;comments.comment_post_ID =

$wpdb-&gt;posts.ID)

WHERE comment_approved = ‘1′ AND comment_type = ” AND

post_password = ”

ORDER BY comment_date_gmt DESC

LIMIT 10";

$comments = $wpdb->get_results($sql);

$output = $pre_HTML;

$output .= "n

<ul>";

foreach ($comments as $comment) {

$output .= "n

    <li>".strip_tags($comment->comment_author)

.":" . "<a href="">ID) .

"#comment-" . $comment->comment_ID . "" title="on " .

$comment-&gt;post_title . "">" . strip_tags($comment-&gt;com_excerpt)

."

";

}

$output .= "n

";

$output .= $post_HTML;

echo $output;?&gt;

Source: WP Hacks
2. Allow Visitors to Email Posts to Their Friends
If your readers enjoy and appreciate the posts on your blog they may be interested in emailing them to their friends. On most news websites you’ll see a link that says “email to a friend,” but it’s not as common on blogs. Adding this functionality into your theme is not as difficult as you might think.
To add an “email this” link, use the following code in your single.php file:

 the_title();

?>&body= the_permalink() ?>" title="Send this

article to a friend!">Email this

Source: WP Recipes
3. Add a “Share on Facebook” Link
While social media and social networking are commonly integrated with blogging, it’s more common to see a Digg or Tweetmeme button than one that will allow readers to share the link via Facebook. Since Facebook is such an incredibly popular site, it may provide additional exposure for your blog and provide more opportunities for your readers to interact with your content.
To add a “share on Facebook” link, use the following code:

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="blank">Share on Facebooka>

Source: WP Recipes
4. Add Custom Bookmark Links
Many blogs receive tremendous exposure from social media sites, and encouraging your readers to interact by voting or bookmarking can make a big difference in terms of traffic levels. There are plugins and widgets available for this purpose, as well as buttons and badges from the social media sites, but if you’d like more control over the look or if you would just like to do it yourself it is possible.
Bookmark with Delicious:

<a title="Bookmark this post at Delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>">Bookmark at Deliciousa>

Digg:

<a title="Submit this post to Digg" rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>">Digg this!a>

Twitter:

 echo urlencode("Currently reading: "); ?> the_permalink(); ?>" title="Share this article with your Twitter followers">Tweet this!

StumbleUpon:

<a title="Share this post at StumbleUpon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>">Stumble this!a>

Source: Perishable Press
5. Rearrange the Comments to Show Most Recent Comments First
Having a blog that receives a lot of comments from readers can in some ways discourage others from participating. Some readers will not take the time to leave a comment if they feel like theirs will be buried below 100 other comments. One trick to reward those who are going to take the time to comment is to list the comments with the most recent on top, rather than the oldest one being on top.
Find the following code in your comments.php file (please note that not all themes use the same coding for the comments.php file):

foreach ($comments as $comment)

and before it add:

$comments = array_reverse($comments);

Source: WordPress Forums
6. Add a User-Submitted News Section
User-submitted news or community news sections can be a great way for visitors to get involved at your site. With a news section you will be able to display links to relevant posts at other blogs, and your readers will be able to submit posts that they have found to be helpful, or get some extra promotion by submitting links to their own posts.
I included a news section when I launched DesignM.ag last year and since day one it has drawn significant interest from readers.
The process of adding a news section is more involved than just copying and pasting some code, so I will not be providing code for this one, but Tripwire Magazine published a post a few months ago that will lead you through the process. See How to: WordPress 2.7+ User Link Feed Submit Form and Widget.
7. Add Translation Links
As a blogger, you may be surprised to see how many of your visitors and subscribers come from various countries. While these people may be able to read and understand your posts, there may be some times when they have difficulty or where they would like to share the post with someone who may not be able to read it. In these case, translation can come in handy.
Inserting the code shown below will allow your visitors to easily use Google’s translation services:

<ul id="translations">

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Cde">Translate this page to Deutscha>li>

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Ces">Translate this page to Espanola>li>

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Cfr">Translate this page to Francaisa>li>

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Cit">Translate this page to Italianoa>li>

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Cpt">Translate this page to Portuguesa>li>

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Car">Translate this page to Arabica>li>

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Cja">Translate this page to Japanesea>li>

    <li><a rel="nofollow" href="http://translate.google.com/translate?u=<?php echo urlencode(’http://’.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&langpair=en%7Cko">Translate this page to Koreana>li>

ul>

Source: Perishable Press
8. Google Custom Search
One of the best ways for visitors to find what they are looking for is to use a site-wide search. Unfortunately, the default WordPress search isn’t much help in most cases. However, you can easily add custom search powered by Google to your blog (plus you can monetize the search through AdSense).
In order to get your own custom search from Google, you will need to sign up with them and they will provide the code. Pro Blog Design has a tutorial that takes you through all of the steps that are involved. See Make a Google Custom Search for Your Blog, and Make Money.
9. Display Facebook Status on Your Blog
Many blogs display most recent tweets, but it’s also possible to share your Facebook status on your blog. There are a few steps involved in doing this with WordPress, and Hongkiat has a tutorial that will lead you through the process. See How to Display Facebook Statuses on WordPress Blog.




25 Steps to Success: Search Engine Optimization and Business Blogging
cosmos — Mon, 21 Sep 2009 03:43:24 +0000
My good friend and fellow blogger, Douglas Karr has published a new eBook call 25 Steps to Success: Search Engine Optimization and Business Blogging. It’s a long title for sure. But, from a SEO standpoint, it is quite brilliant. Doug’s new eBook talks about the best SEO practices for blogs and why business must get into blogging.
Regular price for 25 Steps to Success: Search Engine Optimization and Business Blogging is $99.00. However, to kick things off with a bang and to generate some buzz, Douglas and Bryan (co-author) is putting the eBook on sale for only $9.99 for the first 10,000 copies.
Who Is Douglas Karr?
Douglas Karr is the President and CEO of DK New Media, LLC, an online marketing firm specializing in assisting medium to large businesses leverage search, blogging and social media to improve business results. Douglas also founded and is the key blogger at The Marketing Technology Blog, consistently named as one of the Top Marketing and Social Media Blogs on the web for several years. He lives in Indianapolis, Indiana with his two children, William and Katherine. Basically, he’s an all around nice guy. He’s also the guy with the longest “Where to find me online” list that I’ve ever seen.
Extremely Refreshing Sales Page
The first thing that stuck me about 25 Steps to Success: Search Engine Optimization and Business Blogging is the sales page. It’s not a mile long and doesn’t have flashing lights or sounds or promises of making you a millionaire by noon tomorrow. This is because the book is geared toward businesses looking to add blogging as another way to communicate with their customers. However, the book is also great for bloggers trying to optimize their blogs for more search engine traffic.
25 Steps to Success: Search Engine Optimization and Business Blogging is 80 pages long and filled with sound and practical advice that is sure to increase your Google traffic. Even seasoned SEO professionals will find new information here. Also very helpful are links to some really cool tools that Douglas use for his blog and SEO consulting business.
The information in 25 Steps to Success: Search Engine Optimization and Business Blogging is worth far more than the measly $9.99 Douglas is asking for it. I’ve already came away with a bunch of ideas, like setting up a Bing webmaster account and using SEOPivot to reignite old content, that I know will increase my search engine traffic. I really think Doug should charge the full $99 for this book. I know the take away I got from it will be worth thousands of dollars. Go get your copy of 25 Steps to Success: Search Engine Optimization and Business Blogging before Douglas reads this post and increases the price.




How To Get Your Site or Blog back Into Google If It’s Been Banned
cosmos — Sun, 20 Sep 2009 09:16:54 +0000
It’s a blogger’s worst nightmare. You’re making big bucks with your blog (say $100 per day), things are going great and then, BAM! Google removes you from their index. Overnight, your traffic drops to a trickle of what it was and your income falls off the cliff as well. What do you do now? Here’s a five step plan to get your site or blog back into Google if it’s been banned.
1 – Don’t Panic and Wait
If you think you haven’t done anything wrong, the best option is to simply wait it out. Google isn’t perfect and it’s indexing system does have glitches once in a while. I’ve known many webmasters who had their sites disappeared from Google only to show back up a week later.
If you haven’t done anything shady with your blog and find it missing from the Google index, chances are it’s just a glitch and it will return in a week or two. There’s no need to panic and no need to make any changes to the blog. If the blog doesn’t come back after a couple of weeks, then you can start worrying and proceed to step two.
2 – Correct What You Think You Did Wrong
If you think Google dumped you because you did something wrong, then the first thing you have to do in order to get back into the index is to correct the mistake. This is harder than it sounds because Google doesn’t tell you why they de-index a site.
To help webmasters stay on the right side of the tracks, Google created the Webmaster Guidelines. If you’ve been dumped, chances are you’ve violated one or many of those guidelines. It’s up to you to figure which rules you violated and then correct it.
3 – Send a Reconsideration Request
Once you bring your blog back into compliance with the Google Webmaster Guidelines, the next step is to submit a reconsideration request (used to be a reinclusion request). You do this at Google Webmaster Tools.
Fundamentally, Google wants to know two things:

The pages that got your site banned are gone or fixed.
That this is not going to happen again.

Additional tips from Matt Cutts:

I’d recommend giving a short explanation of what happened from your perspective: what actions may have led to any penalties and any corrective action that you’ve taken to prevent any spam in the future. If you employed an SEO company, it indicates good faith if you tell us specifics about the SEO firm and what they did–it assists us in evaluating reconsideration requests. Note that SEO and mostly-affiliate sites may need to provide more evidence of good faith before a site will be reconsider; such sites should be quite familiar with Google’s quality guidelines.
Don’t bother mentioning that you spend money on AdWords or you’re an AdSense publisher. The person who will look at your reconsideration request doesn’t care if you have a business relationship with Google. Remember, we need to know 1) that the spam has been corrected or removed and 2) that it isn’t going to happen again.
I would request reconsideration for one domain at a time. It looks bad if you had 20+ sites all thrown out at once, and you send a reconsideration request for 20 domains in one email.

It is my belief that the quality and detail of the reconsideration request is the deciding factor on whether Google lets you back in or keeps you out. Chances are a request that reads, “I’m Google compliance now. Please let me back in.” will fall on deaf ears. Here’s a video from Google’s webspam team with more tips on filing a reconsideration request.
4 – Hope And Pray
Once you’ve submitted your reconsideration request, there’s not much to do except hope and pray Google lets you back in. While Google has guidelines for webmasters, there doesn’t seem to be any guidelines on how they decides who gets back in and who stays out.
How long do you have to hope and pray? That depends on when Google reviews your request and on the type of penalty you have. Generally, you’ll be looking anywhere from two to six weeks, and sometimes longer, to have your site reviewed and reconsidered.
5 – Talk To The Man Himself
In the webmaster world, Matt Cutts is The Man. As the head of Google’s webspam team, he can front-line your reconsideration request and get you back into the Google index within a day. If you had no luck working with Google using the normal channels, then the next step would be to talk to the man himself. However, please make sure you corrected whatever got your banned and that your site is 100% Google compliant before trying to contact Matt.
Getting an audience with Matt is easier said than done. You can try to email him (a clever blogger will be able to find the email address) but it may never get to him because of the corporate filtering system. If you want to make sure Matt gets your email, the best way would be to have someone who is on Matt’s “Safe List” facilitate an introduction. That is what I did.
If you don’t know anyone who is on Matt’s contact list, you last chance is to corner him at a trade show. Matt is an extremely fair guy and if he tells you he will look into your case, he will. You just have to decide if it’s worth the expense of attending the show.




Website Developer Must be to Known the Websites
cosmos — Thu, 17 Sep 2009 08:53:21 +0000
Are you a website developer? Or maybe striving to be? Then have we got a nice assemblage of invaluable sites for you to check out. These seven are the ones we believe that you need to be aware of to help keep you in the developer’s proverbial loop. So once more, we ask that you give a gander to the list below…you don’t have to…it’s not like a requirement. You could stumble if you want to, but you might miss something spectacular. Oh, yeah, there’s some razzle, little dash of dazzle. Just saying. Could be worth a few minutes…
 
1. A List Apart

A Band Apart, powerhouse innovative production company with a massive following. A List Apart, powerhouse innovative web developers blog with a massive following. Coincidence? Yeah, probably. I don’t really think one inspired the other, but it could be the case. Not that A List Apart needs any other reason to be the revered site it is, have you checked it out? It’s only the “The Blog” for web developers discussing content, code, culture, design and more. Seriously it is an amazingly useful site for those in the biz.
2. Blog.SpoonGraphics

Blog.SpoonGraphics is a vast collection of decent resources for web designers, tremendous tutorials, fabulous freebies, and even topical up to date news. Hours of useful data to get lost in are waiting for you. This site comes highly recommended from the entire Arbenting team. Both of us. What can I say, we’re fans.
3. Design Float

Design Float is the Digg of the design community. Need we say more? Well, we probably don’t need to, but since brevity is not really a strong suit among the staff, we’ll say just a bit more. This is a great place to get all of the best of the best from design blogs all over the world wide web. This has become a daily must read around here, and it will probably be for you too, once you check it out. Go on, don’t be shy. It’s just a painless click of the mouse away.
4. I Love Typography

What good is a designer who knows nothing about typography? Not to step on any toes, but honestly, not too much. So many lament over the numerous magnificent designs that have been devastatingly ruined by the incorporation, or afterthought, of a lackluster font type. It can detract and often distract from the originality and beauty of the creation. To learn more about this underrated artform or just to sort and sift through the splendor for some inspiration visit I Love Typography. And see why you will soon be feeling that same way.
5. W3 Schools

W3 Schools is a comprehensive and intensive online learning institution, that is quite literally, the best place to get started if you want to learn about coding websites or any other kind of online content. So many great resources and classes designed to allow the user to progress and advance at their own speed and comfort. Even more advanced coders still have lessons that can be learned or reaffirmed from the basics and beyond at this wonderful and welcome addition to the online community.
Edit: It was pointed out by a few of our readers that W3 Schools actually teaches some invalid markup and overall bad usage. The lesson here is one we probably all already know, don’t use only one source as a learning tool. We’re all learning together here so we thank zombieloffe & bobachu for pointing this out to us.
6. Web Designer’s Wall

Web Designer’s Wall is seriously, one of the best, and most visually stunning, blogs on web design in the whole of the blogosphere. With ever informative, cutting edge contributions to the world of web design, this site offers post after post of pure gold. While writing this post we tried to recall a time when we came across a blog entry that wasn’t helpful to us in some way, and we kept coming up empty. And subscribers? Well, lets just say that they get their fair share of fantastic free stuff from time to time. Oh, yeah.
7. Web Developer’s Handbook

If you think this is a good list, then we are grateful, and humbly direct you now to the behemoth that this list wishes it could be. But what would be the point of that. I mean, it already exists. It’s here. In fact, many of the websites on this list can also be found at the Web Developer’s Handbook. A huge directory of almost every website a web developer would ever need for any purpose or predicament. Seriously, dude, it’s HUGE! Web Developer’s Handbook. Tell your friends.
So, we showed you ours…what’s your’s look like?
Reader Recommendations:

Madison pointed out to us that DesignBump.com was left off of the list.

The Web Builder Zone was recommended by Schalk Neethlings

Gotapi was recommended by Sean

Resources for Web Designers was recommended by Iliya Iliev

Unmatchlist was recommended by Pedro

Design Meltdown was recommended by JoeShmoe

LogicWeb, Noupe & Webware all recommended by More

Smashing Magazine was recommended by Junsu
Thank you so much to all of our wonderful readers & subscribers for the additional recommendations.




How to increase traffic to your Website or BLOG
cosmos — Wed, 09 Sep 2009 04:49:50 +0000
follow these 7 simple steps 1. First of all you must stick to your topics this will show your knowledge about the topic & people will always be attracted towards your site in search of the information regarding the particular topic . 2.Then you should update your blog Everyday or with a gap of some days this will show your sincerity towards the topic & would help to establish your Site or Blog in that particular Field. 3. The 3rd thing usually seen in most of people is that they get frustrated of not getting Comments or Replies to their posts & finally the stop writing. But this should not happen because whenever we are writing or Updating our Website our Rank on many Popular search Engines continue to increase & we start getting traffic within 1 to 4 Months. 4. You MUST use Pinging sites such as i) http://www.pingomatic.com/ ii) http://www.pingoat.com whenever you update your Blog .This will help in Better Rankings in Search Engines like Google. 5. You Must give Powerful comments on the Blog or Site of others & always put a link to Your site .This will impress the owner of the site & the other people commenting on the sites . This will help to increase traffic to your Site. 6.You Should make your own communities at sites like http://www.mybloglog.com/ when other people will join your community it will help in greater traffic to your site & don’t forget to join the communities of other people. 7.The last step is that You should Never leave the Spririt & should Continue writing & Finally you will be able to get the desired amount of traffic & will be able to generate $$Revenue$$ from your site…