Find us on Google+ Craft Blog UK: How to add a message at the top of your blog

How to add a message at the top of your blog

The Feather- Original Lino Print

This is a very simple tutorial, involving a teeny tiny bit of html code to add a message, or call to action at the top of your blog.

My message above is to grab the CBUK badge!  But tomorrow I may change this to signing up to my newsletter, or letting my users know about my lates photo comp.  You could use this message to let people know where your next craft fair will be, or that you have a sale on - it's just a useful place to add a call to action.

Blog Top Message Tutorial


This tutorial really is super simple, I've written before about maximising the space for you to add blog widgets and that's all we need to do to have a space to add a message at the top of your blog! Here is an image depicting all the spaces you can have widgets - it's the old blogger style but the principle is the same.

It is so simple to have all of these areas as options to add widgets, it comes down to an element in your html template called 'showaddelement'.  In some themes only some of these elements are switched on, but it's easy to turn them all on whatever theme you have and that gives you lots of options!

  1. Open up your blogger dashboard and click on the 'template' option.  
  2. NB! It's a VERY good idea to download a copy of your existing template, in the top right corner there is a link called backup / restore.  Follow the instructions to download a copy of your template - it's very simple to then restore back to your original template by uploading this file. 
  3. Click on the link that says 'Edit Html'. It may show a scary warning, but you have a saved copy of your template so you needn't panic, just proceed.
  4. Use ctrl and f to bring up a search box and search for "showaddelement" within you template.  There will be more than one that comes up.  The first one is what controls the addition of a widget above your header and the surrounding code will look very similar to this, definitely including the words id="header"

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='UK Craft Blog (Header)' type='Header'/>
    </b:section>
  5. You need to simply change the words showaddelement='no'  to showaddelement='yes' . It really is that simple!
  6. If you want even more spaces to add widgets and gadgets, go through every occurence of 'showaddelement' and change them all to 'yes'. (makes sense really!)
  7. Now save the template and head back to the 'layout' area of your blogger dashboard.
  8. You will see the new areas for you to add elements.
  9. To add a message like I have above, click on 'add element' in the area above the header and choose  html / java script from the list of available gadgets / widgets.

  10. Paste in the following code -

    <div style="background: #FFFFFF; font-weight: bold; padding: .5em; text-align: center;"> SUPPORT UK CRAFT BLOGGERS  <a href="http://www.ukcraftblog.com/2010/05/there-are-lots-of-ways-you-can-support.html/">ADD A BADGE!</a> </div>
  11. Change the link and the text in capitals to whatever you choose, but leave the rest of the code as it is. Don't bother to add a title to the gadget.
  12. To change the background colour which is currently set to white in the snippet of code above (#FFFFFF), pick a colour code from this website - hex color codes and replace #FFFFFF with your desired colour.
  13. Edit it as often as you like via your dashboard or from the little edit/tool symbol when you are on your page.
There are so many options for adding in widgets if you activate all of the 'showaddelements' to yes, have fun playing, but remember too many gadgets will slow down the opening time on your blog, so be selective! Any questions, please ask - just leave a comment below :)


x Hilary :) .
Sign up for the newsletter!

blog comments powered by Disqus

AddThis Smart Layers