Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript

The way a website's content is presented determines the difference between popularity and obscurity. Anything that looks cluttered or hard to read is never going to be anyone's favorite. Because of this, content should be presented in an organized, easy-to-understand and simple manner. Nothing works better in this case than a structured network.

Posts listed in grid mode provide a better visual experience for bloggers or website owners and visitors. This is especially true when there are images on the web that match a person's visual preferences. What makes Grid stand out is its sleek and fluid design, filled with a complex yet simple structure. This makes it easier to navigate through a blog post or product page. The strategy also allows the website owner to present messages in a smart and informative manner without going into details. Suffice it to say, the look of the grid requires creativity to seamlessly blend with functionality.

How you change views depends on a number of blog code changes. Some are very easy to implement, while others can be a bit more complicated. Don't worry, it will give you a clue. There is also a wide range of networking styles, each tailored to the needs of a specific audience. Are you ready to go online now?

Main characteristics

What features can you expect from a blogger network style post?

• When you switch to grid view, all posts will follow the grid pattern.
• Customize icons, messages don't update. However, the length can be adjusted accordingly.
• The following autoplay applies to all messages.
• Thumbnails are automatically added based on the first image in each post.
• The code is safe and usable at all levels. 99% of bloggers use the same code to enable grid style posts in Blogger.

What are the benefits of grid design?

• Faster message loading times. Clips only load on certain pages or thumbnails and comments, so it's faster to navigate to the blog log. User experience is greatly improved when loading times are reduced.
• Professional blog. Without clutter and readability issues, a website can look really clean and professional. Combined with the right colors and images, it can make a visual impact.
• Improve the ranking of the site. Since visitors have to click through to see the rest of the post, your site's page views will increase significantly. This allows you to make better use of your SEO strategy.

​​​​​​While some CSS changes are required to implement the grid style view and make it compatible with the blog template, it will be worth it once the job is up and running.

Important:
First, make sure you've saved your blogger template! If you have problems with the changes, you can restore the form from a backup. To do this, go to "Template" in the menu on the left > click the "Backup/Restore" button in the upper right corner and click the "Download Full Template" button - select the file you want to save to your computer and then click the " Save."

Now you can safely proceed to modify the Blogger template. If you run into problems, revert to a saved template.

How to Create Builder and Grid Style Posts in Blogger

Step 1 Log in to your blogger dashboard and click on the blog you want to apply the grid style to.

Step two. Go to the "Template" section on the left side of the screen and click the "Edit HTML" button.

Step 3 Click anywhere in the code box and press CTRL + F to open the search box, then type the following tag in the box (press Enter to search)

Step 4. Now copy and paste the following script in front of the file Account:

Step 5 Find the following piece of code using CTRL + F or Command + F.

Step 6 After pressing Enter on your keyboard, you can find the three occurrences of the above code and simply replace the second and third codes below.

Step 7 Now select one of the following templates and copy and paste the provided code into the file Account:

Simple grid design

Grid layout with article summary and thumbnails

Test

Grid layout with text clipping on hover

Test

Plan (Pinterest as a raster)

Test

Please note that if you have a custom builder layout template, older posts will also display vertically (top to bottom) instead of left to right.

Step 8 Click Preview and if everything is OK click Save Form.

This!

Implementing a grid view has its pros and cons, but the pros outweigh the cons. When a website is designed in a grid style, an attractive and professional look is enough to improve its online reputation. Increasing page views is just the beginning. With the right images and content, the blog will also have SEO. And most importantly, implementing change is not as difficult as some may think. With step-by-step instructions, you'll quickly add a variable-width selector.