How To Add Grid Style Category Widget in Blogger

Learn how to enhance the appearance of your Blogger blog with Grid Style Widget category. Follow our step-by-step guide and easily add this dynamic and customizable widget to your blog's layout. Improve your blog's user experience and increase engagement with this simple and effective feature. Start now!

What is Grid Style Widget HTML&CSS Script?

A Grid-style widget HTML script is a piece of HTML code that creates a grid layout to organize content or elements on a web page. It utilizes the CSS Grid Layout module, which is a powerful grid system that allows you to divide a web page into columns and rows, and place content in specific areas of the grid.

To create a grid layout in HTML, you need to define a container element with the display: grid property. Then, you can use a combination of properties such as grid-template-columns, grid-template-rows, grid-column, and grid-row to specify the size and position of each item in the grid.

Benefit Of The Grid Style Category Widget

The Grid Style Category widget is a type of user interface element that is used to display categories or groupings of content in a grid format. Some benefits of using the Grid Style Category widget include:

Improved user experience: The grid layout makes it easy for users to quickly browse and find the content they are looking for. It also provides a visually appealing way to display categories or groupings.

Increased engagement: By making it easy for users to find content related to their interests, the Grid Style Category widget can help increase engagement with your website or application.

Customizable: The Grid Style Category widget can be customized to fit the design and branding of your website or application. You can choose the number of columns, the color scheme, and the size of the widget to create a cohesive and professional look.

Organized content: By using the Grid Style Category widget, you can organize your content into meaningful categories that make it easier for users to navigate and find what they need.

Overall, the Grid Style Category widget can be a valuable tool for improving the user experience and engagement on your website or application, while also providing a visually appealing and organized way to display content.

How To Add a Grid Style Widget in Blogger?

To add a Grid Style Category widget in Blogger, you can follow these steps:

1. Log in to your Blogger account and go to your blog's dashboard.
2. Click on "Layout" in the left-hand menu.
3. Click on "Add a Gadget" where you want to add the Grid Style Category widget (e.g., sidebar, footer).
4. In the pop-up window, scroll down and select "HTML/JavaScript" and copy the All grid style category script from below.

<div class='K2-grid coll-3 icon-p-2'>

<h2> Proud Tips</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>

<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>

Now Save the widget.

All of done, 'Grid Style category Widget in blogger’

Thanks For Reading, "How To Add Grid Style Category Widget in Blogger"