Make a label on the blog is divided into 2 or more columns

For a long time I did not create articles about CSS coding. Now I want to share with you how to make the label is divided into 2 or more columns. You can see an example in the picture below, or see the label attached on my blog (I use 3 columns).

Now let's get started, how to make the label is divided into 2 or more without making a sidebar or a new footbar.

You need to put this code on the label code contained in your blog template code (do not forget to check expand widget templates).

<div style="-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;">
..........
..........
</div>

To put the above code, you must log in to your blogger. If you are logged into your blog account, select Design, and select Edit HTML (do not forget to check expand widget templates).

After that, you should look for the code 'label1', 'label2', or 'label3'. But, to more easily find a label that you want to change to be divided into several columns, you can search according to your label title. Examples of my label title is 'Topics Discussed', as you can see in the picture below.

Note: to search for the title or code label press Ctrl + F.

If you've found the title / label code on your blog template code. Then you have to put the code <div style='-moz-column-count:3;-webkit-column-count:3;column-count:3;'>, under the code <h2> <data:title/> </ h2> </ b: if> or put the code column of the above code <div expr:class='"widget-content "+ + data:display "-label-widget-content"'>.

So the arrangement of code like this or it will look like the picture below.

<h2><data:title/></h2>
</b:if>
<div style='-moz-column-count:3;-webkit-column-count:3;column-count:3;'>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

If you've placed the code, then you must close the code with the code </ div>.

Put the code </ div> below the code <b:include name='quickedit'/></ div>, order not to incorrectly put the </ div> code, you should scroll down slowly and find the code <b: include name = 'QuickEdit' /></ div> and place the code </ div> underneath. If you've placed the code then the result will look like this or it will look like in the picture below.

<b:include name='quickedit'/>
</div></div>

If completed, then press the save button templates, DONE. Good Luck!