Hello! Welcome to Tech Ankur
If you are looking for How to Add a Grid style category section in Blogger website then this post is just for you.
That's why I will share the code that will help you to display a category section on the homepage of the blogger website. It is completely built using only HTML and CSS code and it is fully responsive in all types of devices.
You can see the demo here⤵
Easy Steps To Add Grid style category section.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click layout.
Step 3: Now click on the Add a gadget button where you want to show this category grid
Step 4: Now choose the HTML/JavaScript widget and paste the below code in it.
<!--[ Document group by- Tech Ankur ]--> <div class="widget"> <h3 class="title" style="padding-top: 30px;">Categories</h3> </div> <div class="cBox"> <label class="a b iB"> <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.500000, 2.500000)"><line class="svgC" x1="6.6787" x2="12.4937" y1="12.0742685" y2="12.0742685"></line><path d="M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z"></path></g></svg> <span data-text="All template">Common</span> </label> <label class="a b iB"> <svg class="line" viewbox="0 0 24 24"><path class="c-1" d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"></path><path class="c-1" d="M22 10H18C15 10 14 9 14 6V2L22 10Z"></path><path class="c-2" d="M7 13H13"></path><path class="c-2" d="M7 17H11"></path></svg> <span data-text="Template">Median UI</span> </label> <label class="a b iB"> <svg class="line" viewbox="0 0 24 24"><path class="c-1" d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"></path><path class="c-1" d="M22 10H18C15 10 14 9 14 6V2L22 10Z"></path><path class="c-2" d="M7 13H13"></path><path class="c-2" d="M7 17H11"></path></svg> <span data-text="Template">Fletro Pro</span> </label> <label class="a b iB"> <svg class="line" viewbox="0 0 24 24"><path class="c-1" d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14"></path><path class="c-1" d="M22 10H18C15 10 14 9 14 6V2L22 10Z"></path><path class="c-2" d="M7 13H13"></path><path class="c-2" d="M7 17H11"></path></svg> <span data-text="Template">iMagz</span> </label> <label class="a b iB"> <svg class="line" viewbox="0 0 24 24"><path class="c-1" d="M21.6 10.2H12.2V13.9H17.7C17.6 14.8 17 16.2 15.7 17.1C14.9 17.7 13.7 18.1 12.2 18.1C9.59995 18.1 7.29995 16.4 6.49995 13.9C6.29995 13.3 6.19995 12.6 6.19995 11.9C6.19995 11.2 6.29995 10.5 6.49995 9.9C6.59995 9.7 6.59995 9.5 6.69995 9.4C7.59995 7.3 9.69995 5.8 12.2 5.8C14.1 5.8 15.3 6.6 16.1 7.3L18.9 4.5C17.1999 3 14.9 2 12.2 2C8.29995 2 4.89995 4.2 3.29995 7.5C2.59995 8.9 2.19995 10.4 2.19995 12C2.19995 13.6 2.59995 15.1 3.29995 16.5C4.89995 19.8 8.29995 22 12.2 22C14.9 22 17.1999 21.1 18.7999 19.6C20.6999 17.9 21.7999 15.3 21.7999 12.2C21.7999 11.4 21.7 10.821.6 10.2Z"></path></svg> <span data-text="Guide">Adsense</span> </label> <label class="a b iB"> <svg class="line" viewbox="0 0 24 24"><path class="c-2" d="M8.68006 12.72H10.4201V16.77C10.4201 17.37 11.1601 17.65 11.5601 17.2L15.8201 12.36C16.1901 11.94 15.8901 11.28 15.3301 11.28H13.5901V7.22995C13.5901 6.62995 12.8501 6.34995 12.4501 6.79995L8.19006 11.64C7.82006 12.06 8.12006 12.72 8.68006 12.72Z"></path><path class="c-1" d="M11.97 22C17.4928 22 21.97 17.5228 21.97 12C21.97 6.47715 17.4928 2 11.97 2C6.44712 2 1.96997 6.47715 1.96997 12C1.96997 17.5228 6.44712 22 11.97 22Z"></path></svg> <span data-text="User guide">AMP</span> </label> <label class="a b iB"> <svg class="line" viewbox="0 0 24 24"><path class="c-1" d="M8.5 18.97H8C4 18.97 2 17.97 2 12.97V7.96997C2 3.96997 4 1.96997 8 1.96997H16C20 1.96997 22 3.96997 22 7.96997V12.97C22 16.97 20 18.97 16 18.97H15.5C15.19 18.97 14.89 19.12 14.7 19.37L13.2 21.37C12.54 22.25 11.46 22.25 10.8 21.37L9.29999 19.37C9.13999 19.15 8.78 18.97 8.5 18.97Z"></path><path class="c-2" d="M8 8.69995L6 10.7L8 12.7"></path><path class="c-2" d="M16 8.69995L18 10.7L16 12.7"></path><path class="c-2" d="M13 8.37012L11 13.0302"></path></svg> <span data-text="and how to fix it">Common Error</span> </label> <a class="a b iB" href="https://www.techankur.xyz/p/icons-are-being-loaded.html"> <svg class="line" viewbox="0 0 24 24"><path class="c-1" d="M3.17004 7.43994L12 12.5499L20.77 7.46991"></path><path class="c-1" d="M12 21.6099V12.5399"></path><path class="c-1" d="M21.61 12.83V9.17C21.61 7.79 20.62 6.11002 19.41 5.44002L14.07 2.48C12.93 1.84 11.07 1.84 9.92999 2.48L4.59 5.44002C3.38 6.11002 2.39001 7.79 2.39001 9.17V14.83C2.39001 16.21 3.38 17.89 4.59 18.56L9.92999 21.52C10.5 21.84 11.25 22 12 22C12.75 22 13.5 21.84 14.07 21.52"></path><path class="c-2" d="M19.2 21.4C20.9673 21.4 22.4 19.9673 22.4 18.2C22.4 16.4327 20.9673 15 19.2 15C17.4327 15 16 16.4327 16 18.2C16 19.9673 17.4327 21.4 19.2 21.4Z"></path><path class="c-2" d="M23 22L22 21"></path></svg> <span data-text="Ready to use">SVG Icon</span> </a> </div>
Important!Now edit the HTML code and change the SVG icons, Title, and text and add your own link to it.
Step 5: Now copy the below CSS code and paste it just below the HTML code.
<style>
/* Code by- Tech Ankur */
.cBox{padding: 0 5%;display:flex;flex-wrap:wrap;justify-content:flex-start; position:relative;width:calc(100% + 10px);left:-5px;right:-5px; margin-bottom:25px} .cBox .a{display:inline-flex;align-items:flex-start; border-radius:8px;padding:15px 20px 15px 10px;margin:0 5px 10px; background:#f4f4f3} .cBox >*:not(a){cursor:default} .cBox .a >*{margin:0 8px} .cBox .a >svg{opacity:.8} .cBox .b span::after{content:attr(data-text);display:block;font-size:12px;opacity:.6} .box1:checked ~ .mainWp .sideB .fC-1, .box2:checked ~ .mainWp .sideB .fC-2, .box3:checked ~ .mainWp .sideB .fC-3, .box4:checked ~ .mainWp .sideB .fC-4, .box5:checked ~ .mainWp .sideB .fC-5, .box6:checked ~ .mainWp .sideB .fC-6, .box7:checked ~ .mainWp .sideB .fC-7{opacity:1;visibility:visible;z-index:2} .box1:checked ~ .mainWp .cBox .a[for=box-1], .box2:checked ~ .mainWp .cBox .a[for=box-2], .box3:checked ~ .mainWp .cBox .a[for=box-3], .box4:checked ~ .mainWp .cBox .a[for=box-4], .box5:checked ~ .mainWp .cBox .a[for=box-5], .box6:checked ~ .mainWp .cBox .a[for=box-6], .box7:checked ~ .mainWp .cBox .a[for=box-7], .cBox .a:hover{background:#ebeced} .box1:checked ~ .mainWp .sideB .sd-1, .box2:checked ~ .mainWp .sideB .sd-2, .box3:checked ~ .mainWp .sideB .sd-3, .box4:checked ~ .mainWp .sideB .sd-4, .box5:checked ~ .mainWp .sideB .sd-5, .box6:checked ~ .mainWp .sideB .sd-6, .box7:checked ~ .mainWp .sideB .sd-7{display:block}.cBox .a{flex-grow:1}
.drK .cBox .a {background: var(--darkBa); color: #fff;}
</style>
Step 6: Now save the code and publish the widgets.
That's done!
If you encounter any problem, do not hesitate to contact us
Copyright:
Tech Ankur