How to Create Columns in Blogger Post or Pages

WordPress provides a simple and easy way to embed column in your blog or pages but on the other hand if we talk about blogger . It can't provide the embedding columns which we can say the limitation of blogger.

Many of us want to create columns for some blogs like comparison of two or three products, show posts or images in columns of pages, etc....

So we are here to solve this problem with these simple THREE steps :

NOTE : You can adjust the width of your column according to your theme and structure . These codes perfect work if your post or page have sidebar. 

If your post not contain sidebar then you adjust it accordingly

FOR 3 COLUMNS

STEP 1 : Firstly , Open the blog in which you want to create columns and simply edit as html .


STEP 2 : Now paste the codes given below to where you want to create column in your post or page and publish it :


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}


/* Create three equal columns that floats next to each other */

.column {

  float: left;

  width: 20%;

  padding: 10px;

  height: 300px; /* Should be removed. Only for demonstration */

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

</style>

</head>

<body>

<h2>Three Equal Columns</h2>

<div class="row">

  <div class="column" style="background-color:#aaa;">

    <h2>Column 1</h2>

    <p>Some text..</p>

  </div>

  <div class="column" style="background-color:#bbb;">

    <h2>Column 2</h2>

    <p>Some text..</p>

  </div>

  <div class="column" style="background-color:#ccc;">

    <h2>Column 3</h2>

    <p>Some text..</p>

  </div>

</div>

</body>

</html>

STEP 3 : Congratulations ! 3 Columns are created in your blog , Now you can edit these columns according to you.

FOR 2 COLUMNS

STEP 1 : Firstly , Open the blog in which you want to create coluns and simply edit as html .

STEP 2 : Now paste the codes given below to where you want to create column in your post or page and publish it :

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}

/* Create Two equal columns that floats next to each other */

.column {

  float: left;

  width: 30%;

  padding: 10px;

  height: 300px; /* Should be removed. Only for demonstration */

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

</style>

</head>

<body>

<h2>Two Equal Columns</h2>

<div class="row">

  <div class="column" style="background-color:#aaa;">

    <h2>Column 1</h2>

    <p>Some text..</p>

  </div>

  <div class="column" style="background-color:#bbb;">

    <h2>Column 2</h2>

    <p>Some text..</p>

  </div>

  </div>

</body>

</html>

STEP 3 : Congratulations ! 2 Columns are created in your blog , Now you can edit these columns according to you.

FOR 4 COLUMNS

STEP 1 : Firstly , Open the blog in which you want to create coluns and simply edit as html .

STEP 2 : Now paste the codes given below to where you want to create column in your post or page and publish it :

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}


/* Create three equal columns that floats next to each other */

.column {

  float: left;

  width: 15%;

  padding: 10px;

  height: 300px; /* Should be removed. Only for demonstration */

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

</style>

</head>

<body>

<h2>Three Equal Columns</h2>

<div class="row">

  <div class="column" style="background-color:#aaa;">

    <h2>Column 1</h2>

    <p>Some text..</p>

  </div>

  <div class="column" style="background-color:#bbb;">

    <h2>Column 2</h2>

    <p>Some text..</p>

  </div>

  <div class="column" style="background-color:#ccc;">

    <h2>Column 3</h2>

    <p>Some text..</p>

  </div>

<div class="column" style="background-color:#ccc;">

    <h2>Column 4</h2>

    <p>Some text..</p>

  </div>

</div>

</body>

</html>

STEP 3 : Congratulations ! 4 Columns are created in your blog , Now you can edit these columns according to you.

0 Comments