How to Add a Grid style category section in Homepage of Blogger?

ByAbhishek padhi Updated on
How to Add a Grid Style category section in Blogger

 In this article, I will show you how you can add a beautiful grid-style category section to the Blogger website. 

Generally, we get limited customization options in Blogger as we don’t have any plugin support in it. That’s why we have to rely on custom coding for everything. 

So, that’s why I will share the code which will help you display a category section on the homepage of the Blogger website.  This is completely made up using HTML & CSS codes only and it is fully responsive in all types of devices. 

If you are new to the Blogger platform and want to Customize the Blogger theme from scratch then you can watch our video tutorials here. 

So, let’s see how to Create this Grid layout and add it to Blogger. 

Steps to Add Category Grid in Blogger

So, to Add the category grid, follow the below steps. 

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

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

Add a custom HTML section in Blogger-Layout

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

<div class='K2-grid coll-3 icon-p-2'>
<h2> Explore our Blog: Techyleaf </h2>
        
<ul>
<li>
    <a href='#' title='Blogs'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M2,29a1,1,0,0,1-1-1.11l.77-7a1,1,0,0,1,.29-.59L18.42,3.94a3.2,3.2,0,0,1,4.53,0l3.11,3.11a3.2,3.2,0,0,1,0,4.53L9.71,27.93a1,1,0,0,1-.59.29l-7,.77Zm7-1.78H9ZM3.73,21.45l-.6,5.42,5.42-.6,16.1-16.1a1.2,1.2,0,0,0,0-1.7L21.53,5.35a1.2,1.2,0,0,0-1.7,0Z'/><path d='M23,14.21a1,1,0,0,1-.71-.29L16.08,7.69A1,1,0,0,1,17.5,6.27l6.23,6.23a1,1,0,0,1,0,1.42A1,1,0,0,1,23,14.21Z'/><rect x='7.39' y='16.1' width='11.01' height='2' transform='translate(-8.31 14.13) rotate(-45)'/><path d='M30,29H14a1,1,0,0,1,0-2H30a1,1,0,0,1,0,2Z'/></path></rect></path></path></g></svg>
    <span>Blog</span></a>
</li>

<li>
    <a href='#' title='Blogger'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/><path d='M22,15H20.44A3.91,3.91,0,0,0,21,13a4,4,0,0,0-4-4H13a4,4,0,0,0-4,4v6a4,4,0,0,0,4,4h6a4,4,0,0,0,4-4V16A1,1,0,0,0,22,15ZM11,13a2,2,0,0,1,2-2h4a2,2,0,0,1,0,4H11Zm10,6a2,2,0,0,1-2,2H13a2,2,0,0,1-2-2V17H21Z'/></path></path></g></svg>
    <span>Blogger</span></a>
</li>

<li>
    <a href='#' title='Seo'><svg fill='currentColor' viewbox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>
    <path d='M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z' fill-rule='evenodd'></path>
    </svg><span>SEO</span></a>
</li>
        
<li>
    <a href='#' title='News'><svg viewbox='0 0 24 24'>
    <path d='M20 5L20 19L4 19L4 5H20M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M18 15H6V17H18V15M10 7H6V13H10V7M12 9H18V7H12V9M18 11H12V13H18V11Z' fill-rule='evenodd'></path>
    </svg><span>News</span></a>
</li>

<li>
    <a href='#' title='Subscribe'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z'/><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z'/></path></path></g></svg>
    <span>Subscribe</span></a>
</li>


<li>
    <a href='#' title='Telegram'><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><g><path d='M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z'/></path></g></svg>
    <span>Telegram</span></a>
</li>
</ul>
</div>

#4: Now edit the HTML code and change the SVG icons, Title, and text and add your own link to it.

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

<style>

    .K2-grid {
      padding: 5px;
      text-align: center;
  }
  
  .K2-grid ul {
      clear: both;
      margin: 15px 0 20px;
      padding:0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  
  .coll-3 ul li {
      width: 30%;
  }
  
  .K2-grid li {
      font-size: 0.9em;
      font-weight: 500;
      line-height: 1.3em;
      text-align: center;
      background: #ffffff;
      border-radius: 5px;
      margin: 5px 0;
      box-sizing: border-box;
      box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
      padding: 10px 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .K2-grid li a {
      display: block;
      text-decoration: none;
      color: #333;
  }
  
  .K2-grid li svg {
      margin: 3px 0;
      width: 35px;
      height: 35px;
      fill: #26ae61;
      display: inline-block;
  }
  
  .K2-grid li span {
      display: block;
      padding: 0 3px;
  }
  </style>

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

Category grid in Blogger

Now the category grid is successfully added to your blogger website. This is fully responsive and works perfectly on all types of devices. You can also adjust this further according to your website. 

Watch the below video to learn how to do it practically. 

YouTube video

If you have any issues during this process, you can ask me in the comment section. 

Here, Note that you can further customize this grid section by changing the CSS code as shown in the above video. 

You can also join our Telegram group to discuss more about these widgets. 

Best SVG resources for Bloggers

Now the main question is where can I find SVG icons for my website. 

We have created a Dedicated SVG Resources Page where you will find a lot of Commonly used SVG icons along with Popular SVG sites. 

Here, note that some SVG codes have predefined styles in them, so they may look different on the actual website and you have to edit the SVG code according to your website. 

Now you know how to add a grid-style category section to a Blogger website. 

If you want to see more such tutorials, consider subscribing to our YouTube channel where I post Blogging and SEO tutorials regularly. 

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I’m here to help bloggers like you to create an outstanding blog and earn money from it.

Similar Posts

How to Split Blogger Posts into Multiple Pages (Post Pagination)

How to Split Blogger Posts into Multiple Pages (Post Pagination)

ByAbhishek padhi

 Do you want to split your Blogger Blog posts into multiple pages?  In this post, I will show you how you can split your blog posts into multiple pages easily. Here, in this tutorial, we will use the JQuery Method to split blog posts in Blogger.  Benefits of Post Pagination in Blogger Adding post pagination…

How to integrate MailChimp signup form with Blogger website?

How to integrate MailChimp signup form with Blogger website?

ByAbhishek padhi

Want to integrate the Mailchimp Email signup form with the Blogger website? Then follow the simple step-by-step guide.  Email marketing is a good way to drive consistent traffic to your blog and on the Blogger website, most of the users use Feedburner for that. But Feedburner is an outdated tool that does not provide that…

How to Add FAQ schema in Blogger : Complete Guide. [2024 Updated]

How to Add FAQ schema in Blogger : Complete Guide. [2024 Updated]

ByAbhishek padhi

Want to add FAQ schema on your Blogger website, but don’t know how to add this then this guide will help you. It is very easy to add FAQs to a WordPress website but in blogger, there is no plugin support. So, read this complete guide to add FAQ schema to your blogger website easily….

How to Add a Testimonial Section in Blogger?

How to Add a Testimonial Section in Blogger?

ByAbhishek padhi

Do you want to Add a Testimonial Section to the Blogger website, Well you can do that by following this Video.  Adding a testimonial section to your Blogger blog can be a great way to showcase positive feedback from your readers or customers. Before adding a testimonial section, ensure you have collected testimonials from your…

Leave a Reply

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

6 Comments