Monday, June 07, 2010

How to - place a hit counter on a Blogger or BlogSpot blog

Blogger and BlogSpot are the same thing, a user-friendly blogging platform owned and operated by Google. They recently underwent an upgrade that has seen the introduction of a common interface, so these instructions should work for all users (I hope!).

I did hope there was a counter already set up as a gadget, but there wasn't. I certainly couldn't find it by searching the gadgets for "counter" anyway. So let's just use another gadget - the "HTML/Javascript" one, instead.

First up, though, we need some counter code. You can usually get this from any virtual server hosting company but if you don't have one of those handy there are plenty of options on the web. Beware though as the top 2 on a Google Search for "counter code free" were marked as suspected spammers/crackers or just plain infected sites. You don't want bad code infecting your blog, so respect those warnings if you see 'em.

Anyway I found what appears to be a reputable site and I have tested it out. So far, so good. It offers lots of variations on the hit counter theme and I just chose "whatever" to see if it worked. It did.

Yes, it would work better against a white background but hey, it works ;-)

I got it from Website Hit Counters in the form of a snippet of code. My selected code generates a counter that looks just like this (please don't view source and copy my code, it's specific to my site and won't work for you!!):

web counter

All I had to do was copy and paste that code into the standard HTML/Javascript gadget supplied by Blogger.

So the steps are:

  1. Go to a reputable hit counter maker. If you go to Website Hit Counters they'll ask you to select a style (choose wisely, unlike me). You'll also have to supply a starting count (like zero or something higher if you like) and an email address. They'll email you with stats if you like. There's no other charge
  2. Copy the code that is generated
  3. Go to Blogger and log into your account
  4. Select your blog on your Blogger dashboard
  5. Choose "Design". You'll be presented with "add or arrange page elements" and an overview of your blog design. 
  6. Depending upon the layout of your blog (something you can also change if you like) somewhere on that design will be an option to "add a gadget". Preferably find that option in a good spot - the bottom of your page for example - and click on it
  7. A gadget list will come up - just scroll down to "HTML/Javascript" and click on the "plus" or addition sign to add that gadget
  8. The gadget wants a name but you can ignore that - leave it blank - and just paste your code into the large empty box, then click "save"
  9. It will then save the code on the page! Just click on "view blog" and scroll down to the page bottom (or wherever you chose to put it). Your counter should now be visible.    
  Hope that works for you, too.  

No comments: