Change Blog Post and Sidebar Width of a Blogger Theme

In today's Blogger tutorial I discuss how to change column width of both the sidebar and the blog post area of a Blogger Theme to either increase or decrease the size of the template displayed on the screen. I show you two methods of adjusting the width of the template: firstly through the Blogger Template Designer and secondly by making a small change to the template itself. These modifications are easy to achieve, only take a few minutes and will help you achieve the look you are after on your Blogspot Blog.

Older Default Blogger Themes

By default older Blogger templates eg Simple Blogger Theme were not full width but there was always the facility to increase or decrease the width of the columns of template according to user requirements. In the past it was recommended to keep the width of a Blogger blog under 1000px to ensure that visitors viewing on smaller screens did not have to keep scrolling to see the whole blog. Those days are gone now with responsive templates and the use of small devices like tablets and smartphones so it is fine to increase the entire width of your blog to 100% if you wish to.

Third Party Blogger Themes

If you are using a third party theme you may not be able to use the Blogger theme designer to adjust widths depending on how it was coded. You will still be able to use Method 2 as discussed below to make adjustments to the column width of the entire blog and / or the sidebar.

Newer Responsive Blogger Themes (Contempo, Soho, Emporio)

Newer responsive Blogger templates eg Notable Blogger template are already set at 100% width minus the sidebar so there is generally no need for tweaking the width.

How to Adjust the Column Width of Blogger Blogs

There are two basic ways to adjust the width of a Blogger template / Blogger Theme:

1. Adjusting the width in Theme Designer of Blogger (or if this is not available)


2. Changing the code within the Blogger template to the desired width

Method 1: Steps to Change the Width of a Blogger Template in the Theme Designer

1. Login to Blogger


2. At the Dashboard choose Theme


3. Click on the orange Customize button which will take you to the Blogger Theme Designer


4. On the left-hand menu click Adjust Widths





5. Adjust the width using the slider to increase or decrease the width of the entire blog. Any changes you make can be viewed in the large window on the right-hand side.
   For example: To make your blog full width push the slider all the way across to 1500px.
   


6. You can also change the width of the sidebar. By sliding the bar to the right you can increase the column size of the sidebar dimensions to a maximum width of 500px.


7. Click on the Save button in the bottom right-hand corner of your screen.

Method 2: Steps to Change the Width of a Blogger Template in Blogger Edit HTML

If you are not able to edit the width of your Blogger template in Theme Designer then you will need to adjust the widths manually in the template itself.

1. Login to Blogger


2. At the Dashboard choose Theme


3. Click on the down facing arrow next to the orange Customize button


4. Choose Backup to make copy of your existing template in case you need to reinstae it


5. Now choose Edit HTML


6. Click anywhere inside the template and then CTRL + F (Command + F on a Mac) to bring up the search function


7. Enter the following search term into the search window and press enter:
   
   
   b:template-skin


8. Look for the following code:
   
   

   <b:template-skin>
   <b:variable default='960px' name='content.width' type='length' value='960px'/>
   <b:variable default='0' name='main.column.left.width' type='length'/>
   <b:variable default='310px' name='main.column.right.width' type='length'/>
   
   



9. Change the value of the content width of the template to whatever width you would like eg for an entire blog width of 1200px the code would look as follows:
   
   

   <b:template-skin>
   <b:variable default='960px' name='content.width' type='length' value='1200px'/>
   <b:variable default='0' name='main.column.left.width' type='length'/>
   <b:variable default='310px' name='main.column.right.width' type='length'/>
   
   



10. To change the sidebar width (assuming you have a right sidebar) change the main.column.right.width to a new width by changing its value or adding a value if not already there as in this example. eg For a sidebar of 500px the code would look like this:

    <b:template-skin>
    <b:variable default='960px' name='content.width' type='length' value='960px'/>
    <b:variable default='0' name='main.column.left.width' type='length'/>
    <b:variable default='310px' name='main.column.right.width' type='length' value='500px'/>
    



11. Click on the Save icon in the top right-hand corner to save your changes.


12. From the Dashboard click on View Blog to see your Blogger template with the widths you have input.

In this Blogger tutorial you have learned how to change the column width size of your Blogger template to increase or decrease the width of the entire blog and the sidebar. Changes to the width of the columns is best achieved by using the Blogger Template Designer but if this not available for some reason I have also shown you how to adjust the width manually by making small changes to the HTML of your Blogger template.

Related Articles

Easy Way to Put Banners on a Blogger Blog
Add a Widget or Gadget Above a Blog Post in Blogger
How to Delete a Blogspot Blog from Blogger - Step-by-Step Guide to Remove a Blog
How to Add a Welcome Message to the Blogger Homepage
How to Add a Blog Description to the Blogger Header of a Blogspot Blog

How to Add a Blog Welcome Message to a Blogger Homepage

A blog welcome message is a great way to greet your visitors when they arrive on your Blogger blog. By adding a blog welcome message you will immediately engage your readers and they will get more information about what your blog is about. In this Blogger tutorial I not only show you how to add a welcome message to the homepage of a Blogger blog, but I also discuss what to say and where to place your welcome message on your blog.

Fortunately adding a blog welcome message to your Blogger homepage is easy to do with the text gadget and you can customize the look of the text, links, video and more.

What to Say in a Blogger Blog Welcome Message

A welcome message that greets visitors as they arrive on your blog can be placed on a Blogger blog with the intention of letting readers know more about your blog than they can glean from looking at your blog title and blog description. A welcome message typically says something about the purpose of your blog, may include something about you, what you do, what makes your content different and most importantly how you can help them solve a problem.

Your blog welcome message is an opportunity to engage your visitors so it is important to think about the flavor of the message you want to convey. For instance do you want to promote friendliness or trustworthiness, or both? Perhaps you want to include a message that promotes you as an authority on a subject so for example you might say I have 10 years industry experience in blogging or something like that to evidence your knowledge of the niche topic of your blog.

Take a look at this example of a simple Blog Welcome Message below that sets the tone for the visitor experience. The object is to encourage repeat visits and to let the visitor know you are there to help:

Welcome! Thanks for stopping by. This blog provides information on blogging and resources to customize your blog. I look forward to helping you create a successful blog. Please consider following me so you don't miss out on any new posts.

If you are interested in learning more about crafting a welcome message for your Blogger blog watch out for my upcoming blog post in which I give more examples of welcome messages and what to say to engage visitors.

Where to Position a Welcome Message on the Blogger Homepage Guide

Before we discuss how to add a blog welcome message it is a good idea to consider placement of your welcome message. There are three primary spots to place a welcome message: just below the header, above the post area or at the top of the sidebar.

Below the Header
A well crafted blog welcome message just below the header can be a good way to draw the eye to the hotspot below the header. If you have a banner or an Adsense unit there already you will need to be sure that the welcome message adds visual appeal and does not conflict with existing Adsense units or banners.

In the Sidebar
At the top of sidebar can also be a great place for your Blogger welcome message. If eye catching, the blog welcome message will grab a reader's attention in that spot.  Further a welcome message there is less likely to conflict with other widgets like banners or Adsense units.

Above the Post Area
Another option is to put a blog welcome message often called a sticky message above the posts in the main post section of Blogger. The benefits of this position for a blog welcome message is that it will not detract from any other widgets in place and will always display whenever a visitor lands on your Blogger homepage.

For detailed instructions on how to add a welcome message above blog posts in Blogger check out my companion article: How to Add a Sticky Welcome Message to Blogger

Steps to Add a Welcome Message to the Sidebar of a Blogger Homepage Guide

Follow the steps outlined below to quickly and easily add a welcome message to the sidebar of a Blogspot blog that greets your visitors no matter what page they land on. If you would prefer to place your message above the header or :

Step 1
Login to your Blogger account at Blogger.com

Step 2
From the Blogger Dashboard click on Layout from the menu on the left-hand side

Step 3
Find the Sidebar section. Click on the Add a Gadget link

Step 4
From the pop-up menu scroll down to select the Text gadget.  If you want a sophisticated welcome message that includes video and third-party scripts then choose the html/javascript widget instead from the same menu.

Add a Blog Welcome Message to a Blogger Homepage
sing the Text Gadget

Step 5
Click on the plus+ icon at the right of the Text gadget to create your welcome message.

Step 6
Enter a title for your message in the pop up window that appears. Name the gadget something meaningful like welcome message so you will be able to easily identify it later.

Step 7
Add the text of your Blogger welcome message into the text box. See an example of a welcome message in the image below for ideas. Using the Rich Text Editor icons you can add some simple styling by changing the text color, adding blockquotes, bold and italics. For more sophisticated styling click on the Edit HTML button which allows you to add specific HTML style code around your text. If you are not sure how to add HTML styling to your welcome message check out my other post on adding styling to a Blogger welcome message.

Use the Text Box Gadget to Create a Blog Welcome Message in Blogger

Step 8
Click Save to save your welcome message gadget.

Step 9
Click on Preview (bottom right-hand corner eye icon) to view your welcome message.

Step 10
Once you are happy with the message you can move on to repositioning it the sidebar. Use drag and drop to arrange the welcome message alongside other gadgets in the sidebar.

Step 10
Click Save by clicking on the save button bottom right-hand corner once you are satisfied with the positioning of your Blogger welcome message in the sidebar.


In this Blogger tutorial you have learned how to add a blog welcome message to Blogger. Also discussed were examples of what to say in a welcome message and where to place your message for best effect. Please feel free to comment about adding a blog welcome message if you would like to.

Related Articles

Basic Blogger Tutorials to Customize a Blogger Blog for Beginners
Advanced Blogger Tutorials to Customize a Blogger Blog
How to Add a Sticky Message Above Blogger Posts
How to Schedule Blog Posts in Blogger for a Specific Future Date and Time
How to Add a Copyright Notice to a Blogger Blog
How to Delete a Blogger Blog