57 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:

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

57 comments:

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

    ReplyDelete
    Replies
    1. Very nice tutorial master, thanks for sharing

      Delete
    2. Great blog! I really love how it is easy on my eyes and the information are well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your rss feed which really should do the trick! Have a nice day! Jadwal Piala Dunia

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

    nice tips
    thank you

    ReplyDelete
  3. Thank you! This worked like a charm!

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

    ReplyDelete
  5. 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

    ReplyDelete
  6. 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 --

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

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

    Anyway, thank you.

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

    ReplyDelete
  10. Really works. Nice hacks!

    Thanks a lot Amanda.

    ReplyDelete
  11. 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..

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

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

    ReplyDelete
  14. Thanks, I used this tip on my blog!

    ReplyDelete
  15. 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

    ReplyDelete
  16. 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

    ReplyDelete
  17. 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

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

    ReplyDelete
  19. It looks Blogger already fixed this hack because I acted exact what i said and nothing happen

    ReplyDelete
  20. I am looking for this function long ago, but didn't find it. Too bad I am now using Wordpress.

    ReplyDelete
  21. That works perfectly! Thanks.

    ReplyDelete
  22. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  23. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  24. Hey, just looking around some blogs, seems a pretty nice platform you are using. I'm currently using Wordpress for a few of my sites but looking to change one of them over to a platform similar to yours as a trial run. Anything in particular you would recommend about it? Sbobet Agen Sbobet Agen Bola Ibcbet

    ReplyDelete
  25. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  26. nice can u tell me how to add graphics in blog??

    ReplyDelete
  27. From what I can tell, the way to customize the appearance is to add the class prefix ".mobile " to additional style statements in order to customize the appearance in mobile browsers. Not had time to try it much yet, but will do my best over the holidays so I can write up a post.

    sex video
    asian sex tube
    free teen
    latin sex porn
    secret porn
    cute porn
    sexy teen
    cd porn
    hot porn tube
    sex video
    fac sex
    sex movies
    xxx videos
    teen sex
    porn movies
    porn videos
    search porn tube
    redtube
    red tube
    xnxx
    porno
    lesben porno

    ReplyDelete
  28. It's good that they have thought about that.

    ReplyDelete
  29. Thanks for the information provided. website search is really important on one site.

    ReplyDelete
  30. You have posted just a very knowledgeable and informative post.I reallly liked it very much.
    chat
    sohbet odaları
    mynet sohbet
    chat sohbet

    ReplyDelete
  31. Thanks to share with us the information. I wish you good luck!
    web development dubai
    dubai web design

    ReplyDelete
  32. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  33. Thanks for sharing with us.The post is written in very a good manner and it entails many useful information for me.

    ReplyDelete
  34. This blog is very informative the stuff you provide I really enjoyed reading.
    Wifi hack 2014

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

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 | Privacy Policy