How to Align and Justify Blogger Posts

Skill Level: Beginner

Rating: Easy

Time: 1 Minute

Before you rush off to download a custom Blogger template consider customizing your existing Blogger template.

This tutorial is part of a series of articles that I will publishing over the coming weeks about customizing your Blogger template using CSS styling. I will be targeting beginner bloggers and newbies to Blogger as well as more seasoned bloggers so if you want to spice up your Blogger template please read along.

How to Justify Blogger Posts (Blogspot Posts) Using CSS
It is easy to change the text alignment of your Blogger posts with the addition of one extra line in the CSS styling section of your Blogger template (Blogspot template). By default the alignment is set to left align so that the text aligns to the left while the right edge is ragged. You can also have right alignment where the text aligns to the right and the left edge is ragged.

Another not so common option is to justify the text so that both left and right edges are straight. Users of MS Word and other word processing programs will be familiar with justify as an alignment choice. Justify stretches out the text so that each line has an equal width similar to what you will find in newspapers and magazines. I have found justifying my Blogger posts to be a useful feature on several of my blogs and thought some of you might to. Below are instructions on how to justify your Blogger posts so that all your blog's articles are justified but first take a look at the difference in presentation of these 2 blog posts just by justifying the alignment of the text. Makes a big difference don't you think?

1. Before you start check how text is currently aligned on your Blogger posts. If it is left aligned you will be able to follow this trick to justify it. If it is already justified no need to go any further.
   
   
2. Login to Blogger if not already logged in
   
   
3. From the Dashboard click the Layout link for your blog and then click on Edit HTML
   
   
4. Back up your template by downloading it in full as a precaution
   
   
5. Use CTRL + F to find the code block beginning with .post in the CSS styling section of your Blogger template. As templates will differ greatly there are no hard and fast rules about what styling will be in this block. Here is a typical code block taken from the default Minima Blogger template
   
   

   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   }

   
   
6. Add the following line to the code block before the end brace (the end curly bracket)
   
   

   text-align:justify;
   
   so that your code now looks like:
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   text-align:justify;
   }

   
   
7. Click on Save Template
   
   
8. Click View Blog to see the alignment of all your posts has now changed to justified

Tips and Troubleshooting

1. If your Blogger template justifies posts and you would like to left align them find the code beginning with .post in your Blogger template and add the following line to the block:
   
   

   text-align:left;
   
   so that your code now looks like:
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   text-align:left;
   }

   
   
2. If you want the posts right aligned you would substitute the word right for left.

In this tutorial you have learned how to justify your Blogger posts to create a straight rather than ragged margin edge. By using this tip to add one line of code to your Blogger template you can enhance the look of your Blogger posts. This tweak only takes a minute but can markedly improve the presentation of your Blogger posts. Please keep reading along for more CSS tips and tweaks in the coming weeks.

Random Posts...!!!

• 

  Add CSS Styling to Blockquotes in a Blogger Template

  29/06/2012 - 0 Comments

  Today I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling…
• 

  How To Automatically Redirect A Blogger Blog To Another URL

  16/10/2013 - 0 Comments

  There are a number of reasons you may want to automatically send visitors to your blog to another URL or from…
• 

  How To Launch From SEO – Tips for Beginners

  07/03/2012 - 0 Comments

  When a user is new to the "Search Engine Optimization" concept (otherwise known as S.E.O.), it can be quite…
• 

  How to Remove Image Border in Default Blogger Templates Simple and Awesome Inc

  29/06/2012 - 0 Comments

  In this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts)…
• 

  Negative SEO realy Works and Can I Protect Myself?

  01/06/2012 - 0 Comments

  Right after Google’s latest shutdown of a number of different link building websites, there’s been a lot of…
• 

  Verified Fb Page tick mark 4 Blogger Author Comments

  13/08/2013 - 0 Comments

  Do you noticed a tick mark in some Facebook Pages like Actors, Political Leaders. Verified mark is only…
• 

  Snapseed Best Photo Editing Apps For Andriod Ipad

  20/10/2013 - 2 Comments

  Snapseed: The Best free Photo Editing App is now on AndroidSome months ago Google bought in the…
• 

  How To Send Free SMS Worldwide With Gmail

  24/10/2013 - 0 Comments

  SEND FREE SMS directly from your Gmail, Google Mail chat. How to send free sms Gmail has a new feature…

Posted in: Align,blogger,How to justify your Blogger posts,Justify,Posts