Blogging Tips

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.

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:

Now we could simply add some content to this widget which would take on the same style as your blog posts, like this:

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>

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:

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.