Monday, 21 October 2013

Adsense Income - Where Do You Start!


The very first thing you must do to have an AdSense web site would be to select a market -- or even subject -- for the web site.

In the event that this really is your own very first web site after that it's wise to create a web site in regards to a subject you've good quality understanding or even encounter along with. Should you style an internet site in regards to a subject you realize regarding, you will discover this super easy to produce plenty of great content material dependent by yourself understanding. It may be easier currently talking about some thing you realize.

Write down ideas for some webpages associated with content material.

Your own home page is going to be your own intro towards the subject. Which web page may have hyperlinks in order to additional webpages that contains much more particular details about the subject. Every web page in your web site would have been a subwoofer class towards the primary subject. For instance for those who have an internet site regarding canine breeds, your own home page is going to be your own intro web page referring to canines generally. Your additional webpages might be divided for every dog breed, providing more in depth details about the specific type.

You don't have to possess a extravagant web site, frequently some thing basic is much better.

You will have to obtain a website name plus some website hosting. Browse around to obtain a great deal upon web hosting. In the event that there is a great opportunity you'll be producing several AdSense web site after that locate a offer that provides a person limitless site web hosting.

Investigation

Without having sufficient info out of your personal understanding after that you will have to perform a few investigation in your subject. That you can do this particular via publications in your own home, in the collection or even on the internet.

You must have great content material. You would like these potential customers in order to would like to return for your website. Should you content material is actually junk, very few can come back again. Great, strong, distinctive content material could keep all of them returning as well as ideally hitting your own advertisements.

Additionally you would like your own AdSense advertisements to complement this content in your website, therefore getting lots of great content material may make sure that the actual advertisements positioned on your website may complement your own subject.

Additionally, you will end up being preferred much better along with the various search engines for those who have top quality content material in your website -- as well as make certain it's distinctive. Obtain suggestions through additional websites as well as content articles on the web however do not duplicate something sentence after sentence. Usually reword points in to your personal text.

Complete your own webpages together with your content material and also have this shown properly as well as readable.

Make use of great colours in your webpages, colours which are simple about the eye. Frequently darkish skills for example dark or even deep blue can be very difficult to see as well as change aside site visitors quickly.

You may even wish to select colours that may advantage the actual market of the web site, for example eco-friendly colour plan for any horticulture web site, or even white wines for any wedding ceremony market.

After you have your quest carried out and also have additional several great webpages associated with top quality content material for your website now you can include your own AdSense advertisements as well as add your website for your server.

If you do not observe sufficient earnings arriving out of your advertisements invest a little bit of period tweaking your own advertisements before you have them perfect. Additionally continue operating from accumulating visitors aimed at your website, the greater visitors, the greater mouse clicks you're going to get in your advertisements.

How to Add a Recent Forum Topics Widget to Blogger

If you are using the Nabble forum on your blog, you will most likely need this gadget as well in order to display the latest topics that have been published on the forum. This works similar to the recent comments gadget as it uses the Blogger blog's feed.

nabble forum
To add the Recent Forum Topics widget to Blogger, follow the steps below:

Adding Recent Forum Topics Widget

Go to your forum and look at the bottom where it says Feeds. Clicking on that link, you will see two Feed links: the first being the Topics only Feed, and the other one is Topics and replies. Pick the one you need.
using nabble feeds to see latest forum topics

Now, log into your Blogger Dashboard, go to "Layout" and look for the Sidebar section on the right side.

Click on the "Add a Gadget" link and choose Feed from the gadgets list. Paste the Feed URL that you copied inside the text box.

configure gadget feed in blogger

Click the "Continue" button to configure the parameters and finally, click "Save changes" to see the results.

That's it... now you should be able to see the Recent Forum Topics widget on your Blogger blog. Enjoy!

Add a forum on your Blogger blog with Nabble

Forum is a platform where visitors can interact with each other and discuss different hot topics. There you can create various topics for getting comments or suggestions on them. If you have good traffic, then you can post questions on daily basis for the potential visitors to answer, thus your forum simultaneously converts itself into a huge frequently asked questions section (FAQ).

Forums are a great way to provide your visitors an open social atmosphere to express their useful ideas and share others ideas as well. So, here are a few easy steps on how to add a forum to your Blogger or blogspot blog using Nabble:

blogger forum, blogspot nabble forum

How to Create a Forum on Blogger With Nabble

To add a forum we will use Nabble which is, in my opinion, one of the best free options available online. First, go to the Nabble page to create an account (keep in mind that this account will be the moderator of the forum).

Once we have everything set, go to "Options" -> "Application" -> "Change appearance":

nabble change appearance

There, we can also edit the CSS of the forum, among many other things.

Next, create the structure of a real forum so that it is organized by categories. To do this, click on the "Options" menu - select "Application", then click "Change application type":

nabble option change application type

Then, choose the Forum category and save your changes.

To finish, we only have to create categories. So go back to "Options", this time select "Structure" and then choose "Create a new sub-forum":
nabble create new sub-forum

Fill in the details of the category, and that's it! You will now have your forum up and running.

The rest are small details, like sort categories (Options > Structure > Manage sub-forums), customize your avatar and your signature (YourNickname > Account Settings), change permissions (Options > Users > Permissions), etc.

For adding the newly created forum to your blog, you must go to "Options" - "Embedding options" and copy the javascript code.
nabble forum embedding options

Embed the forum in a Blogger page

Log into your Blogger Dashboard - select your blog, click the "Pages" link on the left sidebar and click to create a "New Page".

Once the page editor has opened, switch to the "HTML" tab next to the "Compose" tab.


Inside the empty box, paste the code that you copied earlier, and if everything went well, you should see the new forum on your Blogger blog.

create a forum for blogger with nabble

So this is how you can add a Forum on a Blogger blog using Nabble. Hope this tutorial has been useful and you will begin using this great service.

Top Commentators Widget with Avatars for Blogger

The commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and replying to discussions which leads to more activity in the posts.
how to add top commenters widget to blogger

It is therefore very important to know which are the most active users of your blog, the users who leave more comments, and for this reason, today I present a great method to display a list with the top commentators.

The gadget will look something like this:

add top commentators widget to blogger

This Top Commentators gadget comes with user's avatar and is done with JavaScript.

How to Add the Top Commenters Gadget to Blogger


1. To add this gadget, you have to go to Layout, click on Add a Gadget link.

2. Select the HTML/JavaScript gadget and copy/paste within the empty box the following code:
<style type="text/css">
.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}
</style>
<script type="text/javascript">
var maxTopCommenters = 8; 
var minComments = 1;     
var numDays = 0;         
var excludeMe = true;    
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLiUSYs7d07zIVwzbyJuQsDK76dkjrocB4vh_6uU31nxRf5F-Z7bFEwlk2uaU64DVynpdoVVXN_p1uRYI94EObDxgQxkguwvd-9d6-FbsRAvVTO8p-ZtTcTn6Em7ohBSOXpwF6OaVM7C4/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGlqFtpDaR3WeDcCKykeHusXq8GC4uqryn-47ko3bqi9pl6myxe45_TLi_HE9jK_3wVeeh9unWXAhCbH7S4qgCFV_6Li72w_28MRnpy18AEO37Ta_eADcHUNRkbjNHNhXUKMWpSF7a6GHo/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
   
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
3. Now you just have to save changes and you're done!

Configuration

- To modify the number of users displayed in the gadget, look for var maxTopCommenters = 8; and change 8 with any number you want.
- To change the avatar size of the commenters, look for var sizeAvatar = 33; and change number 33 with the number of pixels you want. - To hide your name or some other username, replace the someotherusertoexclude text between the quotes (to add more, add another comma after the text in red, then type the username you want to exclude between the quotes)

Sunday, 20 October 2013

Stop Google from "fixing" pictures that are loaded through Blogger

This article is about how you can stop Google from automatically "enhancing" pictures that are loaded in Blogger - even if you do not have a Google+ account.


Google has started automatically "fixing" new pictures as they are added to your blog

In May 2013 Google added the Auto-Enhance and Auto-Awesome features to Google+ Photos. These are meant to make your pictures look better, ie more like those which are taken by professional photographers.

These features are turned "on" by default. And because:
  • Photos loaded using Blogger are stored in Picasa-web-albums, and
  • Picasa-web-albums and as Google+ Photos actually have the same collection of photos - yes, even for accounts that do not use G+,
the effect is that auto-enhance and auto-awesome are applied to all images loaded through Blogger's post-editor, header-picture loading tool and gadget-picture loading too;.



Why is this a problem

In many cases, these features work as they are intended to, and the illustration that is shown on your blog is more attractive than the one you uploaded - it's brighter, clearer and loads faster.

But there are some situations where the effect of the auto-enhancement is not good. These include:
  • Pictures with some transparency - which is auto-corrected to either light grey or black
  • Pictures that are intended to be dull / dark / shady - these are automatically lightened.]
  • Pictures that are loaded at a certain photo quality - are automatically downgraded to a lower quality (which is fine for viewing on screen, but not so fine if you actually want to use your blog to share high-quality photos).

Blogger users who have a non-white background, and who deliberately upload images with a transparent background so their blog background will "show through" the image have been particularly annoyed by this.   And I have been less than impressed by the faint grey "wash" added to the background of some of my diagrams - for example:

The left-hand picture was auto-enhanced, the right hand one was not



How to turn off photo auto-enhance if you use Google+

If your blog - and the account you use to post to the blog - is linked to your Google+ profile, then you can stop your photos from being changed by:
  • Opening the Google Plus settings tab.
  • In the "Photos" section, un-ticking "Automatically enhance new photos"

This stops the auto-enhance and auto-awesome tools being applied to any new photos that you upload from now onwards using Google+ Photos, Picasa-web-albums or any Blogger feature that lets you load a picture (the post-editor, the header widget settings, the picture gadget settings).

Alternatively, you can turn off the auto-enhance and auto-awesome changes that are made to specific pictures by by finding them in Google+ photos and un-ticking "Auto-enhance" in the "More" menu.


How to turn off photo auto-enhance if you do not use Google+

There is currently no option in Piscasa-web-albums to turn off the auto-enhance feature.
This means that if you load photos to either Blogger or Picasa-web-albums, using a Google / Blogger account that is not linked to a Google+ profile, you cannot stop auto-enhance from happening.

Some people have suggested that the way around this is to:
  • Temporarily link the blog to a Google+ profile (either your own one, or one that you create just for the purpose - eg "Mr John Smith")
  • Turn off the auto-enhance feature using the Google+ procedure listed above
  • Fix up the damage to any pictures that you loaded through Blogger or Picasa-web-albums between mid May 2013 and today by finding them in Google+ photos and un-ticking "Auto-enhance" in the "More" menu.
  • Unlink the blog from the Google+ profile.

However I do not believe that this is entirely correct:   my tests suggest that whether or not photos are auto-enhanced is controlled by the settings on the Google+ account that is used to upload the pictures, no matter whether the blog is attached to a Google+ profile or not.

(I've been testing this a lot because I have a number of blogs that are linked to Google+ Pages that are in my personal profile, but which I generally post to using a different Google account that has a more generic name like "Editor, Table Quiz Helper", and it's own separate set of Picasa-web-albums:   I want to be able to hand these accounts on to my successor when I leave the community groups that they are for.)

Previously, the main options that I identified and recommend were:

However another option, which I now think is better, is to:

  • Make a Google+ Page for the blog
  • Give that Page it's own login-name and password - effectively turning it into a separate new Google account
  • Give that new Google account administrator rights to the blog
  • Make the setting change described above in "How to turn off photo auto-enhance if you use Google+" while you are logged in as the new Google account
  • Use the new Google account to load photos to the blog:   this will mean that the photos are placed in the Google+ Photos album associated with the page, and so you can access them using either Picasa-web-albums or Google+ Photos.



Other Options

If you really don't want to use even a minimal Google-plus account, then your options are limited.

Use another picture host

You could load the pictures that you want to use in your blog to another picture-hosting service (eg Flickr) - however doing this means that you posts will not have a thumbnail image.

Minimise the damage

If you make sure that pictures which you load have a white background (or whatever colour background your blog has) instead of being transparent, then the impact of auto-enhance will be a lot less.    I have found that if you use a .png file rather than a .jpg, the background is white instead of transparent.   (This is fine for me, because I use white blog backgrounds.)

Wait for things to change

A very simple fix would be for Picasa-web-albums to use default values of "No" instead of "Yes" for auto-enhance and auto-awesome, or to set these up as settings in the PWA profile.

Another option is that Google may improve the enhancement algorithms (ie rules which control how pictures are "touched up").

Fingers crossed, one of these will happen soon.




Related Articles:

Giving another Google account Administrator rights to your blog

Turning a Google+ Page into a separate Google account

Post.snippet and post.thumbnail - how they are derived from your blog post

How to add a picture to your blog, using the picture gadget

Making a Google+ profile for the Google account that you use to upload the pictures,