How to Add Paragraphs Columns on Your Blogger
Hello!
Dear friends my name is ARYA KHAN today I am going to show you! How to work with multiple column or newspaper style paragraphs in Blogger editor.
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.
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.
Note:
Copy this CSS code and than go to your Blogger Templates/Theme than click to Customize Button than scroll down to get show on CSS button. click on the CSS code box than paste the CSS code here.
CSS Code:
/*
# Multiple Paragraphs style by Arya Khan
# aryaetech99@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;
}
Note:
This HTML code is place on your Blogger page.
HTML Code:
<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>
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.
