How to Add Grid Style Category Section in Blogger Home Page?

Hello! friends. Welcome to another tech blog. Today in this article I am going to show you how you can add a responsive and beautiful Grid Style Category Section to your Blogger or WordPress website.

This method works on both Blogger and WordPress websites. You don't have to do anything. Just paste some code on your website where you want to show your grid style beautiful section section. Read this entire article carefully and follow the steps. I will also tell you about the benefits of grid style section section.

Usually we get very limited number of customization options in blogger. And we don't have any plugin support system in it. So if we want to customize our website we have to rely on custom coding for everything. But don't worry if you don't know coding. Here on my website I have shared a lot of codes which will help you to customize your website.

So let's start our today's tutorial. Follow the steps and copy the code carefully.

Today I am going to share with you section code of grid style section. This code is created with HTML and CSS. This code is responsive with all devices. You can edit and change icons, titles as you wish.

So, follow the steps below to add a grid style category section to your blogger website.

Steps to Add Category Grid to Blogger:

Step 1: Go to your Blogger dashboard and select Layout option from the menu.

Step 2: Now you need to create a new widget where you want to show the grid style category section. (Note: It will look better if you put it on the home page of your website.

Step 3: Now, select the HTML/JavaScript option in the New Widget option and paste the below code in it. Then you pasted another code without clicking save.

<!--Change # of href="#" with your link--><br /><div class='K2-grid coll-3 icon-p-2'><br /><h3> Popular Categories</h3><br /> <br /><ul><br /><li><br /> <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><br /> <span>Blog</span></a><br /></li><br /><li><br /> <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><br /> <span>Blogger</span></a><br /></li><br /><li><br /> <a href='#' title='Seo'><svg fill='currentColor' viewbox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><br /> <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><br /> </svg><span>SEO</span></a><br /></li><br /> <br /><li><br /> <a href='#' title='News'><svg viewbox='0 0 24 24'><br /> <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><br /> </svg><span>News</span></a><br /></li><br /><li><br /> <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><br /> <span>Subscribe</span></a><br /></li><br /><br /><li><br /> <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><br /> <span>Telegram</span></a><br /></li><br /></ul><br /></div><br /><a href="https://www.bdittech.xyz/" class="crf">BD IT TECH</a><br />

Step 4: Now edit the html code pasted with your title and link. You can change the svg icon by replacing it with your icon url.

Step 5: Now copy the CSS code given below and paste it right after the HTML code you pasted earlier.

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

Step 6:  Now save the widget. Prepare your grid style section section.

Now you can see your gadget on your website You can also see a demo on my website homepage. This script is responsive with all devices so you don't have to worry You can edit this code to suit your website best. If there are any problems and questions you can ask me in the comment section below.

If you like this article, don't forget to share it with your friends.

You can join our Telegram channel for more discussions and cool stuff.

How to add grid style category section in wordpress?

Well if you want to create a grid style section section on your wordpress website then follow the same steps as blogger but you need to paste your code where you want it to show on your blogger website.

Grid style category advantage

If you ask me, "Why should I use a grid style section section?" Your website will look more attractive than my answer. It helps your user find what they are looking for. If they see the category option at the top of your website, they will understand about your services and what kind of work you do on your website. This will help you get some regular visitors. Which is good for your blog growth. Another word it helps you get traffic. It creates a user friendly environment on your website. Which is a good thing for you. This will generate some good reviews about your website.

Now it's time for me to say goodbye. Hope you have created a nice category section on your website. If you like this article, share it with your friends.