An 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:
Adding an extra widget section above your posts
- Go to Layout>Edit HTML in your Blogger dashboard. Do not check the “Expand widget templates” box!
- 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>
- 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>
- Then save your template.
Adding stylish content to your welcome message
<div style="your-style-properties-here"> <p>Your content here</p> </div>
A working example
<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>
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.