Sticky Message Board

Hans posted a wonderful tutorial on adding a little sticky message board to the top of your blog. It was extremely easy to follow, and I had it up and running within minutes. I made a few modifications so it would blend with my blog. Here is what I did.

First to the "/* Variable definitions" I added this:
<Variable name="bgMsgBrd" description="Messageboard Background Color" type="color" default="#EFEFF7" value="#EFEFF7">
<Variable name="bordercolor" description="Messageboard Border Color"
type="color" default="#336699" value="#336699">
<Variable name="colMsgBrd" description="Messageboard Text Color"
type="color" default="#555555" value="#555555">
Second to the CSS style sheet I added this with the modification for my fluid template:
/* Messageboard */

.msgbrd h2 {
display: none;
}

.msgbrd .widget-content {
width: 99%;
background-color: $bgMsgBrd;
border: 1px dotted $bordercolor;
color: $colMsgBrd;
font: $bodyfont;
}
Third, to the template I added:
<div id='content-wrapper'>
<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>
Last I opened the Layout Editor and under the header was a new element. I clicked 'Add a Page Element' , and selected 'Text'. All that was left to do was type my message.

Thanks, Hans!!

post signature

46 comments:

  1. Hey Annie,
    I knew you'd be here to the rescue! This is so much fun... I haven't even started yet and I'm giggling like a little girl!

    ReplyDelete
  2. Thanks so much for the info....very useful. Can you post how you did the map of all your visitors from around the globe. I would love to add a feature lik that to my blog.

    ReplyDelete
  3. Hey Annie, I love that category cloud! When beta comes my way, I'll need to do that.

    ReplyDelete
  4. @andrew, I did a little post. Like I said, it has been awhile since I did it, but I remember it was easy. I checked the site, and they are not taking new registrations right now, but I think they will start up again soon. Just keep checking. Then, if you have a problem, let me know.

    @manicou, I love that cloud too! It is what I've wanted since I started with blogger. Finally. And when you click on it, a page of my blog comes up with all the posts related to that word! I know you can't see me, but, I'm SMILING!

    ReplyDelete
  5. Hi Annie, good to see the message-board on your blog now!

    Here is a solution to your 1 comments-problem.

    Keep on the good work!
    Hans

    ReplyDelete
  6. Hi!
    I liked so much your template that I wanted to add fluid 3 column and upper messegeboard to my own template. But now I have problem..
    Left sidebar is falling above right now. What to do?
    http://bonpo.blogspot.com/

    ReplyDelete
  7. @bonpo, I viewed your blog in Firefox and IE...it is displaying properly in both. I find that sometimes (depending on which computer I'm on) when I'm in preview mode the sidebars don't fall properly. I think it is due to the little 'screwdriver' icon after the widgets. But, when signed out of blogger and viewing the blog, it displays with the sidebars side by side.

    ReplyDelete
  8. annie, Instead of defining this new variable why should not just use a Text widget for this in header area. I am using a Text widget for a message board below my header.

    The only problem I was having that text was centered, so I changed the alignment to left in header wrapper.

    Is using class='msgbrd' id='msgbrd' instead of normal header id somehow benificial.

    ReplyDelete
  9. @shrish, actually this makes a widget. What the code does is define the look of the message board.

    ReplyDelete
  10. Annie, finally I did those sticky notes. As you said I added one more div and still gave errors with body font. I just removed.. voila it worked....

    ReplyDelete
  11. @priya, glad that worked! I knew it was too many or not enough div's!

    ReplyDelete
  12. Bookmark this script for longest time and finally used it in my blog today! Thanks it works and looks great :)

    ReplyDelete
  13. This won't work. When I type it in to the HTML thing, on my blog, the code only shows up. Not the message board.

    ReplyDelete
  14. @porschefreak98, I was going to view your source code, but you have so many blogs I didn't know which one. So, all I can tell you is to very carefully start from the beginning and put the code is exactly as in my post...following the steps. That is the code I have for my message board which you can see right under my header.

    ReplyDelete
  15. Thats pretty handy to have i might find some use for it on my website, thx

    ReplyDelete
  16. Estuve intentando realizar esto por mi cuenta pero no he podido. Busque informacion para ver como se hacia y por fin encontre la solucion gracias a ustedes. Realmente es muy facil de hacer y con este comando he podido solucionar mi problema.
    Gracias!

    ReplyDelete
  17. Hi Annie, is the sticky message board the same as a little real-time chat box? I often see those at forums and though I want one for my website, it looks a bit messy. It's nice for people to leave a little note to you but some of those comments can get real nasty!

    ReplyDelete
  18. wow thanks this is just what i was looking for i cam across it in google thanks so much A+

    ReplyDelete
  19. Thnx
    Its good its working in my blog

    ReplyDelete
  20. Thank you Hans for that wonderful code.I got some tutorial in planet source code but not working well.I will be adding your sample in my CSS editor.

    ReplyDelete
  21. Very tricky. I wouldn't have though about doing so. Thank you, Annie!

    ReplyDelete
  22. Thanks for this! Since I am an idiot and cannot seem to just jam out html or php like many others can I depend totally on good hearted people like those here.

    This will be great for my streaming TV site as well and my e-commerce site I'm putting together.

    Thanks again

    ReplyDelete
  23. Hi, just stumbled across this blog... I'm probably being a bit slow here but what is a sticky message board? Can i use it to bring more people to my site?

    ReplyDelete
  24. @rob tyrrell, see the little blue strip under my header talking about my table of contents? That is my sticky message board. I can change it whenever I want to fit the moment. Easily. I suppose it could help people once they get to your site and to get returning visits.

    ReplyDelete
  25. Hi,
    Real nice tutorial for adding sticky message board to the top of your blog.Thanks

    Regards,
    Vanessa

    ReplyDelete
  26. Really nice tutorial, I have some tutorials for blogger in my blog (in spanish) maybe some of your users could make use of them.

    http://geektual.com/etiqueta/blogger/

    ReplyDelete
  27. Hi,
    I just follow this article and i was successful in adding sticky message board to the top of my blog.Thanks for sharing.

    Regards,
    Sana

    ReplyDelete
  28. Thanks a lot for this info. I didn't know the blog but I landed on it looking to add a sticky message board so it fully answered my doubts. Perfect info!

    ReplyDelete
  29. Thanks for the help, it was very useful.

    ReplyDelete
  30. great idea the Sticky Message Board
    I'ii give that a try for sure

    ReplyDelete
  31. this is a great tutorial, i was looking for a solution to this and finally the codes are here! Thanks a lot!

    ReplyDelete
  32. Is this code good for Wordpress? I'm having issues finding this "/* Variable definitions"

    ReplyDelete
  33. I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post. Thanks for sharing.

    ReplyDelete
  34. Thanks for the share it is working in my blog.

    ReplyDelete
  35. I really like the idea of putting a little message board at the top of a blog. Thanks Annie and Hans!
    Chris

    ReplyDelete
  36. annie u post is quite informative ...i don't have much words so tell about ur knowledge .but only a thing want to sare with u that i have my blog of seo tutorialsi m wondering if you can chek it out what else need to be done to promote my blog i m to modify my blog.. ( or should i modified it) thanks in advance..

    i m not expert in seo ( not a beginner as well.) i m on track to learn the thing a got chance to learn thing... thanks for the info



    Anukant
    Max3logic IT Solutions Pvt. Ltd

    ReplyDelete
  37. Thanks, this looks like a great little feature to add to my personal blog =].

    ReplyDelete
  38. A sticky message board a great for quick ideas that come to mind!

    ReplyDelete
  39. There were a lot of times when I wanted to make a sticky message board, but I didn't know to do it, so I improvised with messages in my sidebar. Now I see that it is so easy...

    ReplyDelete
  40. Wonderful. This is a great idea!

    Thanks much for the codes. Seem to be working so far...

    ReplyDelete
  41. awesome..!
    this is still working on my blog. thanks annie

    ReplyDelete
  42. I was wondering what sticky message board is and tried it. This looks great on my page. Maybe I should give it a space on my page.

    ReplyDelete
  43. I'm going to try adding the sticky message board to my blog. Will it work for Wordpress? I'm not very good with html, but I'll give it a whirl and see what happens... Thanks!

    ReplyDelete
  44. I like the concept of a sticky message. Thanks for posting the code. I'm curious how it will look???

    ReplyDelete

Due to,happily, a steadily increasing readership, I'm not able to answer or solve all comments/problems. I do keep track of them and answer what I can as time allows. This is my attempt to balance home and blog.

To add a link in this comment, copy and paste this code in the comment window: <a href="URL">seen on post</a>
Change URL and seen on post. For instance, to have a link to BlogU, the code would look like this: <a href="http://bloggeruniversity.blogspot.com">
BlogU</a>
To use the DOFOLLOW attribute on this blog, please remember to use the NAME/URL option when commenting rather than linking to your profile page for more exposure!