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">Second to the CSS style sheet I added this with the modification for my fluid template:
<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">
/* Messageboard */Third, to the template I added:
.msgbrd h2 {
display: none;
}
.msgbrd .widget-content {
width: 99%;
background-color: $bgMsgBrd;
border: 1px dotted $bordercolor;
color: $colMsgBrd;
font: $bodyfont;
}
<div id='content-wrapper'>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.
<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'/>
</div>
Thanks, Hans!!


























15 Comments:
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!
Oh, Beks, this is a hoot!
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.
Hey Annie, I love that category cloud! When beta comes my way, I'll need to do that.
@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!
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
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/
@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.
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.
@shrish, actually this makes a widget. What the code does is define the look of the message board.
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....
@priya, glad that worked! I knew it was too many or not enough div's!
Bookmark this script for longest time and finally used it in my blog today! Thanks it works and looks great :)
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.
@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.