How to create multiple columns in posts on Blogger - Insurance Finances

A good writer is the one who represents and writes its posts in a stylish and eye-catching look that makes even a dull topic in the most trending way.

So, we should try to present our post in a unique way and apply different methods so to make our readers more engaging and the one way of modern method is to create multiple columns in your blog posts.

Step 1. Login to your Blogger blog and select Template/Theme and click on Edit HTML.

Step 2. Click anywhere inside the template editor and by pressing Control + F search for ]]>/b:skin> or </style> code and paste the below CSS code just above the ]]>/b:skin> or </style> code.

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

Step 3. Click on Save in order to save your settings.

Now that you have finished adding the CSS code in your template, you will be able to create your new posts in column wise. Just keep in mind that:

Step 4. Select Post/Page and click on New Post/Page.

Step 5. Switch to HTML editor and just copy and paste the number of columns you want to your post from the below-given column styles.

2 Column Style

 <h3>2 Column</h3>  
 <div class='wonderkrish-para'>  
   <div class='two-column'>This is the first paragraph</div>  
   <div class='two-column'>This is the second paragraph</div>  
 </div>  

3 Column Style

You just have to write your post in between the highlighted division on which column you want to make your post appear.

 <h3>3 Column</h3>  
 <div class='wonderkrish-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>  

4 Column Style

 <h3>4 Column</h3>  
 <div class='wonderkrish-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>  

Step 5. Finally, click on Publish and you are done.

Enjoy and do comment below if you find any problem adding columns in your posts and also for any suggestions. 

Related Posts