SEO is one of the primary things that you must do in order to start earning from your website. Here are some of the best tips that you must follow so as to improve traffic on your website.

1. Commenting: Commenting is one of the easiest and difficult tasks in any SEO. Commenting is easy because you don’t have to do anything i.e. you simply have to read the post and put in your comment. The commenting is also difficult because of the topic and the time it take to get your comment approved. You must respond to the comments that are posted by the others on your post as this will encourage the two way communication that will increase enthusiasm in the readers and the readers will become loyal and they come back again and again. Commenting also helps in bringing backlinks that will improve the page rank of your blog.

2. Social Networking: Social Networking sites can have a viral influence on your website. This can be used to boost the blog traffic and is a best way to catch attention of masses that use these sites on the daily basis. Share your blog posts and articles with your friends and family on the Facebook, twitter, etc. and see the boost in the traffic yourself.

3. Directory Submissions: The traffic on your website is directory proportion to the Page Rank of your website. The more backlinks you have the better will be the Page Rank. In order to have backlinks submit your site in web directories that has a good page rank. This will enable you to have quality backlinks that will attribute to your top position in the search engines. Another way of improving Page Rank is to exchange links where you give them the link of your site and then obtain theirs in return.

4. Guest Posts: Inviting guests to write post on your blog will be of great help in boosting traffic on your site. This will ensure that you reach out newer audiences that will be interested in your blog. The guest will share some of his expertise that will be informative and qualitative and will surely redirect some of the readers on your blog. Thus if your blog is experiencing lagging leadership then guest post is the best way to catch some attention.

5. Blog Organization: The organization of the blog is another important factor that will bring in new readers on your site. The layout must be easy to guide and the readers should feel it as a worth reading the post. The categories and other posting titles must be self-explanatory and descriptive so that the readers become loyal and come back to your site again and again.

Author Bio : Dan Jaslanek is a certified Microsoft Professional, and active member of Microsoft’s MVP program. Dan’s company specializes in providing remote desktop support to commercial and residential clients.

So how we do it?

I have implemented both horizontal and vertical menu in demo with some additional styles. And we will focus on horizontal menu in this tutorial. At first we create a menu with some content. The code will look like the following,

<div id="container">
	<h2>Menu with mouse over content slide using jquery</h2>
	<div id="content-tab">
	  <ul id="menu">
	    <li><a href="#">Home</a></li>
	    <li><a href="#">About</a></li>
	    <li><a href="#">Services</a></li>
	    <li><a href="#">Clients</a></li>
	  </ul>
		<!-- All tab content goes here-->
		<div id="tab">
			<h4>Home</h4>
	Vivamus quis lectus ut tellus elementum aliquam. Praesent fermentum adipiscing ligula;
		</div>
		<div id="tab">
			<h4>About</h4>
			Duis nisl risus, ultricies ac iaculis fringilla, ultricies ac nisi.
		</div>
		<div id="tab">
			<h4>Services</h4>
	Nulla hendrerit pellentesque feugiat. In adipiscing orci at nunc laoreet
		</div>
		<div id="tab">
			<h4>Clients</h4>
			Donec ac arcu sit amet libero mollis feugiat non non tellus.
		</div>
	</div>
</div>

Here we have created a menu with four links, and the content of each link available in each tab respectively. Now we apply some styles to make it look like a menu with some content. the css will look like,

body {
	background: #eeeeee;
}
#container {
	width: 630px;
	margin: 0 auto;
}
#menu {
	padding: 0;
	width:630px;
}
#menu li {
	display: inline;
}
#menu li a {
	font-family: Arial;
	font-size:11px;
	text-decoration: none;
	float:left;
	padding: 10px 18px 10px 17px;
	background-color: #2175bc;
	color: #fff;
}
#menu li.selected a {
	background-color: #2586d7;
	margin-top:-2px;
	padding-bottom:12px;
}
#content-tab {
    margin: auto;
    width: 480px;
    height: 100%;
		float: left;
}
#content-tab ul li.selected {
    background: url("../images/arrow.png") no-repeat scroll 0 -2px transparent;
    border: medium none;
    position: relative;
    z-index: 10;
    color: #ffffff;
}
#content-tab div#tab {
	float: left;
	height: 212px;
	padding: 12px;
	width: 537px;
	z-index: 9;
	border: 1px solid #2175bc;
	min-height: 200px;
}

Now our menu with its content is ready. we add jquery now to apply mouse over effect. Mouse over on a menu link will be show it’s content in the content area. The jquery will look like,

    <!-- Jquery package -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <!-- content slide script on mouse over -->
    <script type="text/javascript">
        $(function() {
            var $items = $('#content-tab ul li');
            $items.mouseover(function() {
                $items.removeClass('selected');
                $(this).addClass('selected');
                var index = $items.index($(this));
                $('#content-tab div#tab').hide().eq(index).show();
            }).eq(1).mouseover();
        });
    </script>

We have added the jquery package and the script to slide the content. The script will find the mouse over menu item and adds a class “selected”. “selected” class is used to highlight that particular link. Then the script hides all other links and shows only the mouse over menu link content. Thats it very simple. check out the demo and download it.

Lets have a look at a very basic html code for a web page.

<html>
	<head>
        </head>
	<body>
		<p>This is another paragraph.</p>
	</body>
</html>

Here we have a simple html page, which contains only a paragraph. Now we will integrate jquery inside the head tag of this html page.

<html>
	<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        </head>
	<body>
		<p>This is another paragraph.</p>
	</body>
</html>

I have integrated jquery package using the script tag. and src attribute contains the path of jquery package. You can also download the package and use it. Now you can write jquery to provide some animation effects to your web page. Lets say for example,

<html>
	<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("p").click(function(){
		  $("p").hide();
		});
	});
	</script>
        </head>
	<body>
		<p>Click me. I will go away from this website</p>
	</body>
</html>

When we click on the content of p tag(Click me. I will go away from this website), It will be removed. Like this you can do a lot with jquery. Spend some time with it. You will feel the power of jquery. Thank you.

You can make the php code run in any body area of drupal. But here we will begin with creating a block, naming it, and putting the php code in the body section of the block. Then assigning the block to a region to view the output of the php code.

Step 1:

Go to Administration => Structure => Blocks => Add Block to add a block, you will find the following page,

Name the block and fill its description. then you will find a drop down select field “Text Format”. you will find “PHP code” as an option. Choose it and write your php code in the body section.

Step 2:

If you dont find “PHP code” option. You have to enable the “PHP filter module“. Go to Administration => Modules. Scroll down to the PHP filter module  and check the Enabled box. Press the Save Configuration button.

Again scroll down to the same PHP filter module, you will find permissions link. Click on this to go to the Permissions page, Scroll down to the Filter section and you will find a new item called “Use the PHP code text format”.It’s checkbox for the Administrator is not checked. Check the box and save the permission page. Now u r ready to put your php code anywhere in the drupal content area.

Step 3:

Go to Administration => Structure => Blocks, then click on the “configure” link next to your block. Scroll down to the Text Format dropdown. You should see a new option called “PHP code”. Select it.

Write your php code in the body section and assign the block to a region. Save the block and view the php code output in that region.

1.Administration Menu

Administration menu module provides an interface for Drupal. It’s very useful for Drupal users. It is must for all the drupal developers and site developers. The menu will be appeared at the top of the site. Which is a drop down menu with each categories. It gives you fast access for drupal backend.

Visit: http://drupal.org/project/admin_menu

2.Views

Probably the second most important module for Drupal website development. Views module is used to create views from content. This module creates query for the database and executes it to display the related content view. It is very useful when we want to display news, latest posts etc.

Visit: http://drupal.org/project/Views

3.CCK (Content Construction Kit)

Content Construction Kit is a module, which allows you to create custom content types. It is a very handy module. This module is included in the core of drupal 7 version

Visit: http://drupal.org/project/cck

4.Panels

This module allows you to create pages that are divided into areas of the page. It includes a couple of 2 column and 3 column layouts by default, With a little knowledge of html,css and php we can edit the layout. It also uses AJAX GUI.

Visit: http://drupal.org/project/Panels

5.MultiBlock

We can assign a block to only one region in drupal. MultiBlock creates another instance of that block to place in another region. We can have another block to a region. If you change the parent block its instance changes as well.

Visit: http://drupal.org/project/MultiBlock

6.Coder

Latest version of drupal will not have support for older version modules. Coder module allows us to convert the older version module to higher version. Very useful for drupal developers.

Visit: http://drupal.org/project/coder

7.SEO Checklist

Search Engine Optimization is very important for most of the sites. This module allows us to make the site popular by its checklist. Checklist will provide the actions need to be taken to maximize the site’s presence.

Visit: http://drupal.org/project/backup_migrate

8.Devel

Devel very useful for drupal website designers and developers. It shows a summary of all database queries for each page request at the bottom of each page.

Visit: http://drupal.org/project/devel

9.Backup & Migrate

Backup & Migrate module is used for automatic scheduled backups that run in the background with cron. It is also used to copy the database from one site to another.

Visit: http://drupal.org/project/backup_migrate

10.Pathauto

The Pathauto module automatically generates path aliases for various kinds of content. The aliases are based upon a “pattern” system which the administrator can control.

Visit: http://drupal.org/project/pathauto

Most of the websites use tabs to show their content today. Because it is a very useful user interface. Each tab contains some amount of content. We can view the content by clicking a tab.

In this tutorial we implement a new feature called auto rotating tabs. Which will switch over each tabs automatically and we can also stop it by clicking on a tab. So lets get started.

Source code:

<html>
	<head>
		<title>Auto rotating tabs jquery</title>
		<!-- stylesheet for the tabs -->
		<link rel="stylesheet" href="css/ui.css" type="text/css" media="print, projection, screen">
		<!-- jquery package -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js "></script>
		<!-- jquery ui package-->
		<script src="scripts/ui.js" type="text/javascript"></script>
		<!-- jquery ui tabs package-->
		<script src="scripts/ui_tabs.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$('#rotate > ul').tabs({ fx: { opacity: 'none' } }).tabs('rotate', 1600);
		});
		</script>
	</head>
	<body>
		<div class="container" id="rotate" >
			<h1>Auto tabs using jquery</h1>
			<!-- all tabs listed  -->
			<ul id="flip-navigation" class="tabs ui-tabs-nav">
				<li><a href="#fragment-1"><span>NEWEST</span></a></li>
				<li><a target="_featurebox" href="#fragment-2"><span>MOST POPULAR</span></a></li>
				<li><a target="_featurebox" href="#fragment-3"><span>MOST DISCUSSED</span></a></li>
			</ul>
			<!-- all tabs content container  -->
			<div class="tab_container">
				<div id="fragment-1" class="tab_content ui-tabs-panel ui-tabs-hide">
					<!-- Tab 1 content goes here   -->
				</div>
				<div id="fragment-2" class="tab_content ui-tabs-panel ui-tabs-hide">
				           <!-- Tab 2 content goes here   -->
				</div>
				<div id="fragment-3" class="tab_content ui-tabs-panel">
					<!-- Tab 3 content goes here   -->
				</div>
			</div>
		</div>
	</body>
</html>

In the source code we have included the style sheet for the tabs. and we have also included the jquery, jquery ui and jquery ui tabs package for tabbing the content using jquery. then we have a jquery script which is used for auto rotating the content. we can also change the speed of rotation by changing the value(1600 in the above code). Then inside the body we have listed all the tabs and created the content area for each tab.

When the page is loaded, the jquery script will auto rotate all the tabs. If we click on a tab it will stop rotating and views its particular content.

• Difficulty: Beginner
• Technology: HTML, CSS & Jquery
• Duration: 5 min

Hi everyone, While creating layout for a website, most of the times we need some columns with same height even though the amount of content differs for each column. The website looks great by making all the columns with same height. So lets focus on that issue today. we can solve it by using jquery.

At first we create the layout with multiple columns using html

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Same height columns using jquery</title>
	</head>
	<body>
		<!-- content of the website -->
		<div class="content">
			<h1>Columns with jquery same height script</h1>
			<!-- Three columns with different amount of content -->
			<ul class="three-columns">
				<!-- Column 1 -->
				<li>
					<div class="col">
					<h2>Column 1</h2>
					<p>Odio velit vulpes zelus elit euismod. Singularis abluo autem saepius tego quod letatio meus. Os, tamen, tincidunt facilisi laoreet consectetuer quis. Feugiat ille, indoles, turpis tincidunt, ea iriure capto esse nostrud paratus populus vulputate. </p>
					</div>
				</li>
				<!-- Column 2 -->
				<li>
					<div class="col">
					<h2>Column 2</h2>
					<p>Odio velit vulpes zelus elit euismod. Quisque non urna vel elit faucibus tempor eu ut quam. Aliquam laoreet;ligula vitae volutpat iaculis.</p>
					</div>
				</li>
				<!-- Column 3 -->
				<li>
					<div class="col">
					<h2>Column 3</h2>
					<p>Odio velit vulpes zelus elit euismod.  </p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

Here we have created three columns with different amount of content. and we add some css to align it and look better.

.content {
	background: #f0f0f0;
	margin: 10px auto;
	padding: 25px 40px;
	overflow: hidden;
	font-size: 12px;
	width: 800px;
}
ul.three-columns {
	width: 100%;
	margin: 10px 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}
ul.three-columns li {
	float: left;
	width: 33.3%;
	padding: 0;
	margin: 0;
}
.col {
	margin-right: 10px;
	padding: 20px;
	background: #fff;
}
h2 {
	font-size: 2.4em;
	margin: 0 0 10px 0px;
	font-family: Georgia;
	font-weight: normal;
}

Now the page will look like the following image,

You can see that all the column’s height are different. to make all the columns in same height we use jquery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js "></script>
<script type="text/javascript" >
$(document).ready(function() {
    setHeight('.col');
});

var maxHeight = 0;
function setHeight(column) {
    //Get all the element with class = col
    column = $(column);
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
    //Set the height
    column.height(maxHeight);
}
</script>

Here we call a setHeight function with an argument of each column’s class. and we initialize the maxHeight value to 0, which will store the max height of all three columns. In the setHeight function definition we get all the element with class col. and looping all the columns to find out the max height of all columns then setting the height for all the columns.

In non code language, finding the maximum height of all the columns and setting all the columns height with the maximum. thats it. Now the page will look like,

Now all the columns are in same height and looks good. Thats it we have done it.

• Technology : HTML & CSS
• Difficulty : Beginner
• Duration : 5 min

Hi everyone, most of the beginners find difficult for centering a website. Even i found it difficult when i was a beginner. I thought of helping the beginners with this tutorial. Today we will learn to center a website using css.

The html code for the website will look like the following,

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
		<title>Centering a website</title>
	</head>
	<body>
		<div id="website-wrapper">
		  <!-- all websites HTML here -->
		</div>
	</body>
</html>

Here we have created a html page for the website, which has a div with an id called website-wrapper. all the website code will go here. Now our html code is ready and we have to apply some css to center the website. The entire code with css will look like the following,

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
		<title>Centering a website</title>
	<style>
	#page-wrap {
		   width: 800px;
		   margin: 0 auto;
	}
	</style>
	</head>
	<body>
		<div id="page-wrap">
		  <!-- all websites HTML here -->
		</div>
	</body>
</html>

Here we set width for the website and centering it by setting margin auto for the left and right side of the website(refer the above image). Which means the website will be centered.

So it is very necessary for the web developers to impress the users with an interactive and less time taking registration form. Because in most of the websites, the first step will be registration. “First impression is the best impression” right?. So today we will learn about an interactive jquery registration form with an elastic jquery effect.

First we have to create a registration form with required fields.

<div id="form">
<h2>Jquery registration form</h2>
<form id="form-elements" method="post">
<ul>
	<li class="username"><label>Username: </label>
<input id="username" name="name" type="text" />
<span class="error"> </span></li>
	<li class="password"><label>Password: </label>
<input id="password" name="password" type="password" />
<span class="error"> </span></li>
	<li class="email"><label>Email: </label>
<input id="email" name="email" type="text" />
<span class="error"> </span></li>
	<li class="phone"><label>Phone No: </label>
<input id="phone" name="phone" type="text" />
<span class="error"> </span></li>
	<li class="submit"><input id="submit" type="submit" value=" Register " />
      </li>
</ul>
</form></div>

Here we have created a form with four input fields and a submit button to register. then we add some style to make it look better.

<style>
body
{
font-family:Arial, Helvetica, sans-serif
}
h1, h2
{
font-family:'Georgia', Times New Roman, Times, serif;
}
h2
{
color:#999;
}
ul
{
padding:0px;
margin:0px;
list-style:none;
}
li
{
padding:5px;
display:none;
}
label
{
font-size:14px;
font-weight:bold;
}
input[type="text"], input[type="password"]
{
-moz-border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 3px 5px 10px #78D8F2;
border: 1px solid #05BBED;
font-size: 15px;
margin: 8px;
padding: 6px;
width: 220px;
}
input[type="submit"]
{
background-color: #078EA0;
border: 1px solid #0094A7;
color: #FFFFFF;
font-size: 14px;
padding: 4px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
.error
{
font-size:11px;
color:#cc0000;
padding:4px;
}
#form
{
width:415px;
margin:0 auto;
margin-top:30px;
}
#form-elements {
border: 1px solid #aeaeae;
background-color: #F2F2F2;
padding: 14px;
}
</style>

Now its time to make it very interactive and apply some effects using jquery.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
	$(function() 
	{
		$("ul li:first").show();
		//regular expression for all the fields
		var ck_username = /^[A-Za-z0-9_]{5,20}$/;
		var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i 
		var ck_password =  /^[A-Za-z0-9!@#$%^&amp;*()_]{6,20}$/;
		var ck_phone = /^[0-9-]{10,20}$/;
		//This function will be called for each key pressed in the username field 
		$('#username').keyup(function()
		{
			var username=$(this).val();
			if (!ck_username.test(username)) 
			{
			 	$(this).next().show().html("Minimum 5 characters");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});
		//This function will be called for each key pressed in the password field
		$('#password').keyup(function()
		{
			var password=$(this).val();
			if (!ck_password.test(password)) 
			{
			 	$(this).next().show().html("Minimum 6 Characters");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.email").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});
		//This function will be called for each key pressed in the email field
		$('#email').keyup(function()
		{
			var email=$(this).val();
			if (!ck_email.test(email)) 
			{
			 	$(this).next().show().html("Enter valid email");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.phone").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});
		//This function will be called for each key pressed in the phone number field
		$('#phone').keyup(function()
		{
			var phone=$(this).val();
			if (!ck_phone.test(phone)) 
			{
			 	$(this).next().show().html("Minimum 10 numbers");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});
		//when we register it will show the status.
		$('#submit').click(function()
		{
			var email=$("#email").val();
			var username=$("#username").val();
			var password=$("#password").val();
			if(ck_email.test(email) &amp;&amp; ck_username.test(username) &amp;&amp; ck_password.test(password) )
			{
				$("#form").show().html("<h1>Thank you!</h1><p>You have registered successfully</p>");
			}
			return false;
		});
	})
</script>

In this script, we only make the first field visible, when user completes it, the next field will be visible, this process will continue till the end of the form. here we have used jquery elastic effect.

There are a lot of new properties and features available in css 3, which makes our site look great. Today we will see some nice css 3 styles such as Box shadow, Border radius, Text Overflow, Text-shadow, Multiple Backgrounds. lets start one by one..

1.Box shadow:

box-shadow allows us to apply shadow to elements. which makes the element look great.

Syntax:
box shadow property : x-offset y-offset blur color-of-shadow;
example:
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

Here you find three lines of coding, which means we write code depends on the browser. for example . -webkit-box-shadow will be used for chrome browser. and -moz-box-shadow property will be used only for mozilla firefox. because every browser parse css differently. So it is necessary to write code depending on the browser.

2. Border Radius:

border-radius property is the most popular of all properties in css 3. Designers always having problem with rounded corners. It will be very useful for them and developers whenever they need rounded corners.

syntax:
border radius property : value;
example:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

we can also create circle by increasing the value of the property.

3. Text Overflow:

text-overflow property is originally developed by internet explorer. It is used to hide or overflow the text.

syntax:
text overflow property : value;
example:
-o-text-overflow: ellipsis;
text-overflow:ellipsis;

This property can accept two values they are,
1.clip
2.ellipsis

4. Text shadow:

It is very similar to box shadow. We use text shadow to make text very effective.

syntax:
text shadow property : x-offset y-offset blur color-of-shadow;
example:
text-shadow: 0 1px 0 #FFFFFF;

5.Multiple Backgrounds:

The background property is allowed for multiple backgrounds in css 3. We can able to use more than one background for our site.

syntax:
background : background value 1, background value 2;
example:
background: url(images/bg_1.jpg) 0 0 no-repeat,
url(images/bg_2.jpg) 100% 0 no-repeat;

And finally i have created a page to show you all the effects of the above properties. visit the demo page or download it.