Amanda Fazani
February 1, 2009
11 Comments

Blogger Tip: How to add a welcome message above your posts

welcomeAn increasing trend in blog design is the “welcome message” which appears on the home page, explaining to new readers what the blog is about, and possibly with links to subscription/about pages which offer more incentive for return visits.

If you are using Blogger to publish your blog, you could add an extra widget above the main posts section in which such a welcome message may be added and edited with ease. Once this section is added to your blog template, no further editing of the HTML code is required to change the message or it’s content: instead you can edit this section through the Page Elements section of your dashboard.

In this article, I’ll explain how to add an extra widget to your Blogger template which will appear above your blog posts and will only be visible on your blog’s home-page. I will also offer some suggestions for how to create an effective and successful welcome message for your blog, along with other possible uses for this simple Blogger hack.

What you will achieve using this tutorial

By default, your Blogger template will only display posts on your home page. While your blog title and the thematic content of your posts may go some way towards explaining what your blog is about, a welcome message adds more impact and encourages new readers to return again.

To illustrate this, compare the following screenshots:

screen-shot03-feb-02-1404
Blogger home page without a welcome message
Blogger Homepage with welcome message
Blogger Homepage with welcome message
Of the two, do you think the second homepage is more welcoming and enticing for a return visit?
Following this tutorial will help you create a similar welcome message to appear above your blog posts on the home page of your blog. Although I have used the Minima template as the basis for this tutorial, the code examples given should also work smoothly for any Blogger template: both the default designs and customized themes supplied by third party providers.

Adding an extra widget section above your posts

To add our welcome message to our Blogger template, we need to add a widgetized area above the main posts section which will only appear on the blog home page.
This is achieved in just a few short steps:
  1. Go to Layout>Edit HTML in your Blogger dashboard. Do not check the “Expand widget templates” box!
  2. Locate the following section of code: 
    <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
  3. Immediately before this section, paste the following few lines of code: 
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <b:section class='main' id='main-top' showaddelement='yes'>
<b:widget id='HTML99' locked='false' title='' type='HTML'/>
</b:section>
</b:if>
  4. Then save your template.
Now when you go to the Page Elements tab of your Blogger dashboard, you will notice a new widgetized section appears above your blog posts widget, that currently contains a blank HTML/JavaScript widget:
page-elements
Now we could simply add some content to this widget which would take on the same style as your blog posts, like this:
just-another-blog-basic-welcome
But since this doesn’t really make the welcome message stand out, we’re going to add some inline style to the content of the widget instead.

Adding stylish content to your welcome message

To ensure you can easily change the style and content of your welcome message through the Page Elements section of your Blogger dashboard, we are going to use “inline” css to make the welcome message stand out.
This is achieved by adding raw HTML code to the content of your widget; simply click on the “Edit” link for your widget, and ensure you use the “Edit HTML” editor rather than “Rich Text”.
Wrap your content in a DIV where styling is explicitly stated, like this:
<div style="your-style-properties-here">
<p>Your content here</p>
</div>

A working example

In the example pictured above, I used a soft yellow background, a little padding and added an image to ensure the welcome message is eye-catching and evocative of the content from my blog:
screen-shot05-feb-02-1459
Here is the HTML code I used to make my welcome message appear in this way:
<div style="background: #efe7c2; padding: 5px 10px 10px;">
<h3>Welcome to my blog!</h3>
<img border="0" style="float: right; margin: 0 0 5px 5px;" src="URL-OF-IMAGE" height="75px" width="75px" />
<p>Here I can explain a little about my blog, and why you may want to read it.</p>
<p>I could encourage you to subscribe by providing a subscription link like this, or highlight one or two of my best posts.</p>
</div>

You could use this example as the basis for your own “Welcome” message by changing the hex color, wording and image location as required. Then save the content of your HTML/JavaScript widget to see these changes appear in your actual blog home page.

Final Thoughts

I hope this tutorial has helped you understand how to add a simple welcome message to your Blogger home page which can assist the recognition of your blog’s thematic content and possibly encourage return visits from new readers.

Please feel free to leave your comments and suggestions below.

GET INSTANT ACCESS TO

My Exact Blogging Strategy!

Want to know how I continually make six-figures a year blogging from the comfort of my home? Then you need this free course!

  •  
  •  
  •  
  •  
  •  

Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.

Related Posts

About The Author

Amanda Fazani

Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

11 Comments

  1. Nicholas | Pixobyte. February 4, 2009

    This seems to be a Very good Idea! Will give a try in my blogger Personal Blog, Thanks for Sharing!

  2. ice_hot February 5, 2009

    i love your tutorial! made my blog more personalized!

  3. hydir February 7, 2009

    Thank you Amanda..

    I've tried it at my test blog and it works perfectly 🙂

  4. Faye February 14, 2009

    Thanks for the tutorial. A welcome message is a good idea. It will make the visitors feel that they know the owner personally and may induce them to come back for the next blogs.

    Faye

  5. Zailda Coirano February 24, 2009

    Simple work – gorgeous result!

    Tks a bunch!

  6. Alphonse Ha February 25, 2009

    Is there anyway to make the welcome text disappear after the first visit?

  7. Ally February 28, 2009

    <div style="background: #efe7c2; padding: 5px 10px 10px;">

    <h3>Welcome to my blog!</h3>

    <img border="0" style="float: right; margin: 0 0 5px 5px;" src="URL-OF-IMAGE" height="75px" width="75px" />

    read it.

    Thanks.

    </div>

  8. Gitte Gorzelak March 2, 2009

    Thank you, I have added it to my blog and it looks nice 😉

  9. jintu November 23, 2010

    thank you for your post…its simple, cool and awesome… i wa s looking for a such a widget for my blog… yours is the one that can be easily understandable and easily modifiable
    My recent post Easiest way to add nautilus scripts in Ubuntu

  10. Colin May 2, 2011

    Wow, I have scrapped so many templates because they were missing this box and could I heck find a way to do it myself. With this example, just one simple copy and paste has solved it! You are amazing, thanks.

  11. Giacomo May 30, 2011

    Can you embed a YouTube video in the welcome widget??
    My recent post Foreclosures for sale- Big supply- low prices!