How to Share Article Columns Posts

How to Share Article Columns Posts

How to Share Article Columns Posts - Actually the column in an article that you usually write can be divided into 2 columns or even more. The application of this divided article column is often seen in a newspaper or magazine.

Here I will give a little tips by using the CSS code column-width Property.

First, please apply the code below in the template


.bagidua
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

In the code above, the column-count value I gave 2 which means the article post will be divided into 2 columns. If you want several columns such as 3 columns, then specify the column-count value with number 3.
Save the template.

Then for the application to the post, please copy and wrap your article with the code below.


<div class='bagidua'> YOUR WRITING APPLY HERE </div>


Example of application


<div class='bagidua'>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis. Maecenas iaculisntesque ante, velfaucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>


Then the results will look like this
Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis. Maecenas iaculisntesque ante, velfaucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Full demo with additional 3 columns

Easy enough isn't it, good luck.

Post a Comment

Previous Post Next Post