Sunday, August 20, 2006

Blogger Beta: Adding advertisement (and hit counter)

NOTE: This post was published when AdSense ads could not be displayed on a Blogger blog, but that had been fixed. There were a few updates which some readers seem to miss as one comment showed, so I hope you will read through the whole post. Maybe if I have the time, I should rewrite the post
--------------------------------------------------
It is now easier to add things like advertisements and hit counter, etc. to a Blogger Beta blog. For example, you want to add an Amazon advertisement to your blog. All you have to do is to go to layout (see screenshot below) You will see a section at the top where you can edit the header, a section in the middle where you can edit the appearance of your post, sections on the right where you see a section "Add a Page Element". This will be the section that we will be using to add an Amazon ad to the right sidebar. Below that section are two sections where you can edit the Archives and the About Me section. Below the post and the sidebar sections will be the footer sections where you see another "Add a Page Element" where you can add things like a copyright notice, hit counter, etc. In this case, a hit counter has been added, and you see that just below the "Add a Page Element" section (where you see HTML/JavaScript).

We will now describe how to add the Amazon ad. First, you sign into the Amazon Associate site and generate the script. Copy the script, then go to the Blogger Beta layout page, and click on the "Add a Page Element". A pop-up will appear (see screenshot below)
All you have to do now is to paste the script into the box and click "Save Changes" and once it is done, it will appear below the "Add a Page Element" section. Now that it has been added, you can preview the result, and if you do not like the position, you can drag it to the position you want. All you need to do is to hover your mouse over the Page element. The cursor will change into a cross (see screenshot below. Highlighted with a red circle and an arrow pointing to it):

Cursor change to cross to enable dragging Page Element

You can, for example, below the "About Me" section. No more having to squint through long list of HTML to figure out where to paste the script. Isn't this easier than the old method?

Latest Update: Got a response from AdSense Help. They said they have resolved the problem that was preventing Google ads from appearing on Blogger beta pages. You no longer need to modify the code. I have tested that by adding a Wide Skyscraper Ad unit to the sidebar using the method detailed above without any modification to the code, and it displayed without problem. You can see it at Testing Blogger Beta. (close new window to get back to this page)

Adding a hit counter like statcounter

You can read about how to generate the script for a hit counter by surfing over to (WILL CONTINUE EDITING LATER)

Update on statcounter: Someone commented that statcounter in Blogger Beta doesn't work for individual post page. I decided to check that out by checking my statcounter statistics. I viewed the "Popular Pages" and found that there were hits counted for individual post pages, so it proves that statcounter added in the way described in the link does work. If you want to see a screenshot of that statistic, surf over to Problem with statcounter in Blogger Beta? (close new window to get back to this page). The screenshot is at the bottom of the page.

Update 23 February 2007: A reader complained of not being able to add statcounter in New Blogger. I have added statcounter into many blogs in the manner described above, some of them without ticking "XHTML Comppliant" and they worked, as I have explained in the update above. However, if you want to be sure, tick "XHTML Compliant" to generate the script for the statcounter (see screenshot below). For me, I have found that there is no difference, but if you are having problem, try that and see. Note that if you are reinstalling statcounter, you don't have to start from scratch. When reinstalling, click the spanner icon to start off from where you left off.

Installing Statcounter, selecting XHTML Compliant


Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

101 ways to Boost Your Web Traffic: Internet Marketing Made Easier

NEWER POST OLDER POST

81 comments:

  1. thanks for the info. this is very appreciated.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Well, I have asked the Blogger Team and now awaiting their answer, if any.

    ReplyDelete
  4. are you sure about the no index no follow, i'ts only displayed on your test page under a privacy widget. Also has anyone had difficulty implementing the Adsense for search feature in beta?

    ReplyDelete
  5. Hi Peter,

    Does this mean, we have to put our sitemaps over here as well? Our have our sitemaps automatically been moved from blogger to beta blogger?

    Thanks

    ReplyDelete
  6. Hi Peter,

    Does this mean, we have to put our sitemaps over here as well? Our have our sitemaps automatically been moved from blogger to beta blogger?

    Thanks

    ReplyDelete
  7. From your question, I am assuming that you were invited to join in the Beta program program and migrated from there. I weren't, and considered myself lucky I weren't. I was more cautios and set up a new gmail to start the Blogger Beta blog. So I don't know if the metatag for verification purposes have migrated over to your new template. You can check page source and see if it is there, though you can't edit or add it in if you don't.

    ReplyDelete
  8. Anonymous9/21/2006

    Is there a way to get the ad into the post on the main page. for example if I wanted a small text add after the post but before the comments and tag section.

    ReplyDelete
  9. This is for Blogger classic. Look at post For ads after each post, where to paste the codes. I haven't looked into the Blogger Beta template yet to see if the same method can be used.

    ReplyDelete
  10. Anonymous9/26/2006

    Thanx for enlightening me. That was a bug in blogger beta and I was waiting for it to be resolved. I had mailed them for it. Now it is resolved, so I will remove my tampered code now and again put the correct code :)

    ReplyDelete
  11. Anonymous10/06/2006

    How do you get your ads to appear on the left of your text, instead of the right? On my blog, I cannot figure out how to do the adsense wide skyscraper without it significantly altering my text. Thanks!

    findingcollege.blogspot.com

    ReplyDelete
  12. The instruction on how to get the sidebar (and the skyscraper ad) to display on left is at How to get the sidebar to display on the left.

    ReplyDelete
  13. Anonymous10/09/2006

    Thanks, Peter. You are generous in providing help.

    ReplyDelete
  14. Anonymous10/20/2006

    ahh! thanks so much.

    ReplyDelete
  15. Anonymous10/26/2006

    The problem isfixed if you put GoogleAdsense in one of the "page element" of the template; if you want to put your Ads elsewhere, it seems that you still have to delete the "comment tags" from the AdSense script.

    ReplyDelete
  16. The post was done when adsense ads could not be displayed by adding the script via "Add a Page Element". Then the fix about removing the comment tags was added, but the remark that it will be against the adsense Program Policy was also made. AdSense and/or Blogger have solved the problem, the post was updated again to inform the visitors. If you have read the whole post, you would have noticed it. Perhaps I should redo the post rather than just adding updates, but there are time constraints. Maybe one day, I will do it. In the meantime visitors should take the trouble to read the whole post.

    ReplyDelete
  17. A note to readers of my blog. I am forced to remove some comments because the commentor left long unbroken line of URL. The post is OK in FireFox, but in Internet Explorer, those comments caused the sidebar to slide to the bottom of the page. I think the comments were left by Turbo. I have removed the comments and that problem is solved now. So please do not leave comments that are long unbroken lines. Also do check your blog (and post) occassionally in IE for problems like this. Incidentally, I have problem seeing the trashcan icon in the comment to delete the comments althogh I was logged in, but with some help from Blogger support, I finally managed to do it. If you face similar problems, watch out for new posts because I intend to publish a post about it when I have the time.

    ReplyDelete
  18. Anonymous11/01/2006

    Great work!I like your blog because you explain everythng so good.Although I am from Greece and don't speak english very good.I have some problems and want to ask you can you give me your email please?
    clyde@mail.gr

    ReplyDelete
  19. Dear sir with respect to i want to say some words of your advertisement
    blogs your blogs is very nice,and i also give a small types of a seagation-
    http://www.cityfly.net

    ReplyDelete
  20. Anonymous11/17/2006

    Thank you so much for this site to help us dummies work the new Beta version of Blogger. You have helped me out tremendously. I did not like the new version at first because I couldn't figure out how to do anything. But now I am learning how to do alot and it is making my page so much nicer. Thank you so very much!!!

    ReplyDelete
  21. Anonymous11/18/2006

    Hi Peter, I started a new blog Thursday because I still hadn't gotten the invite to switch my old blog to Beta.

    So far, I like Beta A LOT! However, for the life of me, I cannot figure out how you were able to get AdSense ads to run horizontally just after your title box. AdSense in my template is restricting me to vertical ads or the smaller buttons.

    Have I missed something?

    Thanks for your helpful blogs!

    ReplyDelete
  22. Hi Diana,

    Have a look at this post Adding graphic to your blog header. It was written for a graphic, but you can use it for adding adsense scripts, etc.

    ReplyDelete
  23. Hi Diana,

    Actually that post need a bit of editing. I think you have to first count the no. of HTML page element, then add a blank (or <!-- some text -->) and look for the next HTML widget. I need to do a bit more of testing and editing of that post. But I hope from that post, you can get the method for your blog.

    ReplyDelete
  24. Anonymous12/15/2006

    This tips might help you guy to embed adsense code to beta blogger template, or wrap it inside post body, without the risk of tampering google adsense code

    ReplyDelete
  25. Hi bloggerdigest,

    Thanks for the link, which will be useful for my readers. However, wouldn't that tip on your link have the same effect as using the method outlined in this post Blogger Beta: Adding AdSense or a permanent "sticky post" at the top of the main column?

    ReplyDelete
  26. Anonymous12/16/2006

    Hi Peter, thanks for this tweak. It is not deniable that this tweak work well for sticky post purpose as you have said.

    In the context of embedding google adsense properly in beta blogger post, it is more direct by using footer element and drag it up to post header, as mentioned ealier.

    ReplyDelete
  27. Anonymous1/06/2007

    How about custom channels for adsense in Blogger Beta? Were U able to set this up?

    Thanks

    ReplyDelete
  28. Scripts and custom channels are generated in the AdSense account, and you will be able to paste the script into Blogger Beta without any problem. Are you having problems with that?

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  29. Someone using Blogger asked how he could get his adsense advertisements to appear on the left, and his sidebar on the right (rather than piling everything on one side or the other, as the Blogger template does).

    I notice that you, Peter, have managed to overcome this problem...how did you do it? Your blog has adsense ads on the left, your sidebar on the right, and text in between.

    The link you provided earlier siimply tells people how to move the index and body from left to right; it does not tell people how to do what you have done on your blog: ads on left, sidebar on right, and body in between.

    Thank you.

    ReplyDelete
  30. Just use a 3 column template as shown in the following posts:
    3 Column template for New Blogger (formerly Blogger Beta) by Ramani

    3 column templates for New Blogger (formerly Blogger Beta) modified by Stavanger

    Personally, I prefer Ramani's 3 column template as it fits in nicely into a 800x600 screen resolution. 5-20% of my blogs visitors are still using this small screen resolution.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  31. Thank you, Peter, for the prompt response, and for letting me know at my blog that you had posted a reply.

    ReplyDelete
  32. Hii peter,
    I m using New blogger and not able to put statcounter code on it. Do u know any tricks to put statcounter on new bloggger

    Best Regards,
    Eliena Andrews

    ReplyDelete
  33. How are you installing statcounter? Via "Add a Page Element" in the Layout as described in the post? If so, you should have no problem. If you want to be sure, perhaps when reinstalling the script for statcounter, select "XHTML Compliant". See the screenshot in the update in the post. Let me know if you have any further problem.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  34. Thanks peter,
    It worked like charm. Thanks for your help

    Best Regards,
    Eliena Andrews
    http://healthtreatments.blogspot.com

    ReplyDelete
  35. Hi Peter,

    Do you know how I can post other ads to my blog? A few merchants in town want to advertise on my blog but I don't know how to script ads in blogger and can't find out how to do that.

    Thanks very much -

    ReplyDelete
  36. That will depend on the type of advertisement they want. I had someone approached me to put a text link ad on one of my blog, and that just invole adding a hyperlink
    <a href="URL of his site">Description</a> if you are using the HTML/Javascript Page Element, or simply adding the URl and the description when adding the hyperlink in a link list.

    Or they may want a clickable image to lead to their site, in which case you should check out this post: How to put a clickable picture in the sidebar.

    Everything depend on what they want.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  37. Michael said: "but I don't know how to script ads in blogger "

    If they are HTML/Javascript, just paste them in a HTML/Javascript Page Element. I suggest you start a test blog, and do that to see how it appear, and if it is all right, then repeat it in your blog proper.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  38. Thanks Peter! That's helpful info for everyone on blogger -

    All my best,

    Mike

    Michael Shapiro, Editor
    www.thealternativepress.blogspot.com

    ReplyDelete
  39. Thanks for your clear and helpful guidance. After floundering for more time than necessary in an attempt to add a hit counter, I found and followed your advice and was finished in less than a minute.

    ReplyDelete
  40. Hi Ishkabibble and others who have taken the time and trouble to experss their appreciation. Thank you very much.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  41. How do you add a page element in another column so that you can easily manipulate the column?

    ReplyDelete
  42. Sorry, don't fully understand the question. Are you referring to adding a third column? If so, refer to this post Adding a second sidebar to your blog or for ready-made 3 column templates, refer to 3 column templates for New Blogger modified by Charlemagne Stavanger.

    If you are referring to get a "Add a Page Element to the top of the main column, refer to How to add AdSense ads, search box, "sticky post", etc. at the top of the main column.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  43. Dear Mister Chen: Thank you for the wonderfully clear explanation on how to add a hit counter:It was done within minutes !I only wish I'd found your post sooner instead of spending hours bumbling about...
    Thanks again,
    Pericharis

    ReplyDelete
  44. thanks for the info it helped me :)

    ReplyDelete
  45. My blogs don't have the Add Element and Html/Java at the bottom of the elements page like the image you have. Is this because of the type of template I'm using or am I missing something? How do I get this? Thanks.

    ReplyDelete
  46. Hi Moe,

    If the Add a Page Element is missing from the footer, it is probably because of the template you are using. If it is missing from the Header or the Main Column, that can easily be added.

    There are plenty of templates you can chose from with a footer. Try these:
    New Blogger 3 column templates modified by Stavanger

    Dots New Blogger template with Header modified by Stavanger

    New Blogger 3 column templates modified by Ramani

    New Blogger 3 column templates by Isnaini

    New Blogger 3 column templates by Thur

    Ramani's New Blogger 3 column Neo template

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  47. Hello this is clint.
    im sortta new to blogging
    i just got mywebsite built a little better then when i started and got some google ads and things.
    but i cant get the post to show the oldest one ive wrote to the newest in that order can you help me if so let me know

    clintpee@gmail.com is my email
    clint.

    also i do link exchange if your interested

    ReplyDelete
  48. Thank you so much you were very helpful!!

    ReplyDelete
  49. Please tell me how to add meta tag at beta blogger.

    ----------
    http://paidforwritedown.blogspot.com

    ReplyDelete
  50. Thanks, very helpful site, your time is well spent.

    ReplyDelete
  51. Hi the knitting circle,

    Thanks for the encouraging words.

    Hi dr. Internet,

    You add meta tags the same way as for old classic templates. You got to get into template editor (LAYOUT > TEMPLATE > EDI HTML) and add the the meta tags between the <head> and </head>. Or easiest to explain, you can add them immediately after <head> tag, or immediately befor </head> tag.

    Peter Blog*Star
    Successes with Kontera ContentLink

    ReplyDelete
  52. how about adding meta tags to each post

    ReplyDelete
  53. Hi SEO contractor,

    Not possible

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  54. hi sir ...im Ravi Varma ..doin my B.Tech final year.... im an INDIAN... im trying to contact u from a couple of days .... but i dint succeed .... i click the "contact me"...buton on your page .. but doono wat to do after dat..[:(]...i need some help..thanks in advance

    ReplyDelete
  55. Vanakam Ravi,

    You can contact me by leaving a comment.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  56. Peter Chen, your info on this site has been very helpful to me, so much that I have added a link to you on my blog. I am new to blogging, i have signed up for an adsense account, it has been approved and it is supposedly on my blog, I cannot see any ads, can you offer me any advise on how to fix this.

    ~Scott

    ReplyDelete
  57. Hey thanks for the info!

    ReplyDelete
  58. Hi Subspciez,

    There are many changes with AdSense. It take a while after you added the script before you see ads. I am sure you are getting ads displayed by now.

    Thanks for the link.

    Peter ChenBlog*Star
    Environmentally friendly presents (gifts)

    ReplyDelete
  59. This comment has been removed by the author.

    ReplyDelete
  60. hi Peter,
    i'm just a little confused by the adsense codes. I started off generating 1 code and pasted it in my HTML editor after the "body" tag (blogger minima 4 column from you ... thank you :) then i added adsense page elements. the ads came out but my whole blog is pushed down about 2 inches from the nav bar.

    I kept looking for info on where to paste the adsense codes, and if i have pasted them right. i discovered that you can generate more than 1 code... for different ads configuration... but where do i put 2nd 3rd 4th codes?

    then i remembered HTML/Java page elements. I deleted all i've done above, generated new adsense codes 2 links 2 unit ads, in correct configuration, and pasted them in the HTML/Java page elements. the ads have came up and my blog has gone back to it's original place. I'm glad of that but i'm just wondering if it is legal to put adsense codes in the HTML/Java page elements... i dun wanna be banned by adsense.

    Sorry if my question seems silly... i'm actually rather new at this... thanks in advance :)

    ReplyDelete
  61. "I started off generating 1 code and pasted it in my HTML editor after the "body" tag...."

    This caused me to think you are pasting the codes direct into the template? (LAYOUT > EDIT HTML)

    That is for the old classic Blogger template. For the New Blogger xml template, you do it as described in this post, go to LAYOUT > GADGET (formerly Page Element) > HTML/Javascript and paste the codes there.

    ReplyDelete
  62. Thank you so much Peter! Now i know i'm doin it right! Thank you!

    ReplyDelete
  63. it sounds worse than it is.

    ReplyDelete
  64. hi.. cud u help me set up a stat counter on my blog??? please.please

    ReplyDelete
  65. Thanks so much! you're a big help!!

    ReplyDelete
  66. Hi PrettyToxics,

    To add a visitor counter for you, it means you will have to give the helper your Blogger username and password and preferably your email address as well.

    ReplyDelete
  67. Great bit of information! Great tutorial on how to add advertisements!

    http://kantgetrite.blogspot.com

    ReplyDelete
  68. Nice post. Here is another Post Hit Counter, which counts the page views of each individual post rather than counting for whole blog visits. Look here

    http://www.ialwayscapital.com/2009/07/bloggerblogspot-post-views-hit-counter.html

    ReplyDelete
  69. Thank you for showing me how add hit counter :.)

    ReplyDelete
  70. Great blog, thanks! hopefully i can get somone to actually look at mine one day! ; )

    Tony

    ReplyDelete
  71. Great blog, thanks! hopefully i can get somone to actually look at mine one day! ; )

    http://tonygutierrez.blogspot.com/

    http://seriouslyonline.blogspot.com

    ReplyDelete
  72. um, i'm still really confused.

    ReplyDelete
  73. Hit counter is really quick and easy to set up on your website.

    ReplyDelete
  74. waiting for newest update...

    ReplyDelete
  75. Well i think adding hit counter is much more important then adding any advertisement because a counter lets you track the number of visits or hits on your website. This will give you idea if there is an improvement of your site traffic.Very informative post. Thanks for sharing

    ReplyDelete
  76. hi peter,
    yesterday i sending request to Google adsence team ...

    they are saying ....

    Thank you for your interest in Google AdSense. After reviewing your
    application, our specialists have found that it does not meet our program
    criteria. Therefore, we are unable to accept you into our program.

    My blog - vaibhavkadam.blogspot.com

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics