25 Blogger hack: Add a sticky post/Adsense/search box in the main column
June 27, 2007 /

Let's suppose you want to feature a sticky post at the top of your Blogger posts, or perhaps you'd like to insert an AdSense box or site search facility. At present, there is no facility to do this in the default Blogger layouts system. But there are two ways around this problem. Change the post date to a future time:

This is the easiest method, and is most useful for those who need a sticky post, perhaps about a future event after which time the post need not be at the top of other posts. To do this, simply click on "Post Options" beneath the type box when you are editing your post and change the date to somewhere in the future. Blogger doesn't have the facility to publish posts on a future date, so your "sticky post" will remain at the top of your main column until this date has passed.

Add a new page element:

This is a more permanant, neater and convenient way to add a "sticky post" to the top of your main column. Uses for this may include a search box, a message about your blog, or Adsense/banner ads. You'll notice in the default Blogger layout for your template that there is no "Add a page elenent" in the posts box. You can change this by following these steps:

  1. Go to Page Elements>Edit HTML in your blogger dashboard. You don't need to expand the widget templates for this hack.
  2. Find the following section of code:
    <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section> </div>
    This section relates to the "Posts" section in your layout.
  3. Notice the part which says: <b:section class='main' id='main' showaddelement='no'> You need to change this to "yes" to allow other elements to be added to the posts section.
  4. Save your template and take a look at your "Page Elements". You should now see an "Add Page Element" link in the posts section (click image for an enlargement):

You can choose to add different page elements depending on your requirements:
  • To write an introduction to your blog, choose "Text"To add code for Adsense/banner ads, choose "HTML/Javascript"
  • To add a search function, copy your code into an "HTML/Javascript" element.
  • To add an image, choose "Picture".

The process for creating a custom header is similar to this method, which you can read about here.

Please let me know if there is a particular blog tutorial you would like to see on Blogger Buster by contacting me directly or leaving your comments below.

Technorati Tags:

25 Comments:

28 June 2007 19:05 Nimi said...

thanks.. this was great...!!!

29 June 2007 12:16 Amanda said...

You're welcome!

2 August 2007 17:21 Madhu said...

awesome ..! Thanks :)

11 December 2007 18:38
<a href="http://pro-designs.blogspot.com">Pro Designs</a> said...

nice tips
thank you

18 March 2008 22:50 IL Social Worker said...

Thank you! This worked like a charm!

14 May 2008 10:49 iSeL said...

great tip. too bad I can't implement it on my blog because it breaks my template. Y_Y

23 June 2008 00:52
Cheapwads said...

Amanda, I have been using every tip on your blog for the past 3 days and you are truly a god send. Several of the hacks you have included do not work for me right away and I have spent no less than 20 hours in 3 days tweaking them. Thanks for the inspiration. This has been a great experience and I have learned a lot about blogging in just 3 days, simply from following your guides.

On this hack, I really want to use it and it does not work with my template as when I pasted the html into the template, I get the message:

"More than one section was found with id: main. Section IDs should be unique."

I have checked the template a few times and there is no section under div defined as "main-wrapper", therefore I cannot locate the problem.

Any ideas you have? I appreciate the help in advance

11 July 2008 03:36 Dataceptionist said...

thanks this was awesome!

11 July 2008 09:23 Luisa said...

Hi, Amanda --

Thanks for all the great hacks!

Dunno if this might be another possibility, but on my blogger blogs -- all layouts -- it's possible to add a page element in the sidebar [for example] and then drag it to the top of the main column. It will stay at the top on every page of the blog until it's removed. That's the technique I've used whenever I've needed to put a sticky at the top of the posts column.

Thanks again for your terrific blog --

17 July 2008 07:11 Ammie V said...
This post has been removed by the author.
17 July 2008 07:13 Ammie V said...

It works on my blog. I agreed to Luisa. Just drag it on top. =)

Anyway, thank you.

29 July 2008 11:14 ria said...

thanks...it's very easy to understand.

8 August 2008 01:37 রাশেদ said...

Ha ha! Nice trick. :)

4 October 2008 21:26 Garry said...

Really works. Nice hacks!

Thanks a lot Amanda.

5 December 2008 19:08 BabyIbu said...

tq 4 da info!!

18 January 2009 14:54 mein melon said...

hey ther amanda.. i tried this tutorial.. but, i can't find any 'Add Page Elements' link in my Page Elements.. why is that?

a million thanx fo lots of incredible tutorials in here.. u helped me to changed my previous blog: http://melonicmaniac.blogspot.com into something very much different than a simple layout..

1 February 2009 19:42 Lille Skvat said...

Thank you, Amanda!

17 February 2009 19:17 VUC said...

yeeeey great...
thank you very much amanda, this is exactly what i'm looking for

25 March 2009 20:54 Lori E said...

Great advice.
Okay how do I add a comments section to this new "Welcome" sort of post to make it like a guest book?

14 May 2009 00:47 Michael B said...

Thanks, I used this tip on my blog!

28 May 2009 12:59 Waridikenya.com said...

Thanks i had no idea about blogging and have been glued to your blog..its taught me alot...will be sure to post the final product

13 November 2009 11:36 Stephan said...

Thanks

I used your solution (after reading half a dozen other ones), chose "HTML/Javascript" and added a "powered by BLOGGERBUSTER" link to your page.

Cheers from Berlin

18 January 2010 09:39
Anonymous said...

Hi, I have maneged to place the maxwidget on top of the post but it's narrower than the post width. I've tried to find the code to edit but I can't see it in the Html. If anyone knows than please let me know how I can edit the width of this 'below header page element'.

Thanks

20 April 2010 21:55 Bdinamo said...

thank you amanda this was great...!!!

Post a Comment

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me