Writing is a brilliant thing, but writing with style is even brilliant! But one thing that many blog authors want to have is the multiple column paragraphs, that's paragraphs side-by-side.
Above is an example of three column paragraph. In this tutorial I am going to guide you how to work with multiple column or newspaper style paragraphs in Blogger editor.
Why not use MS Word to copy and paste?
One simple idea is to format the text in MS Word or some rich text editing software and then copy and paste the code in the post editor, but I would not recommend it, rich text editing software mostly aren't made for the web, and the code/markup they generate is not compatible with HTML, so it's not completely a good idea.
Basic Prerequisite
Mostly the first part is one-time setup, once you do it you can easily add these style of paragraphs to any new or existing blog posts.
This would require a bit knowledge of basic HTML to be able to tell what are HTML markup, and most of you might already be familiar with it if you have worked in the "HTML" mode in Blogger post editor.
Even if not I will tell you the basics things you need to know, and that would take no longer than 5 minutes.
Let's get started
There are two parts in this, first is the one-time setup of the CSS in your Blogger Template (See
how to apply CSS to your Blogger Blog) and the last one is to create the HTML markup for the columns of paragraphs, and set the required configurations like how much space you want a column to take, like 1/4, 2/4 etc. and that also includes adding the text you want in each column.
1. The CSS Code
First thing as we discussed is the CSS code that handles all the styling this particular HTML markup would need in order for the paragraphs to be displayed in multiple columns.
Copy the following CSS code:
/*
# Multiple Paragraphs style by Deepak Kamat
# depy45631@gmail.com (author)
# Free & Open License to Use in commercial and or personal projects/works.
*/
.multiple-para {
margin: 15px 0;
}
.multiple-para *,
.multiple-para *:after,
.multiple-para *:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.multiple-para:after,
.multiple-para:before {
content: "";
display: block;
clear: both;
}
.multiple-para .para-50 {
display: block;
float: left;
width: 50%;
padding: 0 10px;
}
.multiple-para .para-33 {
display: block;
float: left;
width: 33%;
padding: 0 10px;
}
.multiple-para .para-25 {
display: block;
float: left;
width: 25%;
padding: 0 10px;
}
Copied? Now refer to this tutorial about
adding CSS styles to your blog and follow the instructions to apply the code in your blog correctly.
Note: Do not change and or delete anything from the code provided if you don't have idea of what you are doing.
The HTML Base
The Base code is pretty simple, nothing very fancy, just a few regular
div tags are needed for this. Following the simplest example of code for this.
<div class='multiple-para'>
<div class='para-25'>This is the first paragraph</div>
<div class='para-25'>This is the second paragraph</div>
<div class='para-25'>This is the third paragraph</div>
<div class='para-25'>This is the fourth paragraph</div>
</div>
I haven't added any large piece of text to make it look clear, just a small line of text "This is the
nth paragraph" for each.
About the Configuration
How this works? The thing that makes this HTML work visually is the CSS we added. To configure this we have to change the class names i.e
class='para-25' to the other possible names
para-33 and para-50The idea is simple, in the above example code, each paragraph i.e <div> tag takes 25% percent of the space available and thus 4 paragraphs with 25% width can be fitted in. If we need three paragraphs we can change
para-25 to
para-33 and the three will fit in perfectly.
We have to keep in mind that the sum of width of all the paragraphs in the container (<div class='multiple-para'>) doesn't exceed 100, else it will break down and cause problems.
Here's the list of configurations you can make:
- 2 Columns - para-50 | para-50
- 3 Columns - para-33 | para-33 | para-33 OR para-50 | para-25 | para-25
- 4 Columns - para-25 | para-25 | para-25 | para-25
Not sure how to use any of this information? Here's a demo, say I want 3 columns of the same width then I will do this with the HTML markup provided above:
<div class='multiple-para'>
<div class='para-33'>This is the first paragraph</div>
<div class='para-33'>This is the second paragraph</div>
<div class='para-33'>This is the third paragraph</div>
</div>
And a live demo of it (with different text of course):
Lorem ipsum dolor sit amet, adipiscing elit. Ut non ex venenatis, egestas est vitae, lacinia libero. Sed pretium aliquet ultricies.
Cras pretium venenatis sollicitudin. Nulla sit amet condimentum erat. Aliquam mattis elementum mauris vel suscipit. In lacinia nec felis dictum vehicula.
Integer blandit, ex eu tristique eleifend, urna eros tempor leo, nec tincidunt risus purus sed massa. Pellentesque cursus eros.
Using the HTML
The section above must be read and understood well before you continue. In the previous section I explained how the paragraphs can be configured by changing the class names, the names that inside
class='' in the HTML tags.
1. I recommend you to use a plain text editor like Notepad copy and edit the HTML code, it will be cleaner. Copy the HTML code into your text editor and replace the text inside the HTML tags, for e.g the red highlighted part is what you have to change:
<div class='para-33'>This is the first paragraph</div>2. Once you are done editing the HTML markup, go the the Blogger post editor. And switch to HTML mode, the button is on the top left corner below the post title line "Compose | HTML", click on "HTML" and paste the HTML markup in the place where you want the multiple column paragraph to appear.
If you are using a Blogger template which is responsive, then on smaller sized devices the text will be squeezed to fit, we will need a CSS with media queries rule to control that. Though I haven't still included it right now, but if more people request it in the comments I might consider updating it.
