Menu

How to Add Multiple Column in a Blogger Post

How to Add Multiple Column in a Blogger Post

A brilliant writer is one who writes the excellent posts with a stylish look to make them more eye-catching to both search engines and readers. As you know, every writer tries to publish the blog posts by putting the energy into thinking to compose a spectacular article that grabs the reader's attention. However, sometimes it is not enough to include the actionable words without having a pro look. We should give our posts new and unique design by applying the different methods, and one of the modern ways is to break the text into multiple columns. You can not only add the columns to a blogger template but in posts as well.

Check out:
Graphic Design Course Video Lectures in Urdu
Freelancing Course Video Lectures in Urdu

How to add multiple column in a blogger post
Add Multiple Column in a Blogger Post

We often publish textual contents by using the simple and one column method. However, have you ever wondered how to write your articles in multiple columns? You can compose your blog posts in various columns like two columns, three columns and even in four columns just with a piece of CSS code. It will not only decorate your article but will also make it easy to understand the topics in a different style.

Read Also:
How to Create Separate AMP Pages On Blogger [AMP Plugin]
How to Safely Remove The Footer Credit Links in Blogger



Why Use Multiple Column Paragraph to a Blog Post?


In my honest opinion, the multiple columns are the best way to describe the things more clearly. For example, you are going to distinguish the two topics A and B. You can directly apply the two column style to make it effortless and understandable. This trick works in both WordPress and BlogSpot as well.

Steps to Add Multiple Column to a Blog Post:


1:-Login to your BlogSpot Dashboard > Theme > Edit HTML
2:-Click anywhere inside the theme editor
3:-Press Ctrl + F to open the theme search box
4:-Type ]]>/b:skin> or </style> in the search box and press Enter key
5:-Add the following CSS code right above the ]]>/b:skin> or </style>

.two-column, .three-column, .four-column{text-align:justify!important;} .digitalspot-para .two-column, .digitalspot-para .three-column, .digitalspot-para .four-column{ display: block; padding: 0 10px; float: left;!important;} .digitalspot-para { margin: 15px 0; } .digitalspot-para *, .digitalspot-para *:after, .digitalspot-para *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .digitalspot-para:after, .digitalspot-para:before { content: ""; display: block; clear: both; } .digitalspot-para .two-column { width: 50%; } .digitalspot-para .three-column { width: 33%; } .digitalspot-para .four-column { display: block; width: 25%; }


Pay Attention:
DigiSkills All Batch Solved Exercises
DigiSkills All Batch Solved Quizez


6:-Click Save Theme and you are all set
7:-Now go to your post editor and click New post/page
8:-Switch to HTML mode and use one the following text column style

<h3>2 Column</h3>
<div class='digitalspot-para'>
<div class='two-column'>This is the first paragraph</div>
<div class='two-column'>This is the second paragraph</div>
</div>
<h3>3 Column</h3>
<div class='digitalspot-para'>
<div class='three-column'>This is the first paragraph</div>
<div class='three-column'>This is the second paragraph</div>
<div class='three-column'>This is the third paragraph</div>
</div>
<h3>4 Column</h3>
<div class='digitalspot-para'>
<div class='four-column'>This is the first paragraph</div>
<div class='four-column'>This is the second paragraph</div>
<div class='four-column'>This is the third paragraph</div>
<div class='four-column'>This is the fourth paragraph</div>
</div>


9:-Fill the highlighted areas with your text
10:-Finally, click Publish and you are on the go

Recommended:
Download PPSC Lecturer/Subject Specialist Latest Books

Post your valuable comments and let us know your thoughts about this tutorial.

Comments

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.

  1. Informative post for presenting your blog in a better way.

    ReplyDelete
  2. I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post. Best IPTV USA

    ReplyDelete

Post a Comment

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.

Ads middle content1

Ads middle content2