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!!
46 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.
Thats pretty handy to have i might find some use for it on my website, thx
so helpful
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!
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!
wow thanks this is just what i was looking for i cam across it in google thanks so much A+
Thnx
Its good its working in my blog
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.
Very tricky. I wouldn't have though about doing so. Thank you, Annie!
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
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?
@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.
Hi,
Real nice tutorial for adding sticky message board to the top of your blog.Thanks
Regards,
Vanessa
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/
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
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!
Thanks for the help, it was very useful.
great idea the Sticky Message Board
I'ii give that a try for sure
this is a great tutorial, i was looking for a solution to this and finally the codes are here! Thanks a lot!
Is this code good for Wordpress? I'm having issues finding this "/* Variable definitions"
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.
Thanks for the share it is working in my blog.
I really like the idea of putting a little message board at the top of a blog. Thanks Annie and Hans!
Chris
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
Thanks, this looks like a great little feature to add to my personal blog =].
A sticky message board a great for quick ideas that come to mind!
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...
Wonderful. This is a great idea!
Thanks much for the codes. Seem to be working so far...
awesome..!
this is still working on my blog. thanks annie
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.
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!
I like the concept of a sticky message. Thanks for posting the code. I'm curious how it will look???