AdSense optimization tips straight from Google

Do you use Google AdSense to monetize your site? Then check out these top 5 optimization tips straight from Google!

Top AdSense Optimization Tips

1. Maximize your AdSense coverage

In order to maximize your earnings, place three AdSense ad units and three link units on each of your pages. The more ads you display, the more opportunities you have for your users to engage with them.

Also, because some ads are paid on a cost-per-impression (CPM) basis, you will often be paid just for displaying the ads, regardless whether a user clicks on them.

2. Place your ads above the fold

Ads that appear higher on the page perform the best. Place your ads so users can see them without scrolling down the page. The more a user has to scroll before finding your ads, the less likely they are to see them and to click on them.

3. Use the best performing ad units

Our advertisers’ preferred ad units are the Leaderboard (728×90), the Medium Rectangle (300×250) and the Wide Skyscraper (160×600). By using these popular ad units, you’ll be tapping into a larger pool of competing ads. More ad inventory leads to more competition in the ad auction and ultimately results in higher RPMs for our publishers.

4. Show text and image ads

Check your ad units and make sure that you’ve opted-in to displaying text and image ads. By diversifying your ads, you’re able to increase the available inventory for your site. With most text ads paid on a cost-per-click (CPC) basis and most image ads paid on a cost-per-impression (CPM) ad, you can let AdSense determine which ads will maximize your earnings.

5. Complement your content with your ads

Your AdSense ads should fit seamlessly within your site to improve your users’ experience. Blend the color of your ads to match the rest of your site and remove the borders around your ad units to help your ads complement your content and enhance your site.

Bonus Tip: Opt-in to Placement Targeting

Set up Custom Channels in your AdSense account and opt-in to Placement Targeting. Placement targeting allows our advertisers to bid on a specific ad or group of ad placements on your site. Advertisers are usually willing to bid more for targeted units.

Have additional questions? Check out http://adsense.google.com/support

And that’s it. At the end of the day, it's all about testing your ads and monitoring how they perform for you on your site. Good luck!

More about → AdSense optimization tips straight from Google

Wrap text around Adsense block in left or right corner

Maybe you have wondered how to wrap text around an Adsense block. You may have noticed that many Wordpress blogs have ad units embedded in top left or right corner of the post content as shown in the picture below:

The main advantage of this Adsense ad placement is that it has the highest CTR on most of the blogs. Adding this ad unit is very simple and requires a code snippet before and after your regular Adsense ad script.

If you want to add a ad unit in top right corner of your post, then include the red lines below in your ad code:

<div style="float:right;">

Your Adsense ad script

</div>

If you want to place ad unit at left corner, change the float tag to "left":

<div style="float:left;">
Your Adsense ad script
</div>

The most appropriate for this ad placement is 250×250 square ad unit. Placing AdSense unit in the middle of the post, may disturb the reading flow, so I'd recommend to have ad units at the beginning of the post.

If you have any query adding this ad unit in your blog post, just leave a comment below.

More about → Wrap text around Adsense block in left or right corner

Change Animated favicon to Blogger blog

Changing the favicon of your blog is a simple trick.By default blogger puts the blogger orange color logo to favicon.This can change to your blog logo.
Favicon appears next to the URL or title in the browser.If you have a logo of your blog then you can simply upload to blogger.Else there are many sites providing free favicon generator.See Netoops blog favicon on the top your browser.
Follow the instructions below.

• Go to Design->Page Elements
• You can see a small bar with blogger icon and a link EDIT click it.

•  Then select your blog's logo by clicking Browse and click on Save.

Insert Animated Favicon

You can also insert Animated gif favicon.

• Go to Favicon Generator
• Upload your blog's logo and give scrolling text then click Generate favicon

 It will generate your animated favicon,right click on the icon shows there and Save it.Then upload to root of website or upload to free image uploading sites like tinypic you will get the link to image from there.

• Go to Design->Edit HTML
• Copy the following inside <head>

<link href='PLACE YOUR FAVICON LINK HERE' rel='icon' type='image/gif'/>

• Then click save.

If any problem with this please inform via comment.Feel free to ask.

More about → Change Animated favicon to Blogger blog

Color Code Generator

JQuery color picker plugin for selecting hex color code values. It can also be used to convert between HSL, HSV, RGB, Hex color code for the color you chose. It is also used for generating matching color schemes which makes it easy for you to select colors.

You can get this tool from here

More about → Color Code Generator

How to submit your Blogger Sitemap to Google

What are Sitemaps?

Sitemaps are text files containing a list of all web pages that exist on your website and are accessible to crawlers and users. These helps visitors and search engine bots to find pages on website. Sitemaps are a way to help Google indexing pages on your site which otherwise might not be discovered.

If your blog is hosted on blogspot.com (or if you are using a self-hosted version of Blogger with a custom domain) you will be surprised to find out that the default sitemap file, contains only the 26 most recent pages of your blog which in normal case should contain all URLs of a website.

Many webmaster pretend to teach others how to drive traffic to blogs or websites yet leaving out the most important factors like sitemaps. There are still other websites who keep on providing the old methods of generating a sitemap for blogger which are not any effective.

How to add a complete Sitemap for your Blogger Blog

Step 1: If you haven't done this already, sign-in to your Google Webmasters account and add your blog. For details, check this tutorial on how to add a blog to Google.

Step 2: Once your blog is added to Google, go to Webmaster Dashboard  and click on your site address

Step 3:  On the left panel choose Site Configuration >> Sitemaps - then click on Add sitemap.

Add each of the following codes:

/atom.xml?redirect=false&start-index=1&max-results=500
/atom.xml?redirect=false&start-index=501&max-results=500
/atom.xml?redirect=false&start-index=1001&max-results=500

If your blog have lots of pages, add the sitemaps below:

atom.xml?redirect=false&start-index=1001&max-results=500
atom.xml?redirect=false&start-index=1501&max-results=500
atom.xml?redirect=false&start-index=2001&max-results=500
atom.xml?redirect=false&start-index=2501&max-results=500
atom.xml?redirect=false&start-index=3001&max-results=500

More about → How to submit your Blogger Sitemap to Google

Add Your Blogspot Blog to Google

1) Log in to your Google Webmaster Tools account.

2) Click on the “Add a site” button at the top of the screen.

3) Enter the URL address of your blog (for example http://my-site.blogspot.com/) and press Continue

4) Select the method you would like to use to verify ownership.
You can either upload an HTML file with a name we specify (which is not possible with Google Blogger account), or you can add a META tag to your site's index file.


Choose Alternate Methods:

5) Under Alternative Methods Click Add a meta tag to your site’s home page.

6) Copy the Meta tag Code generated.

7) Open a new tab and login into your blogger account.

8) Go to Template > Edit HTML

 ...and search (CTRL + F) for the following tag:

<head> 

9) Just below of it, paste the META code and then click on the Save Template button.

10) Switch to Google Webmaster Tools tab and press on the "Verify" button.

Now your site is added to sitemap account and the verification is done.

More about → Add Your Blogspot Blog to Google

Add CSS codes into your blogger blog easily

How to Add CSS codes to your blogger Blog easily.
Sometimes you may want to add CSS codes to your blog for styling blog elements or blog widgets,Many of us adding CSS code by going to Edit HTML and add codes before ]]></b:skin> and save template, Using this method by mistake  if any of the content in it deleted ,it my goes to your Template Crash.So there is a secure and alternate way to add CSS code as follows   .Here is a simple way to add CSS codes.

•  Go to Design-> Template Designer (as shown in the figure)

Update [01/06/2012] : Select Template -> Customise   in New Upgraded Blogger Interface

• Template Designer will open
• Select Advanced -> Add CSS

•  Place the CSS codes in the Text area.
• Then you can see preview by clicking preview.
• Save by click on Apply to Blog

More about → Add CSS codes into your blogger blog easily

Style blogspot blogger date header

To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.
See the result in the image below:

How to do it

Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML 

Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code:

date.header

Or...

.date-header

Step 3. Add the following code snippet just below of it

background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}

Putting it all together, it should look something like this:

.date-header span {
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}

To modify the style, replace the above bold/colored codes...

to change the background color:

• #FFD465: replace with the hex code of the color you want

to change the border style:

• delete -bottom if you want border all around
• change: 2px to a higher or lower value
• change: solid with dotted if you want a dotted line
• change:  #cc0000 with the hex code of border color

to change the font size and date color:

• for a bigger text, change: 12px to a higher value
• color: replace the hex code (#000000) with the hex of date color

Example:

color: #0000cc;

to change margin-left:
(represents the distance between date and blogger post)

• replace -105px with a bigger/smaller value

float:

• change left to right

More about → Style blogspot blogger date header

Display post author, date, labels and comments with icons below post titles

When there are no comments made to your posts, there's a link that says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:

Steps:
 
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:

Step 2. Select the "Expand widgets templates" box

Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):

<div class='post-header-line-1'>

If you can't find the code above, look for this one:

    <div class='post-header'>

Step 4. Paste the following code below/after the code above:

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8J0dpK_J8q86NDuI-YsvsA7zC6rKZO4P3_afdDNNB2nh0nlTBoRUGrDf-SiNL3peWwhhfHkpSPI11_q2OgbwjjXV3aWvksgOme05EvXM30tnYJOJHLmw3PSHk1RhgVHK1qgOaXyZpNClD/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9xklFs37gyVKS0b5xKkm8804baFI1goTlD102WkPmbODlFb1dtWr6fIMceSTVJgNHOjuTXh2_tc2WYTUrGa7XE6GzkaDfbZ4uOMeq9QAexNlTav8Okl0hJQnFU2VPhR78_3uYTHlwODWE/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRc6KvJnSPiU-Ds4Ie-SwSVRFSEKlXgWKD9fUFByIYRaQdjsobJhC98GytZlIhV8FMrVLSyKM4Et1OAmRx88D3j3e7CyzZ9qdn5igx9FR0FcmUNNis2BUoR0MPEq56Y11OfwbKUtU1FAcV/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja9H4Ncuw_c6iDQsXb9TBuKhwF13ZQFPZqOfPItX-jyc7tJo43Az68cOmAWfR953LqRKi_TxWg6AQe_mjrGYh6RRa6AUO_LTdowaC6lXp6BWMqqAO0nRnKeJ0Kvk2-lB4EU4LxPpWTo1wa/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

How to customize:

If you want to change the icons, just replace the URL addresses above colored with:

• Red - Author
• Green - Date
• Blue - Labels
• Violet - Comment bubble

... with the URL address of your image.

Step 5. Save template... and you're done!

More about → Display post author, date, labels and comments with icons below post titles

How to remove/delete labels from Blogger posts

Many bloggers might find labels below posts (or post titles) unnecessary, as long as they are already in the blog's sidebar. In this tutorial we will learn how to remove them manually. To hide labels from the blogger post footer (or below post title), you could simply uncheck the "Labels" option, however, sometimes this setting might not work properly in certain templates and then we'll have to remove it manually from our template.

How we going do this?

Hide labels from Blogger

Step 1. Click on the 'Template' option and then go to the 'Edit HTML' button.

To ensure that you won't lose or delete something, it is advisable to make a backup of your current template. To do this, click on the Backup/Restore button on the right top corner:

 ...and then click on the Download full template button:

Step 2. After you clicked on the Edit HTML button, select the 'Expand Widget Templates' option for expanding the CSS code.

Step 3. Now find the following code snippet (press CTRL+F and paste the code in the search box):

<b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>

Step 4. And delete it.

Step 5. Click on the Save Template button. You're done ;)

More about → How to remove/delete labels from Blogger posts