How to add sections in a grid style on the home page in Blogger

How to show the status of sections and categories in the form of a grid on the home page of Blogger blogs

If you are looking for search engine optimization (SEO) and attract more traffic to your website, this article will provide you with the basics of SEO.

If you’ve heard of SEO, but have no idea what it actually means or how it works, this guide will teach you all about it.

From understanding why people use search engines and finding information, as well as knowing the importance of meta tags, keyword research, and on-page and off-page SEO factors.

In general, we get limited customization options in Blogger as we don’t have any support for plugins like WordPress. That’s why we have to rely on using custom codes for any changes we want to make.

For this reason, today I will share with you the code that will help you display sections on the main page of the Blogger website.

We created this entire code using only HTML and CSS codes, and it is completely responsive on devices of all types.

If you are new to the Blogger platform and want to customize some parts of Blogger from scratch, you can watch the tutorial videos after the explanation as well.

So, let’s see how to create a grid layout and add it to the landing page in Blogger.

Steps to add category grid in Blogger

Follow the steps below.

#1: Go to Blogger website and open the layout section.

#2: Now click on the Add a gadget button where you want to show this category grid

#3: Now choose the HTML/JavaScript widget and paste the below code into it.

Explore our Blog: Techyleaf

#4: Now edit the HTML code and change the svg icons, title, text and add your link in it.

#5: Now copy the CSS code below and paste it directly below the HTML code.

#6: Now save the code and publish the widget.

Now the category grid has been successfully added to your Blogger site. It is fully responsive and works perfectly in all types of devices. You can also modify this further according to your website.

Watch the video below to learn how to do it in practice.

مصدر الخبر

Leave a Reply

Your email address will not be published. Required fields are marked *