Search engine optimization is no doubt a vital part of web development. A developer may have given all labor to develop a site, but if it’s not optimized properly, that site can never able to attract the attention of the online readers & visitors. Apart from writing keyword-rich web content and designing the layout, one should also give importance to the search engine optimization.

Web development with proper SEO is not that much difficult. It is basically the proper balance between information architecture and web design. However, if you are a fresher in this field, following points may help you:

Create valid and Clean Code – Usually search engines prefer codes, which are simpler and semantically defined. CSS & XHTML needs to be perfectly valid.

Avoid Splash Pages – There is no doubt in the fact that splash pages look attractive, but they block search engine spiders, which is not desirable.

Avoid Using Duplicate Content – Never insert duplicate content within the same website. It creates a negative impact on the minds of the readers.

Insert Relevant Alt Tags for Images – If the alt tags for images are given properly, it will help the search engines to know more about the web content.

Use Header Tags – Header tags play vital roles in SEO and so they should be used properly. The most important targeted keyword is generally used in ‘h1′ tag. But the titles should not be staffed with keywords. They need to be clear, simple and precise.

These are indeed some of the most remarkable points that usually the web developers need to follow.

VIEW DEMO

Here is my html code. This contains a div with class ‘content’ and two buttons (Write and Append).

<div class="content">
	Write Something!
</div>	
<br />	
 
<button>Write</button>
<button>Append</button>

Here is the jQuery code to write data:

$("#write").click(function(){			
	$(".content").html("Hello World! ");				
});

Here is the jQuery code to append data:

$("#append").click(function(){			
	$(".content").append("Hello World! ");				
});

VIEW DEMO

Cheers,

In this article, I will be showing you how to add or remove HTML attributes. HTML attributes like title, href, src, etc. For example:-

<img src="abc.jpg" class="test" alt="abc" />

Here: src, class, alt, title are attributes.

You can add attributes like above through jQuery. You can also remove the attributes with jQuery.

VIEW DEMO

Here is the HTML source. This contains a link with id ‘myLink’ and Add and Remove buttons with id ‘add’ and ‘remove’ respectively.

<div class="content">
<a id="myLink" href="#">This is my LINK</a>
</div>
 
<button>Add</button>
<button>Remove</button>

Adding Attribute

The following function works as follows:
- myLink is the id of a href link
- add is the id of add button
- when add button is clicked, some style (css) is added to the link with id ‘myLink’
- after that, ‘title’ attribute is added to link with id ‘myLink’

$("#add").click(function(){
	$("#myLink").css({"font-weight":"bold", "color":"red", "text-decoration":"line-through"});
	$("#myLink").attr("title","My Link Title");
});

Removing Attribute

The following function works as follows:
- there is a button with id ‘remove’
- when remove button is clicked, the following things happen:
- ’style’ attribute is removed from the link with id ‘myLink’
- ‘title’ attribute is removed from the link with id ‘myLink’

$("#remove").click(function(){
	$("#myLink").removeAttr("style");
	$("#myLink").removeAttr("title");
});

VIEW DEMO

Cheers,

Click here to view the DEMO
Features

• One Click – Auto Install
• Different modes of Shopping Cart
• Manage Products
• Order Management
• Shipping Options
• Multiple Payment Gateways
• Manage Tax
• Grid view / List view
• Fully customizable front page
• Custom Control Panel
• Localization Support
• Auto-resizing product images
• Excellent Support
• Theme Guide & Tutorials
• PSD File Included with developer version
• Drop Down & Breadcrumb Navigation
• Gravatar Support & Threaded Comments
• Built-in Ad Monetization
• Search Engine Optimized
• Widget Ready with custom widgets
• Valid, Cross browser compatible

Price:

• $65 Single use licence
• $99 Multiple use licence

Click here to buy the theme

In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.

VIEW DEMO

Here is my html code:

<div>		
	<span>Sample text!</span>
	<br />
	Testing!
</div>
<br />
 
<div>Click me</div>

As you can see above, I have a div with id ‘content’. I have ‘Sample text!’ inside span. And I have a div with id ‘clickme’.

Here is CSS class to be used:

.hover {
	text-decoration: underline;
	cursor: pointer;
	color: #003399;
	font-weight: bold;
}

Here is the magical jQuery function :)

$("#clickme").hover(function(){
	$(this).addClass("hover");
}, function(){
	$(this).removeClass("hover");
});

Here, ‘hover’ function is used. It means that, when we hover on ‘Click me’ div then the CSS class ‘hover’ is added to the ‘clickme’ div. The ‘hover’ class will change the color, font-weight, etc. of the div text ‘Click me’.

Now, when we click the ‘Click me’ text, then the CSS styling is added to the div ‘content’. The new styling will change the text of div ‘content’ to green in color and it also increases the font size. The following jQuery code is used:

$("#clickme").click(function(){
	$("#content").css({"color":"green","font-size":"20px"});
});

VIEW DEMO

Cheers,

There are hundreds of video plugins for Wordpress that give Wordpress all sorts of video type functionality, but finding the best one that actually worked was a great difficulty!

Here, I’ve listed 8 of what I feel the best video plugins for Wordpress.

1. Wordpress Video Plugin
A filter for WordPress that allows easy video embedding of supported sites. Videos can be embedded from Youtube, Youtube Playlist, google video, Brightcove, Yahoo! Video and many other supporting sites.
URL: http://wordpress.org/extend/plugins/wordpress-video-plugin/

2. Embedded Video
The plugin is made for easily embedding videos into a blog post. The videos can be integrated from external portals (like YouTube, Google Video and many many others) or they can be uploaded to the web server or a remote server and integrated as well. Additionally a corresponding link to the video on the particular video portal page or a download link to the local file can be generated automatically, if demanded. This supports many video portals including YouTube, Google Video, dailymotion, MyVideo etc.
URL: http://wordpress.org/extend/plugins/embedded-video-with-link/

3. Smart YouTube
A plugin from Vladimir Prelovac that allows you to easily insert YouTube videos and playlists into your blog posts, comments, and RSS feeds.The problem with some of the other Wordpress plugins that accomplish this such as the Video Quicktags plugin, is that they don’t embed the video properly which would make it so the video wouldn’t show up on the RSS feed. This plugin takes care of all that.
URL: http://wordpress.org/extend/plugins/smart-youtube/

4. Lightview Plus
A wordpress plugin which implements lightview of Nick Stakenburg. Lightview does the same as lightbox only with this plugin you can do it with Video from YouTube and Vimeo. Creates that nice hover over the page effect with a video.
URL: http://wordpress.org/extend/plugins/lightview-plus/

5. Simple Flash Video
The Simple Flash Video Plugin builds on the plugins that all ready allow easy posting of .flv or .mp4 files on the popular WordPress platform. Simple Flash Video allows for all of the JW FLV options to be utilized via its config.xml file and post level overrides. With this plugin you can easily post .flv or .mp4 videos to your blog and have your viewers instantly watch the video without having to fully download the video before watching. It also combines the popular Shadowbox utility to allow for the videos to float over the website content for a clean look. Additionally it now includes Simple Stats which allow for highly detailed information on the viewing of your videos that are hosted played on your site.
URL: http://wordpress.org/extend/plugins/simple-flash-video/

6. Daiko’s YouTube Widget
Adds a sidebar widget to display a defined number of random YouTube videos of your own choice. Make your own videolist in the widget-control-panel. This is quite useful plugins.
URL: http://wordpress.org/extend/plugins/daikos-youtube-widget/

7. YouTube With Style
When you embed youtube videos on your site, instead of using the same old YouTube player skin you have a custom skin that you can brand yourself. The player is very slick and you can place your own logo to show on the top left hand corner.
URL: http://wordpress.org/extend/plugins/youtube-with-style/

8. ProPlayer
Places online videos (YouTube, Vimeo, Veoh, Youku, Dailymotion, etc..) into your post by using JW FLV Player. 10,000 downloads in first 2 months, and still counting! Here are couple nice features: 27 different Skins, Custom Playlists, Youtube Playlists, Video Ratings, Audio Visualizer, Displaying Watermarks, and much more..
URL: http://wordpress.org/extend/plugins/proplayer/

[PS: Anish Blon his list of 5 cool Video plugins, please checkout!]

In this article, I will be showing you how to animate image and div.

By animation, I just mean basic animation. This is a basic tutorial. So, please don’t expect it to be so complex animation :). It will simply be increasing the width of the image and div with animate effect.

This is a base for starting animation with jQuery.

VIEW DEMO

Here we go.

I have the following HTML tags for image and buttons:

<img src="lilies.jpg" />
<br /><br />
 
<button>Large</button>
<button>Small</button>

Here is the jQuery code to animated the image:

$("#large").click(function(){
	$("#img").animate({width: "30%"},1500);
});
 
$("#small").click(function(){
	$("#img").animate({width: "200px"},1500);
});

In the above code:

- When the ‘Large’ button is clicked, the image size is increased by 30% with a speed of 1500 ms. The first parameter in the animate() function is CSS property and the second parameter is the number determining how long the animation will run.

- When the ‘Small’ button is clicked, the image size is fixed to be 200px. 1500 is the time for the animation to ru in millisecond.

Similarly, for DIV.

Here is the HTML code with div and buttons:

<div class="content">
	My Div 
</div>	
<br />
 
<button>Large</button>
<button>Small</button>

Here is the jQuery code to animated the div:

$("#large2").click(function(){
	$(".content").animate({width: "50%"},1500);
});
 
$("#small2").click(function(){
	$(".content").animate({width: "300px"},1500);
});

- When the ‘Large’ button is clicked, the div is expanded to 50% of its width.
- When the ‘Small’ button is clicked, the div is fixed to 300px of width.
- 1500 is the time for the animation to run. You can change it according to you need and wish.

VIEW DEMO

Cheers,

ComFy Magazine theme was free before. But now, deluxethemes sells it :) I mean, it’s not free anymore. But, here I have kept the free version of this theme. It’s the older version (when it was free). The zip file also includes plugins related with the theme.

View Demo | Download comfy-magazine-v2.3

Some of the features of the theme are:

- Powerful Control Panel to adjust theme settings with ease
- Thumbnail generation on the fly with caching
- AJAX-powered home page and customizable widgets
- Dropdown navigation supports unlimited depth
- FeedBurner subscription built in
- Gravatars support
- Ajax tabs to display hot topics
- Custom Archives template
- Threaded comments are fully supported
- Social bookmarking built-in for popular services
- 3 Dynamic sidebar widgets

View Demo | Download comfy-magazine-v2.3

Enjoy!!

This premium TV Element Wordpress theme by Studiopress is specially designed for those who want to show online videos and clips in the webpage. The theme includes a featured video on the homepage which can display any number of videos with silder, featured category section which displays up to 12 “channels”, automatic thumbnail from the latest post added to that category, a theme options page to easily setup the theme.

Click here to see the DEMO

Features

• Featured video carousel on the homepage
• Display any number of featured videos
• Theme options page
• Display up to 12 “channels” (categories) on the home page
• Automatic thumbnails
• Drop down navigation menu
• Numerous widget areas
• Custom widgets for featured content, sidebar ads and related posts
• Integrated advertising placements

Price: $75
Click here to Buy this theme.

Like Wordpress, twitter and YouTube seems to be everywhere nowadays, Flickr is also the another for sharing of photos.

WP Plugins for Flickr made it easy to integrate the photos from Flickr directly into our wordpress-blog. Here are some of those you can integrate into your blog.

1. WordPress Flickr Manager

This plugin handles uploading, modifying images on Flickr, and insertion into posts. Inserting images into posts could never have been easier. Simply click on an image from the added ‘Flickr Manager’ panel on the edit page and it will automatically be inserted into your post.

URL: http://wordpress.org/extend/plugins/wordpress-flickr-manager/

2. Flickr Photo Album

This Flickr plugin for WordPress will allow you to pull in your Flickr photosets and display them as albums on your WordPress site. There is a pretty simple template provided, but you can customize the templates 100% to match the look and feel of your own site. And if you want, you could also hook it up with Lightbox or any other number of display libraries. This plugin will also add a new Flickr icon to your WordPress edit screen which will allow you to easily insert your Flickr photos into your blog posts with just a couple clicks.

URL: http://tantannoodles.com/toolkit/photo-album/

3. Flickr Manager

Wordpress Flickr Manager is an easy to use plugin that seamlessly integrates your Flickr account with your WordPress backend. It replaces the browse panel from previous versions, but legacy mode can be enabled through the options menu. You also have the choice between Highslide and Lightbox.

URL:  http://tgardner.net/wordpress-flickr-manager/

4. Flickr Tag Plugin

This plugin downloads all of your Flickr images onto your own server and allows them to appear on your own gallery.

URL: http://www.webopticon.com/archives/148

5. SimpleFlickr

This is a plugin for Wordpress that allows you to embed a flickr integrated simpleviewer into your Wordpress site. In addition, you are able to specify a path to a standard SimpleViewer XML configuration file to display images from a local gallery.

URL: http://wordpress.org/simpleflickr/

6. Slickr Gallery

Slickr Gallery is a very fast, bandwidth-friendly photo gallery plugin for Wordpress. It allows you to pull your Flickr-hosted photos into a gallery section of your blog, as well as easily add Flickr-hosted images to your posts and pages. It is especially useful for people with many Flickr albums/photos.Slickr Gallery needs a Lightbox plugin to work properly.

URL: http://stimuli.ca/slickr/

7. FlickrRSS

This plugin for WordPress allows you to display Flickr photos on your weblog. It supports user, set, favorite, group and community photostreams, and is relatively easy to setup and configure via a settings panel. The plugin also has cache support, allowing you to save thumbnails on your own server.

URL: http://eightface.com/wordpress/flickrrss/

8. WP Decoratr

WP Decoratr automatically finds images relevant to your post content from Flickr to spice up your posts. WP Decoratr is very easy to use and doesn’t need any configuration. It will add a panel on the “Write Post” page. Compose your post as usual and click “Get Images” when you’re done. WP Decoratr will analyse your post content and suggest several matching images. Just click on an image to insert it in your post.

URL: http://wordpresssupplies.com/wordpress-plugins/wp-decoratr/

9. Flickr Tag Cloud Widget

This is plugin for the Widget Sidebar in Wordpress. It will display your flickr tags as a tag cloud in your blog’s sidebar.

URL: http://wordpress.org/extend/plugins/flickr-tag-cloud-widget/

Try these and make your blog more attractive & interactive.

Cheers !