How to add a Grid Style Category section in Blogger website?

In this article I will show How you can add a Grid style category section on your Blogger website with svg icons.

Hello Bloggers. How are you all. Today I am going to share an amazing script for your Blogger website which will help you to make your website looks cool. In this article I will show you how you  can add Grid style category section in your Blogger Homepage. 

How to add grid style category section in Blogger website

Unlike WordPress we don't get so much customization option on Blogger. And also we don't have plugin support on Blogger. That's why most of the Blogger website is very simple. But with custom coding you can create a Blog or website just like WordPress. Not only like WordPress much more modern site with Blogger. I regularly share custom codes to improve your Blogger website.

Today in this article I will show you How you can add Grid style category section on your Blogger website Homepage. 

Explore our Blog: ZHS Theme

You can see a Demo of Grid style category section above. I will show you how you can add a category section like this on your Blogger website Homepage. To do that we have to make some changes on theme code. So take backup of your theme before we start our process. 

But before we start our process we need to understand something and see if your Blogger theme is eligible for this Grid style category section and if not than How to make it eligible. 

Grid style Category section for Blogger website.

Go to Blogger Dashboard and see If you have any widget option after header or before blog body. Now days all modern theme has widget option after header. If you have than half of your job is done. You just have to copy the code from tutorial section and paste it. Your category section will be ready. But If you don't have a section after header than follow the below steps to create a section on yor Theme.

How to create a widget section

Step 1: Go to your theme section and click on Edit as HTML.

Step 2: Now go to menu and select "BLOG1" option.

Blogger Theme

Step 3: Now you will see some code like below.

Step 4: Now inside the <  codes   > add a new command like below just copy paste it and you will see a command called lock it will be true by default make it false.

maxwidgets="4"

Now you your theme is ready to add Grid style category section.

How to create Grid style category section in Blogger website 

To add Grid style category section on your Blogger website go to your Layout section from Blogger Dashboard. Now choose to add new widget section after header or on body and create a new widget of HTML/JavaScript. Than copy the below code and paste it. 

<style>

    .zhs-grid {
      padding: 5px;
      text-align: center;
  }
  
  .zhs-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%;
  }
  
  .zhs-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;
  }
  
  .zhs-grid li a {
      display: block;
      text-decoration: none;
      color: #333;
  }
  
  .zhs-grid li svg {
      margin: 3px 0;
      width: 35px;
      height: 35px;
      fill: #26ae61;
      display: inline-block;
  }
  
  .zhs-grid li span {
      display: block;
      padding: 0 3px;
  }
  </style>
  <div class='zhs-grid coll-3 icon-p-2'>
<h2> Explore our Blog: ZHS Theme </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>

Now save the layout and visit your website. Your Grid style category section is ready and live.

Now you have to change # with your links. And if you want than you can edit further the css style. And use more attractive and cool svg icons. More attractive your thoughts are more beautiful the widget gets. 

If yo have any questions regarding installing this widget on your Blogger website feel free to ask me on the comment section. I will try my best to answer them all.

Hi! Zakir Here. I am a Bangladeshi Blogger and content writer. I share Blogging related and WordPress tutorial on This website. I have shared lot's of SEO related content as well.

Post a Comment

Don't upload any spam link and words that harms others in the comment box. Please comment using your Google account or with name and urls. Use anonymous only If you are not signed in.
© ZHS ThemE. All rights reserved. Developed by Jago Desain