Tuesday, February 13, 2007

Ways of putting searchbar, AdSense ad units, link units, hyperlinks, text, etc in the Blog Header as well as above the post in every page

Got a question from a reader of my blog in the comments section of this post Incorporate AdSense ads in your New Blogger (formerly Blogger Beta) posts. The question was: "How do i add adsense codes as you did on your page on Top right hand side and also on header below search. Currently, i m using 3 column blogger (http://visitformoney.blogspot.com). How do i put adsense code as you did on your site Peter?" in the comments section. As it will be difficult to answer it in the comments section, I thought I will answer it with a post.

The first thing that need to be done is to add "Add a Page Element" in the Header section and the post section of the blog Layout. Refer to the following posts for these:
Adding graphic, AdSense ads, etc to your New Blogger (formerly Blogger Beta) blog Header
New Blogger (formerly Blogger Beta): How to add AdSense ads, searchbar, "sticky post", etc. to your blog

Adding AdSense Ad units, link units or searchbar to the blog Header

First generate the script for your Ad unit, link unit or searchbar in your AdSense Account. Then sign into Blogger Dashboard, select the blog and click LAYOUT. See screenshot below. Click to enlarge:

Add AdSense ad unit, link unit, searchbar, etc. to the blog Header

In the pop-up, select HTML/Javascript, and paste your script there. Then click "Add to blog". If the Page Element is not in the place you want, hover your mouse over the Page Element, drag and drop to whereever you want it.

If you want another page element to contain, for example the link unit, just repeat the process.

BTW, you can actually incorporate both scripts into the same HTML/Javasscript Page Element if you wish.

Adding Searchbar and other stuff above the post in every page

Take this blog for example: Dummies Guide to Google Blogger, what I did was incorporate the AdSense searchbar together with the hyperlink and the text within the same HTML/Jayascript Page Element. I put the script in the scrollbox below for you to see:

<!-- SiteSearch Google -->
<form action="http://www.google.com/custom" target="google_window" method="get">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" height="32" align="left">

<br/>
<input value="dummies-guide-to-google-blogger.blogspot.com" name="domains" type="hidden"/>
<label for="sbi" style="display: none">Enter your search terms</label>
<input maxlength="255" id="sbi" value="" name="q" size="35" type="text"/>
<label for="sbb" style="display: none">Submit search form</label>
<input id="sbb" value="Google Search" name="sa" type="submit"/>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input id="ss0" value="" name="sitesearch" type="radio"/>
<label for="ss0" title="Search the Web"><font color="#000000" size="-1">Web</font></label></td>
<td>
<input id="ss1" checked value="dummies-guide-to-google-blogger.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="Search dummies-guide-to-google-blogger.blogspot.com"><font color="#000000" size="-1">dummies-guide-to-google-blogger.blogspot.com</font></label></td>
</tr>
</table>
<input value="pub-94080740917" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="3432092235" name="channel" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="en" name="hl" type="hidden"/>
</td></tr></table>
</form>
<!-- SiteSearch Google -->

<center><a href="http://dummies-guide-to-google-blogger.blogspot.com/1999/12/content.html"><h1>CONTENT</h1></a></center>
<center>Click on above to get to the CONTENT page. Find topics by using the searchbar above or in the navbar at the top-left corner of the page or use the Labels in the right sidebar</center>

28 comments:

  1. Thanks Peter,
    For taking my question seriously and giving solution for it. I appreciate your kind help. Now, i m really loving blogging :)

    ReplyDelete
  2. I'd love to put AdSense in my header but unfortunately, I don't have the option to add an element to my header. The option just isn't there. Is this only available with certain Blogger layouts?

    ReplyDelete
  3. It is not available in most templates, you will have to change something in the template to get the extra "Add a Page Element". The post Adding a graphic, searchbar, etc. to your New Blogger blog Header shows what need to be done.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  4. peter, thankfully for u to create this blogs. i really did helps me alot. But however...there is one thing that i cannot figure out. that is, how to make our blogs appears in google search for example :-

    sumone wanna look for danity kane lyric and in m blogs, got a danity kane lyric. so how do made it appears in qoogle search automatically.

    understand my question of not? hehe..thank u 4 da help. really appreciate it

    ReplyDelete
  5. I put the script in my blog(blogger)I get from google adsense..but always get an error...
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Attribute name "checked" associated with an element type "input" must be followed by the ' = ' character.

    ReplyDelete
  6. Thanks a lot for your help.

    ReplyDelete
  7. Are you adding it via a "Add a Page Element" in the Layout?

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  8. Really thanks for your prompt reply. Yup before I didn't add it through page elements. Stupid me. Now all working!! Thanks a lot!!!

    ReplyDelete
  9. Thank you Peter,
    As always, your tips and suggestions and answers are always so helpful! What I would like to know is how I can put a subcription box on my blogs; you know "Do you want to subcribe to this blog, sign up here!" kind of thing, and then they would get a small form to leave their e-mail and name perhaps. I'm beginning to get more returning visitors and have no way to get their subscription info. Thanks for any help.

    http://thesilverpeoplechronicle.blogspot.com/
    http://rapsodiaantillana.blogspot.com/

    ReplyDelete
  10. Hi Rapsodia,

    I believe bravenet have feee email subscription box, but bravenet is famous for putting popup ads on one's site when you use their service, so I don't recommend unless you don't mind having popups in your site.

    Feedbritz offers a free 15 day trial for their subscription and I have put a trial email subscription in this demonstration blog Articles for women. It is at the bottom of the left sidebar. Enter your email there to try their subsription and see how you like it. As it is only a 15 day trial, I don't know what you will see there after 15 days. However, if you are keen on a subscription box, you can get a paid service, probably wouldn't cost you very much, but I don't know as I have not tried to opt for their paid service.

    I haven't found any other free subscription box other than for bravenet. If I do, I will let you know.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  11. Hi Peter,

    Just wondering, how would one go about putting an AdSense unit on the sidebars of the pages for individual blog posts? As it is, the adsense only shows up on the main blog page. (I'm using the new blogger, but have to use the text editor until I figure out how to keep my old changes while using the WYSIWYG editor).

    Thanks very much!
    Cat

    ReplyDelete
  12. Hi C,

    When you add the script for displaying AdSense ads using the HTML/Javascript of the Add a Page
    Element in the Layout as outlined in this post Adding AdSense ads, Amazon ads, hit counter, etc. for New Blogger, the ads should be displayed in every page. Are you adding the script that way. If you are and you are not seeing the ads in every page, I am very suprised and wouldn't know what is wrong.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  13. Hi Peter,

    Thanks for replying so quickly! Unfortunately, I can't use the "Add an Element" feature, I only have the text code editor (a la Old Blogger). In order to use the Layout function, I have to upgrade my blog, which means I'll lose all the custom changes I've made to my template.

    Is there anyway to do it within the text template editor?

    Thanks again,
    Cat

    ReplyDelete
  14. Hi c,

    What kind of customization have you done with your classic template? Often, it is possible to save the template, migrate to the New Blogger template, then copy-paste from part of the old template depending on what kind of customization you did.

    Regarding doing the same thing as what this post describe in the classic template, what do you want to add? For things like AdSense script, I am afraid I don't think there is a way. For something like a sticky post, there are almost similar ways, but not the same. For example:
    How to make a post remain at the top of the main page, but this will be only for text and HTML, not Javascript. And it will only apply to the main page, not to the other pages.

    If you want to add AdSense ads at the top of the post, you can refer to this post:
    Putting AdSense ads after each post for old classic template. It is for putting at the bottom of the post, but can also be done to put it at the top. You can make a test blog and experiment by pasting the script in the same section of the template but at a slightly different position. I am afraid I am not keen to try it as most people have migrated to the New Blogger template. Maybe I will, but only time permitting.

    Peter (Blog*Star 2006 and 2007)
    Blogger for Dummies
    (This blog uses the old classic template and a lot of the post were originally written for the old classic template)

    ReplyDelete
  15. Wow, thanks for all the great info Peter. I think the best way to do what I want is what you suggest: to migrate the template over and re-do the customizations. A friend wrote the template for me (altered from the Rounders blogger template), so I started going line-by-line through it last night. Tedious, but oh well, it'll hopefully pay off! :)

    Thanks again for your help!
    ~Cat

    ReplyDelete
  16. thanks for being clear about using ADD AN ELEMENT for adding links, I finally get it. Question - can I get rid of the title (for example I have put 'Ad Links' for my adsense element) or move it to the side and make it smaller, I do not seem to have a formatting option?
    Another Cat
    very new blogger

    ReplyDelete
  17. And Peter, while I have your attention, I have just inserted a picture into my header behind the words but it doesn't stretch to fit the space - any way of forcing it?
    thanks

    Another cat

    ReplyDelete
  18. I worked out how to fix the picture issue - change the template...done

    Other cat

    ReplyDelete
  19. Hi Catriona,

    I surfed over to your blog and only saw "Ad Link" right at the top of your blog, with no ads nor links, so I am not sure what you are trying to do. If you can explain a little further, maybe I can help.

    Anyway, whenever I add AdSense ads, links lists, etc, I normally leave the Title blank unless I want a title. Maybe there is where your problem is.

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

    ReplyDelete
  20. Thanks Peter
    I am waiting for Adsense to list the content that's why the box looks blank

    I tried listing without a title but it inserted its own title"HTML"
    ?

    ReplyDelete
  21. Hi Catriona,

    All HTML/Javascript Page Elements will show HTML in the Layout. I am referring to what will show in the blog. And if you leave the title field blank, there will be no title shown in the blog. Look at the ads in my blogs. There are not title above the ads.

    Peter (Blog*Star 2006 and 2007)
    http://blogger-tricks.blogspot.com (Blogger Tips and Tricks)
    http://bloggerfordummies.blogspot.com (Blogger for Dummies)
    http://testing-blogger-beta.blogspot.com
    http://dummies-guide-to-google-blogger.blogspot.com

    ReplyDelete
  22. hi
    I would like to know how did you put that ads from amazon on left side of each of your post?
    I want to add different ads in each post like you did.

    Thank you
    Satish

    ReplyDelete
  23. Hi Satish,

    Sorry for responding so late, but I was busy especially in helping my country rid of racial politics and kick out corrupted and spineless Member of Parliaments in the most amazing election we ever had, and I have still not got over that euphoria that I had a part in that historical event for my country.

    I have actually started a post to answer your question, but it was left unfinished for a long time. I will need to look for that draft and if you have the patience, I am sorry you will have to wait till I finish clearing up the backlogs.

    Remind me again if I did not answer your question if you are still interested.

    Peter Blog*Star
    reluctant protest blogger

    ReplyDelete
  24. Hi ,
    Thanks for your help.I know how to put page element.But I think those page elements will remain same in all the post.I observed that in your pages the right side ads changed with every post.So I thought you have used some trick.But now I think those amazon ads are autogenerated depending on content of your blog.Am I right?

    Regards
    Satish
    http://satishnavada.blogspot.com

    ReplyDelete
  25. Sort of - Omakase. Copy-paste this
    "omakase wikipedia" in a search box and go find the meaning of that word.


    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
  26. hello sir i am new to this blog field can u help me


    "how to delete ad displying in header of my templet"

    bec i had downloaded one templet it contains ad in header portion its not look well so pls tell me how can i delete that ad.

    my blog: www.hacking2all.blogspot.com

    i am waiting for ur reply ...

    ReplyDelete
  27. You will have to let us know what kind of template you are using whether it is new Blogger xml template or old classic template

    ReplyDelete
  28. The new edit options for POSTING: the NEW photo downloading system is driving me INSANE. I really don't think it works as it should on MAC. I understand that you are supposed to place the cursor where you download to but that doesn't work it seems to download at the top anyway. I can use the little menu bar for sizing and placing left or right but for the life of me I cannot get it to move to where I want it placed. For someone that normally adds about 25 photos and strategically places them this is just not working! As for the thumbnail that just seems to float around in ghost image. Also the colouring options for Font and Block are right next to each other and the cursor keeps slipping over from font to the block option. ARRGGHH. Thanks for the kimchi pics Peter, now I'm hungry for Sydney food and I am going back to the old post settings menu

    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