How to Break Content into Two and Three Column in Blogger?
Your capacity to artistically layout and arrange the content of your blog posts is severely constrained by using web software like Google's Blogger, which makes it simple to create and maintain a company blog. For example, the compose mode in Blogger does not offer a mechanism for you to separate your posts into different columns.
Fortunately, Blogger's HTML editing mode makes it easy to include a table element in your article, allowing you to divide it into numerous rows and columns.
If you are searching for a tutorial to know how to create a split column in Blogger, then this is the perfect tutorial for you. In the Blogger platform, there is no direct code for breaking the content column inside the Blog post. Though there is a line break option, we can only break the paragraph, not the column. Generally, those willing to create and maintain a news blog may like to write content in newspaper style. We see in newspapers that news appears on a column basis so in News Blogger we can write our content in column style.
How to Create/Add Multiple Columns in Blogger Posts?
In this tutorial, I will show you how to break your content or post into two and three columns. And by the help of CSS and HTML, we can do this.Step 3: Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4: Copy and Paste below code above/before </b:skin>
.columnbreak{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.columnbreak2
{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.columnbreak3
{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 4px outset #BCB5B5;
-moz-column-rule: 4px outset #BCB5B5;
column-rule: 4px outset #BCB5B5;
}Customization
- To increase the number of Column please change -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; with -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; (This will make the post into 4 column)
- To alter the column barer alter #BCB5B5 with a different color code.
How to Activate Multiple Columns in the Blog Post?
Don’t think this column will appear in all of your posts. When you wrap your content’s paragraph inside HTML code only then column will be visible.
To make it work in a Blogger Blog post you have to add a selective paragraph first on HTML view from the post editor and after that wrap the paragraph with HTML code. After that switch to Compose view from HTML view copy any code from the below code and paste it there.
<div class='columnbreak'> For 2 Column Posts - ADD YOUR TEXT HERE</div>
<div class='columnbreak2'> For 3 Column Posts - ADD YOUR TEXT HERE</div>
<div class='columnbreak3'> For 3 Column Posts with color barrier - ADD YOUR TEXT HERE.</div>
That’s it now check your Post and see your content then break it into several columns. Just like a newspaper Blog. Thank You.
2 comments