If you want to know the reason why you should use an Adsense WordPress template, we can answer – because it was designed for the purpose of maximizing your ad earnings. That is a WordPress theme having separate ad blocks, so that you are able to mix different types of affiliate ads, including contextual, with your main content without effort. If you are going to start making money on any kind of contextual ad systems like Google Adsense, then you should know that the key to success is the efficient and optimized ad placement. So using such blog designs will undoubtedly help you enhance the affiliate conversions and “click-through” rates. These blog templates are also called Adsense Ready themes.

What are the advantages of Adsense Ready Themes over any other blog themes? Firstly, the Adsense Ready themes are designed in such a way that they are focusing entirely on merging the contextual ads with content by placing the ads around it. The ads themselves and the links are neatly placed everywhere around every single post, thus maximizing their “click-through” potential. Some of the themes also allow easily placing ads blocks inside every post – that’s one of the best ways to get the most clicks per blog visitor.

Generally, Adsense Optimized themes are created in Adsense blocks in order to facilitate insertion of ads. The ads become active right after the Adsense Publisher ID has been changed or inserted. They also adjust the placement and colors of ads to guidelines of Google, making you feel related. The search and link units are already built in, and the search engine particularly is very user-friendly, enabling you to post and category titles easily.

So, the main reason for using Adsense Ready Themes seems to be its convenience. You won’t have to get lost in too much code and won’t have to adjust to the form of the theme. This template will save you lots of time and effort, as usually all you need is just to insert the publisher ID in cost of a minute and that’s it.

Of course, you can try any other WordPress theme to place your ads, but they would probably be not easy to puzzle out, especially if you are not very familiar with the concept of optimizing your ad placement. Adsense Ready templates are particularly useful for those who operate hundreds of niche websites, because they originally become more profitable if using optimized ad placements.

Here we place few examples of adsense ready themes

Example Theme #1

Full Info and Preview Here >

Example Theme #2

Full Info and Preview Here >

Example Theme #3

Full Info and Preview Here >

Example Theme #4

Full Info and Preview Here >

Example Theme #5

Full Info and Preview Here >

Good luck

JQuery is very popular now in WordPress used for menus, lists, form validation and it is used for comment forms style modification too.

In this post I want to show you How you can change the style of your comment forms in WordPress making more great looking using JQuery.

When comment form is selected JQeury changes the style of the forms using some of the CSS classes,changing the text, background and border form color.

HTML code:

In the comments.php file of the theme be sure you have comment form tags used for posting comments: author, e-mail, url imputs, textarea for the message and the submit button, something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="row">
  <input id="author" name="author" type="text" />
  <label for="author">Name* </label></div>
<div class="row">
  <input id="email" name="email" type="text" />
  <label for="email">Email* </label></div>
<div class="row">
  <input id="url" name="url" type="text" />
  <label for="url">Website</label></div>
<div class="row">
  <label for="comment">Message</label>
  <textarea id="comment" cols="100" rows="10" name="comment"></textarea></div>
<div class="submit">
  <button id="submit">Post comment</button></div>

CSS code:

In the style.css file you need to add some CSS classes for JQuery:

1
2
3
4
5
6
7
8
9
10

.OnFocus{
    	background: white;
    	color:#000;
    	border:solid 2px #BA5B00;
    }
.OnIdle{
    	background:#D8D8C7;
    	color: #6F6F6F;
	border: solid 2px #89897C;
    }

These classes are for changing color of background, text and border that are used by JQuery, when the form is selected the “OnFocus” class is used but when the form is not selected the “OnIdle” class is used.

Be sure to remove background, color and border style of the forms before adding the new CSS codes.

JQuery code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[type="text"], textarea').addClass("OnIdle");
       	$('input[type="text"], textarea').focus(function() {
       		$(this).removeClass("OnIdle").addClass("OnFocus");
    		if (this.value == this.defaultValue){
    		       this.value = '';
		}
		if(this.value != this.defaultValue){
	    	this.select();
	    	}
    	});
    	$('input[type="text"], textarea').blur(function() {
    		$(this).removeClass("OnFocus").addClass("OnIdle");
    		if ($.trim(this.value) == ''){
			this.value = (this.defaultValue ? this.defaultValue : '');
		}
    	});
});
</script>

Add this code in the header.php file of the theme, below of the </title>.

View the demo.

As we know the background is a important thing in the design of the theme, choosing a right placement and construction is very difficult so that’s why I created this article.

In this article I want to show you how to make a background to your WordPress blog, what kind of background style you can use, what CSS codes require to add in your style.css file and some great examples based on very creative blog designs.

For the background you can use a simple color, to place an image or an image that will repeat in a direction.

How to set the background color:

To set a background color you need to edit the style.css of the WordPress theme and to add css codes in it. For example adding a black color:

1
2
3
4

body
{
  background-color:#000000;
}

Here you can choose a color if you don’t have a color code application.

How to set a background image:

To set a background image you need to edit the style file of the theme, often this file name is style.css, to see the changes just save this file and upload to you host in the theme folder.

1. Very simple code that will repeat image:

1
2
3
4

body
{
  background-image:url('http://wpcrowd.com/wp-content/themes/alexvorn/img/136.gif')
}

The image:

And the effect:

Examples based on WordPress design blogs:

Line25 Web Design Blog

Graphic Design & Web Design Blog

Desizn Tech

2. Repeat background image only vertically:

This mean that the image will repeat from top to bottom:

1
2
3
4
5

div.content
{
  background-image:url('http://www.heyjosh.com/assets/images/binder-bg.png');
  background-repeat:repeat-y;
}

The code repeat the background image in the “div” tag of the content:

The image:

The effect:

Note: this is the screenshot from Hey Josh site.

3. Repeat background image only horizontally:

The CSS code used:

1
2
3
4
5

body
{
  background-image:url('http://blogspoon.s3.amazonaws.com/wp-content/themes/SpoonGraphics_V4/images/body-bg.jpg');
  background-repeat:repeat-x;
}

Repeating an image horizontally is often used on buttons, menus and body too.

The image:

The effect:

Note: this image above is a screenshot of Blog.SpoonGraphics site.

More examples:

Shizucor

Naldz Graphics

Hein Maas

4. Display background image only one time (no repeat):

1
2
3
4
5

body
{
  background-image:url('http://wpcrowd.com/wp-content/themes/alexvorn/img/136.gif');
  background-repeat: no-repeat;
}

As default this image is showing in the left in top but we can make it to show in center or right.

This CSS code will make the background image to show in the top and in center position:

1
2
3
4
5
6

body
{
  background-image: url('http://www.webdesignerwall.com/wp-content/themes/wdw/images/main-bg.jpg');
  background-repeat: no-repeat;
  background-position: center top;
}

The effect:

The screenshot is from Web Designer Wall.

More exemples:

Webdesigner Depot

Assault Blog

Tutorial9

UGSMAG

By Marina

:: ilovecolors ::

Starcatcher

5. Display a fixed background image:

The fixed image will never scroll on a page.

1
2
3
4
5
6

body
{
  background-image: url('http://buildinternet.com/wp-content/themes/buildinternet-v2/images/watercolor-bg.jpg');
  background-position: center top;
  background-attachment: fixed;
}

To view some examples you can go to these sites:
Burger King Studio
Build Internet!

Where you can find some great backgrounds:

• Background Labs
• Squidfingers / Patterns
• Fractured Sanity
• ava7 patterns
• everyday icons – Patterns
• PatternCooler

I think that everybody who have a blog wants it to have unique design in the blogosphere, because unique style means superiority and it’s cool.

So there are some small tricks that you can apply on you blog to make it to look better then before.

In this article I will show you how to recreate an existing WordPress Theme and making in it a unique and powerful design just in easy steps.

For example WPCrowd use a free Freemium Theme from freebiesdock.com, very well designed and I like it very much.

Now what step I used to transform a popular theme that uses a lot of people in a good looking and unique template:

1. Removed a sidebar because the theme is 3 column but we need 2 column theme.

In the index.php file of the theme I deleted the “<?php get_sidebar(); ?>” tag that represents the sidebar colored in red.

Moved the sidebar.php widgets to sidebar2.php.

And in the single.php removed the all <div id=”post_data”> tag.

2. Enlarged the post space in home page.

In the style.css file I enlarged the size of the post from 348px to 608px for the home page.

3. Changed backgrounds color in the post and for the comments, text color changed to black, links from green to orange, editing only the style.css file and images that are used in menubar.

4. Added a background image that combines very well in this theme.

I hope you enjoyed this article and if you want you can post a comment about your thoughts and ideas.