Create 4 Columns Articles In Blogger Homepage

Did you think that it would be better if we can show as many articles as possible? Yes, we can! By maximizing the grid which is provided by Materialize, the responsive CSS framework.

Actually, if you are an another responsive CSS framework's user that different than me, trust me this technique can be applicable also. I am sure because I have ever tried in many framework such as Bootstrap, Skeleton, W3.css, and Materialize.

What we have to do is only modifying the contents of the tag <b:include id='main'>. Our plan is converting from one post per line into four posts per line. Don't worry, we are using a framework right now, then we don't have to think that much about the style and the composition of the layout.

Please take a look at the picture below to understand my idea more :

First Step : The Understanding The Loop

Do you know, how can Blogger display every articles within the same format repeatedly? It is caused by the loop function. We learned about how to set the article format in the Homepage and Article Page. If you missed the topic, kindly check the article that I have written over here.

Then, where is the loop that I am referring? For the short and to the point answer, I can say that it can be found easily by expanding the <b:include id='main'>. Of course, we are talking about modifying the widget id='Blog1'.

Second Step : The Source Code

Similary, when we set the article format in the main page / homepage display, and also when the title of the article is clicked. Inside the loop function, we have to set the both pages differently. The trick is by using the IF ELSE function plus combine it with the grid (row & col) class.

Please take note and keep in tune the code that I provide below :

1. Modify the <div class='blog-posts hfeed'> by inserting the class row. Then your code should be: <div class='row blog-posts hfeed'>.
2. Start to insert the IF ELSE function and followed by the class col. Then your code will be :

Optional

You may take it or leave this step, because it depends on your sense of the design. I decided to remove the container class <div class='container'> for the article which will be displayed on the homepage, but I will keep the container class for the clicked article page.