Saturday, October 3, 2009

How to Align and Justify Blogger Posts

This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt with how to add or remove image borders in Blogger today I show you how to align and justify Blogger posts.
Skill Level: Beginner Rating: Easy Time: 1 Minute

Many of the questions that my readers ask me are about how to customize various features of their Blogger template (Blogspot template). Over the coming weeks I will be focusing on some simple CSS styling tricks and tips to help you get more out of your Blogger template. Much can be achieved by learning a little about CSS. So 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?

Blogger post text is left aligned
Blogger post text is justified

  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.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders



Subscribe to Blog Know How by Email

21 comments:

BLUESPACE said...

can u tell me how to create subcategory under post's title???
it will look like this.

.title(9)
----title(2)
----title(1)
thnxx in advance

Rafay Baloch said...

Nice post

http://rafayhackingarticles.blogspot.com

Team Creatives said...

This is definitely one of the best things about Blogger. By simply modifying the CSS code, you can make any theme that you want, without having to download on. And the good thing is that Blogger makes editing even much easier, all you need is to learn basic CSS coding, which is quite easy.

The Wizz said...

Thanks Rafay!

The Wizz said...

Team Creatives you have it in one. Learning a bit of CSS helps you make your blog your own and it opens up lots of opportunities. I will be posting more CSS articles soon.

The Wizz said...

BlueSpace I am wondering what you are hoping to achieve with this idea as that will determine the best way for me to help. If I understand you correctly you want to create a menu with submenus under each post. Is that right? What is the purpose of this please? Would you a menu with submenus under the header work for you?

Henna Orissa said...

very useful blog,learning a lot from u ,,,thank u

The Wizz said...

Thanks Henna. Hope you will visit often

The Blind Assassin said...

thank you so much....

The Wizz said...

The Blind Assassin thanks for stopping by.

rosy said...

wow! thanks for another great blog post!
Customized application development

The Wizz said...

Rosy pleased to hear that this article was useful to you. I love getting feedback about what I write so that I get a feel for the kind of articles readers are looking for.

Berbehari said...

Thank you very much.

Shane G. said...

thanks! worked good.

Cowabunga said...

thanks for the tip man, finally got my stuff aligned :D
habuji. blogspot.com

Roxx's Share said...

Cool

Gleason Baylon said...

Thanx!!

Admin said...

WOW!! Thanks this actually worked!

Raghav said...

Thanks for the tip... :) :)

Jyo said...

Awesome tutorial; it's actually quite simple, but does wonders.

subir said...

wow, i m going to make a blog. your content will be better to build my site pretty.
http://www.downloadlink4u.blogspot.com

Post a Comment