Galleriffic

Photo Zoom Out Effect with jQuery

Interactive Photo Desk with jQuery and CSS3
In this little experiment you will create an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.

Create A Multiple URL Shortener Page

A Colorful Clock With CSS & jQuery

You will learn how to build a highly original colorful jQuery & CSS clock using Tutorialzines very own jQuery plug-in – tzineClock.

Colorful Rating System with CSS3

Color Lines Free Font

Micro Image Gallery: A jQuery Plugin

By using the jQuery Color plugin, you can animate colors. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 features (rounded corners and drop shadow), you can create a Colorful rating system.

jQuery DJ Hero

Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. By combining CSS3 and jQuery, you will create, in this experimental tutorial, two records that you can start spinning (faster and slower) and even scratching is enabled.

Floated lists with CSS3 and jQuery

In this quick tutorial, the developer is going to explain how you can have a nicely floated list of items and you will use jQuery to make sure IE understands it too.

Cross-Browser Rounded Buttons with CSS3 and jQuery

CSS3 & jQuery Image Gallery and Slider Tutorials
An Awesome CSS3 Lightbox Gallery With jQuery

In this tutorial you are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lightbox gallery around it.

Contextual Slideout Tips With jQuery & CSS3

Annotation Overlay Effect with jQuery

CSS3 Glow Tabs
You will learn how to recreate the ‘hover glow tabs’ from the jQuery Conference page, which has a nice “glowing” rollover effect along with a subtle inner shadow at the bottom of the inactive tabs and also applied some rounded corners and gradients to complete a very nice effect.

Recreating the MLB.com Content Switcher
The goal of this project is to try to recreate the Flash content switcher from MLB.com, using jQuery and CSS3 and without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

Pretty Simple Content Slider
You will learn how to create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.

Why and how to create Microsoft Office Minibar

In this tutorial you will learn how to recreate a variation of MS Words (2007) toolbar that exposes context-related functionality. When user makes a selection in the input field, a Minibar pops up, semi-transparent, above the selection. It disappears when user clicks anywhere in the input field or performs an action by clicking on a Minibar button.

Making a Sleek Feed Widget With YQL, jQuery & CSS3
In this tut you will larn how to build a sleek feed widget, that will fetch any RSS feed and display it in your blog sidebar. You can set it to show the latest blog posts from different categorie, your latest stumbles, or it even display your Twitter mentions.

Awesome Image Gallery using CSS3 and jQuery
The simple CSS3 image gallery (with jQuery) you will be building will be slightly tilted to the side and on hover will move and whenever you click on the image a lightbox will pop out with the larger version of the image.

Kick-Ass jQuery & CSS3 Gallery With Animated Shine Effects
You will be shown how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

A Sexy Vertical Sliding Panel Using jQuery And CSS3
Here you can learn how to make a vertical sliding panel that will act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it is open.

Pure CSS3 Bokeh Effect with some jQuery help
IThe bokeh effect is currently a very popular trend amongst designers and in this unique tutorial you will learn how to create a pure CSS3 version of the effect. With some help from jQuery, you can add some randomness the the colors, sizes and vary the positions of the effect.

Create a Nifty Dynamic Shadow with jQuery
Here, Daniel Kurdoghlian, will show you how to recreate the very nifty looking dynamic shadow effect he created for his very popular CSS3 and jQuery experiment. He walks you through every step of the tutorial by using a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base.

Create A Multiple URL Shortener Page
In this tutorial, you’ll be shown how to create a simple page that will show short urls created by multiple url shortener services. You’ll be using HTML5, CSS3 for styling as well as jQuery for working with Ajax.

Feature Table Design

In this experimental tutorial you will learn how to recreate the ‘sexy’ table design from Shopify, firstly in Photoshop and then in HTML/CSS.

Simple AJAX Commenting System

In this tutorial you will learn how to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.

Beautiful Looking Custom Dialog Box With jQuery and CSS3
This dialog box uses CSS3 drop shadow and a completely CSS3 styled button. So, latest version of Chrome, Firefox and Safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient.

Making a Mosaic Slideshow With jQuery & CSS
When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. In this technique you will be making a jQuery & CSS mosaic gallery, featuring an interesting tile transition effect when moving from one slide to another.

Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial you are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, you show the images of that album as a beautiful photo stack. In the photo stack view, you can browse through the images by putting the top most image behind all the stack with a slick animation.

Interactive Image Vamp up with jQuery, CSS3 and PHP
In this technique you will be shown how to create an online application for giving some funny touches to an image, using jQuery and jQuery UI for dragging and resizing little bling elements like mustaches and glasses. With PHP the image and the bling elements will get merged and the end result can be viewed.

CSS3 & jQuery Image Effects
Image Highlighting and Preview with jQuery
In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context.

CSS3 Rounded Image With jQuery
In this tutorial you will learn how to give an image rounded corners using the CSS3 border-radius and box-shadow properties and using jQuery to automatically wrap a span tag around the image.

Apple-like Retina Effect With jQuery
In this tutorial you will learn the technique of turning a static image into a fully functional “Retina effect” with only jQuery and CSS.
A Fresh Bottom Slide Out Menu with jQuery

COIN SLIDER

Interactive Photo Desk with jQuery and CSS3

menu using CSS3 transitions.

CSS3 & jQuery Menu and Navigation Tutorials
Contextual Slideout Tips With jQuery & CSS3
With this tut you will learn how to make a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

Automatic Image Slider w/ CSS & jQuery

Simple Tooltip w/ jQuery & CSS

Piecemaker XML Gallery

How to Create a Drop-down Nav Menu

Awesome CSS3 & jQuery Slide Out Button

qTip – The jQuery tooltip plugin

Elegant Accordion with jQuery and CSS3
Here you will create an elegant accordion for your sites content. The idea is to have some vertical accordion tabs that slide out when hovering. You will add some CSS3 properties to enhance the looks.

Interactive Image Vamp up with jQuery, CSS3 and PHP

Elegant Accordion with jQuery and CSS3

Full Page Image Gallery with jQuery

Create a “Stay-On-Top” Menu with CSS3 and jQuery

Create Your Own Dashboard Menu
A Fresh Bottom Slide Out Menu with jQuery

In this tutorial you will create a unique bottom slide out menu. This large menu will contain the title and a description of the menu item and it will slide out from the bottom revealing the description text and icons. You will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

Sweet AJAX Tabs
Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. In this tutorial you will be making an AJAX-powered tab page with CSS3 and version 1.4 of jQuery

Lens Flare

Mac-style Skype Application Menu
Using CSS3 and jQuery for extra functionality you will learn how to recreate the amazing slick Skype (for Mac) layout. (Not the full layout: Only the menu where all your friends are listed).

Making a Mosaic Slideshow With jQuery & CSS

SlideNote

Nice And Simple Toolbar For Your Website

In this tutorial you’ll learn how to build a nice toolbar for your website using some CSS3 properties and basic jQuery techniques.

SuperSized

jqFancyTransitions

Cloud Carousel – A 3d Carousel in Javascript

CSS3 Styled jQuery Dropdown

Beautiful Photo Stack Gallery with jQuery and CSS3

Create a awesome images gallery using css3 and jquery

In this tutorial you are going to create your very own dashboard menu similar to Leopards dashboard.

Image Cross Fade Transition

imgAreaSelect

Awesome CSS3 & jQuery Slide Out Button

Open Standard Media Player

Pretty Simple Content Slider with jQuery and CSS3

CSS3 Rounded Image With jQuery

Halftone Navigation Menu
In this tut you will be making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Image Highlighting and Preview with jQuery

jQuery Smooth Tabs Plugin

Create Accordion Menu Using CSS3 Transitions
There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, you’ll see how to make an accordion

jPlayer – jQuery mp3 player plugin

QuickSand

Colorful Sliders With jQuery & CSS3

prettyPhoto

Sponsor Flip Wall With jQuery & CSS
ImageFlow

HoverFade

Nivo Slider

Circular Motion Effect with jQuery

How to Create a Nifty Dynamic Shadow with jQuery

jQuery-Notes

jQuery plugin: Easy Accordion

jQuery quickie: Colourful rating system with CSS3

Growl

Control.Tabs

Javascript game engine for jQuery





Incoming search terms:

• 100 jquery
• shining effect using jquery

Follow us on Twitter WordPress API

• Drop Down Menu Tutorial

• Multiple Columns

• Multiple Backgrounds

• Create The Accordion Effect With CSS3

• CSS3 Opacity

• Create A Polaroid Photo Viewer With CSS3 And jQuery

• Sweet Tabbed Navigation Bar Using CSS3

• 55. Rounded Corner Boxes

• 10 Awesome CSS3 Techniques To Improve Your Design

• 34. Cross- Browser Rounded Buttons With CSS3 And jQuery

• Stylize Input Element Using CSS3

• Contextual Slideout Tips With CSS3 And jQuery

• Push Your Web Design Into The Future With CSS3

• A Look At Some Of The New Selectors Introduced In CSS3

• CSS3 Border Radius Property

• Overview Of CSS3 Structural Pseudo- Classes

• Sweet Ajax Tabs With jQuery And CSS3

• 3D Ribbons Only Using CSS3

• CSS3 Cheat Sheet (Pdf)

• Super Awesome Buttons With CSS3 And RGBA

• Shadows And CSS3

• Dynamic PNG Shadow Position And Opacity

• Halftone Navigation Menu With CSS3 And jQuery

• Awesome Overlays In CSS3

• Fancy Web Form With Field Hints Using Only CSS3

• CSS3 Gradients : No Image Aqua Button

• Box Shadows

• Featured Table Design With CSS3

• Basic CSS3 Techniques That You Should Know

• CSS3 Animated Bubble Buttons

• 4. How To Create CSS3 Christmas Tree Ornaments

• 5. Quick Tip : New HTML5 Form Features

• The State Of CSS3 In Email Templates

• CSS3 Transition Tutorial – Menü mit Slide-Effekt im Apple-Style

• 8. Semantic CSS3 Lightboxes

• Text Rotations With CSS3

• Old School Clock With CSS3 And jQuery

• Editable CSS3 Image Gallery

• How To Use CSS3 Orientation Media Queries

• A Handful Of CSS3 Trends And How To Use Them

• The CSS3 Flexible Box Model

• Selectors Introduced In CSS3

• Creating A Realistic Looking Button With CSS3

• 56. A Crash Course In Advanced CSS3 Effects

• CSS3 Gradient Buttons

• Pure CSS3 Speech Bubbles

• CSS3 Gradients : Quick Tutorial

• Easy And Fast CSS3 Techniques For Faux Image Cropping

• Understanding The Basics Of CSS3

• CSS3 Solutions for Internet Explorer

Follow us on Twitter WordPress API

What is Reset CSS?

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. With reset CSS you are overriding the setting of various browser setting and elements. There are inconsistencies with every browser. For reducing the issues and setting of browser you need to reset the browser properties.

With reset CSS you can set the border, font color, color, margin, padding, img, h1, a, etc properties. The problem is that every browser’s stylesheet has subtle but fundamental differences. By using a CSS reset. There are many big sites and tool available for using the reset the CSS.

In reset CSS you need to use the most common HTML tags and there properties for reset there CSS properties.

you can also create you reset CSS as per your website need. There are many useful and good reset available. I like the YUI reset CSS most because that is really useful.

For using the YUI reset CSS you need to just add the following line in your website.

<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">

For more information about YUI reset css you can visit the following URL
http://developer.yahoo.com/yui/3/cssreset/

Following reset css is most common in each and every website and following code is useful for every website.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

Reset CSS is really useful for every website. do use the reset CSS in you stylesheet. There is another good reset CSS called blueprint which you download from following URL.
http://code.google.com/p/blueprintcss/.

Some people are saying dont use the reset css because that will increase the your css size but I must admin this thing.
you should use the reset css that will save your big time.

What is reset css and How to use the reset CSS

Follow us on Twitter WordPress API

Many times we are searching for Javascript and css compression.

Few days before i was searching for Jquery JS library compression.
Yes there is compressed version available but i want to make some changes in JS files as per my project requirements.
So i want to compress my JS and CSS files without getting any error.
YUI Compressor 2.4.2. is the very nice tool for that. But i dont want to spend time on how YUI compressor is working.

So here is solution- I got online YUI compressor.
You can use that:
http://refresh-sf.com/yui/
It has very nice options.

http://compressor.ebiene.de/

http://www.cssdrive.com/index.php/main/csscompressor

Follow us on Twitter WordPress API

First let’s create a structure of our text container together with a text.

HTML code:

<html >
<head>

<link href=”stylesheet.css” rel=”stylesheet” type=”text/css” media=”screen” />

</head>

<body>
<div id=”wrapper”>
<span> wordpressAPI.com</span>
<span> wordpressAPI.com</span>
</div>

</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Now we are going to apply CSS code.

CSS code:

* {
margin: 0px;
padding: 0px;
}
body {
background-color:#9BCDFF;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: center;
}
#wrapper {
width: 700px;
height: 200px;
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
position: relative;
border: solid 1px #fff;
}
.firstlayer {
font-size: 30px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 30px;
font-weight: bold;
color:#666666;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Thank you!

Follow us on Twitter WordPress API

It can use for menu items and much more.

first create a folder to contain this whole project, save the three images above in the folder.

Now open your favorite html editor, (notepad, dreamweaver etc).

First we will add the css styles at the top.

That was the styles tag, you can do it in the html file, or export it to an external .css file (then remember to delete the <style> and </style> tags).

Now we just need to place our elements with html code, and assign some classes to them to make this effect work.

As you might see its quite simple, first I make a div box just as a wrapper to hold the images.

then every image is shown in as a href link with an class calling for the style “opacityit” rollover effect.

If you have trouble making it work you can download a project here, remember if it still doesnt work, check if you use a browser that supports the opacity filter effect.

Thank You!

Incoming search terms:

• CSS Image Opacity wordpress

Follow us on Twitter WordPress API

There are many methods that can be used to making a horizontal list. The main ingredient is “display: inline”, applied to the “LI” element.

Step 1: Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in <a href=”#”> </a>) which is essential for this list to work. Some CSS rules are written exclusively for the “a” element within the list items. For this example a “#” is used as a dummy link.

HTML CODE
<div id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 2: Remove the bullets

To remove the HTML list bullets, set the “list-style-type” to “none”.

CSS CODE
#topnav ul

{

list-style-type: none;

}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 3: Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to “0″ for the “UL”.

CSS CODE
#topnav ul

{

margin: 0px;

padding: 0px;

list-style-type: none;

}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 4: Display inline

To force the list into one line, apply “display: inline;” to the “LI”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 5: Removing text decoration

At this point you may wish to remove the text underline. It is a common practice for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 6: Padding around list items

To make each list item into a box, we need to add padding to the “a” element.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding: 1em 1em;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 7: Adding background color

At this point a background color and border can be applied. There are many combinations of border and background colors that can be used.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 8: Add a rollover color

Use “a:hover” to set a second background color, as a rollover. Roll over the list now you will see how it works.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Step 9: Center the list

To center the list, add “text-align: center;” to the “UL”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

HTML CODE
<div id=”topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

And you done it.

Thank you!

Follow us on Twitter WordPress API

1. Use HTML for the content as much as possible. Avoid Flash, images, or other non-text formats.
Simple and cleanly coded website always rank higher than the flash based website. The non-text formats must be avoided in order to yield greater website accessibility. Not only the website becomes accessible to larger audience (Visually impaired or cognitive impaired users) but also can be accessed by a range of devices. The search spiders quickly spot the HTML coded and search engine friendly pages. Other advantages of using HTML are: faster loading, Cascading Style Sheet removing access load from server, browser compatibility, easy updating and maintenance.

2. Avoid login functionality to access the page unless it’s required. Search engine cannot index the page that requires login.

3. Do not use frames.
Using frames are considered to be a blunder by webmasters. Frames generally are not indexed by various search engines. Indexing leads to display of the embedded web addresses in frames, as the users are unable to navigate through the search results. Frames also create problem while printing, refreshing or bookmarking the webpage. Frames are becoming obsolete with the advent of AJAX and DIV layers.

4. Navigation should be in plain html. Avoid using flash.
Easy, simple coding in text like HTML facilitates the website to be ranked higher by the search engines.

5. Keep URL as short as possible. .
URL or the domain name is the essence of your website. Going by the KISS (Keep It Short and Simple) rule, the URL ought to be short as it would reduce the chances of misspelling and confusion by the visitors.

6. Static URL is always preferred over dynamic URL.
The search engines are able to index the static URLs in a comfortable manner than the dynamic URLs. Search engines can not access the dynamic and thus the websites lose on their market positioning.

7. Do not use numbers in URL.
Use of numbers in URL must be avoided to circumvent any confusion.

8. If possible, use keywords in URL.
Use of keywords communicates the basic crux of the website to the visitor and also invokes interest in the website, forcing the visitor to go through the website.

9. Separate words using Hyphens in URL.
Use of hyphens should be made clear in the URL else it may puzzle the visitor. Two words should be separated with the use of a hyphen as the search engine reads it as two words.

10. Always use lowercase in URL.
To maintain consistency and avoid any confusion, always use lowercase in URL.

11. Always add alt attribute for images, flash, audio & video file.
Alt attribute are a must while using images, flash, audio and video files as they are alternative names of the images and describe the files. The alt attribute basically lend a caption for such files and helps in search engine ranking.

12. Use Anchor text in links
The anchor text links are powerful tools for site optimization. Anchor text links provide a theme for the entire website.

13. Limit the length of title tag to 65 characters (including spaces) or less.
Different search engines accept different standards. Hence, to be on the safer side, it is important to limit the length of the title tag between 50-65 characters.

14. Incorporate keyword phrases in title tags.
Including 2-3 important keyword phrases of the website in the title tag facilitates good rankings by the search engines. However, the title tags must not be over burdened with keyword phrases as the chances are that the website would be blacklisted as spam. Each page with its own keyword phrase lends higher readership. A helpful tool for choosing which keywords to target is the Google Keyword Selection Tool.

15. Add Meta tags in the code.
Search engines use meta-tags to identify the objective of the website; therefore, meta-tags help in optimizing the website. The search crawlers determine the relevance of the meta-tags with respect to the content of the webpage.

16. Add Header Tags i.e, h1, h2, h3 etc.
Header tags as the name itself suggest are used to incorporate the headings in the text. The h1 header can be used to determine the main keyword and the h2 header tag can identify the next relevant keyword and so on.

17. Offload JavaScript and other non-text code (style sheets, etc.) to external files

18. Optimize images for fast loading
Larger images must be broken into smaller size images which enable uploading smaller images simultaneously and faster. Cropping unnecessary portions and reducing the image depth also help in loading the image faster.

19. Try to keep page size as low as possible
Lower the page size, lesser time will it take to load and thus would not distract the visitor from the website. Sometimes pages with larger size take ages to load and divert the potential user or client.

20. Validate your markup & CSS against w3c standards
Validating markup helps to identify the flaws or wrong coding on the webpage. The W3C standards are laid down to determine the errors and make the code neat & tidy.

Follow us on Twitter WordPress API

The main CSS commands you’ll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect – the only limit is your imagination!

Thank You!

Follow us on Twitter WordPress API

html{

height:100%

}

body{

height:100%

}

#footer{

position: relative;

bottom: 0px;

height: 100px;  //You must need to know your footer height

margin-bottom:-100px; //here I am thinking footer will be 100 px

}

You can change the footer height as per your need or footer height.

Sticky footer you will also achieve using javscript code.

<script>
document.body.onload = function () {
 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 window.alert( 'Width = ' + myWidth );
 window.alert( 'Height = ' + myHeight );

 middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
 document.getElelmentByID("main").style.height = middle_container;
}

</script>

You just need to minus the header and footer height from middle_container.

Follow us on Twitter WordPress API