June 27, 2007

Blogger hack: Add a sticky post/Adsense/search box in the main column

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:



View blog reactions


Related Posts by Categories



Post a Comment 11 Comments:

28 June 2007 19:05 Nimi said...

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

29 June 2007 12:16 Amanda said...

You're welcome!

02 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.

Post a Comment