How to Create a Grid Style Category Section Using HTML & CSS In Homepage Of Blogger? Taosin Blog

How to Create a Grid Style Category Section Using HTML & CSS In Homepage Of Blogger?

Hello Guys ! Welcome to Taosin Blog  . Today in this post we are sharing tutorial on How to add Stylish Category showcase on Blogger Homepage or a Post .

Pros : 

1. Mobile Friendly
2. Responsive
3. New Look to showcase your categories
4. Showcase Your Categories and get engaged with your viewer

How to add an Extra Category showcase :

Step 1 : You open your Blogger Dashboard
Step 2 : Click on Dustboard Theme Option.
Step 3 : Click the arrow icon next to the Customize Button.
Step 4 : Now click on Edit HTML Option.
Step 5 : Now search the code ]]></b:skin> and paste the following CSS Codes just above to it. 

/* Category layout by Engineer Abusufian*/
.engineerabusufian{padding:5px;text-align:center;position:relative}.engineerabusufian h2{font-size:1.6em;line-height:1.6em;margin-bottom:0;padding-bottom:0}.engineerabusufian ul{clear:both;margin:15px 0 20px;width:100%;display:flex;padding:0;flex-wrap:wrap;justify-content:space-between}.engineerabusufian.icon-p-2 li{position:relative;width:30%;list-style:none;line-height:1.3em;text-align:center;border-radius:10px;margin:6px 0;background:var(--contentB);box-shadow:0 5px 35px rgb(0 0 0/7%);padding:6px 0 12px;display:flex;align-items:center;justify-content:center}.engineerabusufian li a{display:block;text-decoration:none;color:var(--fontC)}.engineerabusufian li svg{margin:3px 0;width:35px;height:35px;display:inline-block}.engineerabusufian li span{display:block;padding:0 3px}.drK .engineerabusufian li{background:var(--darkBa)}
  

Step 6 : Now save the theme by clicking on the save Button .
Step 7 : Again go to layout option from blogger dashboard.
Step 8 : Add a new (HTML/JavaScript) widget to the top widget of the layout options.
Step 9 : Click on edit icon of HTML/JavaScript option and paste the following codes.

<div class="engineerabusufian coll-3 icon-p-2">
<h2><span>Today you are looking for?</span></h2>
<ul>
<li onclick='vibRate(50)' >
<a href="https://engineerabusufian.blogspot.com/p/tutorial.html" title="tutorial">

  
  <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.17,2.06A13.1,13.1,0,0,0,19,1.87a12.94,12.94,0,0,0-7,2.05,12.94,12.94,0,0,0-7-2,13.1,13.1,0,0,0-2.17.19,1,1,0,0,0-.83,1v12a1,1,0,0,0,1.17,1,10.9,10.9,0,0,1,8.25,1.91l.12.07.11,0a.91.91,0,0,0,.7,0l.11,0,.12-.07A10.9,10.9,0,0,1,20.83,16a1,1,0,0,0,1.17-1v-12A1,1,0,0,0,21.17,2.06ZM11,15.35a12.87,12.87,0,0,0-6-1.48c-.33,0-.66,0-1,0v-10a8.69,8.69,0,0,1,1,0,10.86,10.86,0,0,1,6,1.8Zm9-1.44c-.34,0-.67,0-1,0a12.87,12.87,0,0,0-6,1.48V5.67a10.86,10.86,0,0,1,6-1.8,8.69,8.69,0,0,1,1,0Zm1.17,4.15A13.1,13.1,0,0,0,19,17.87a12.94,12.94,0,0,0-7,2.05,12.94,12.94,0,0,0-7-2.05,13.1,13.1,0,0,0-2.17.19A1,1,0,0,0,2,19.21,1,1,0,0,0,3.17,20a10.9,10.9,0,0,1,8.25,1.91,1,1,0,0,0,1.16,0A10.9,10.9,0,0,1,20.83,20,1,1,0,0,0,22,19.21,1,1,0,0,0,21.17,18.06Z" fill="#6563ff"/></path></svg>    
  <span>Tutorial</span>
</a></li>


<li onclick='vibRate(50)'>
<a href="https://t.me/EngineerAbusufian" title="Telegram">
<svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewbox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x33_35-telegram"><g><g><path d="M484.689,98.231l-69.417,327.37c-5.237,23.105-18.895,28.854-38.304,17.972L271.2,365.631     l-51.034,49.086c-5.646,5.647-10.371,10.372-21.256,10.372l7.598-107.722L402.539,140.23c8.523-7.598-1.848-11.809-13.247-4.21     L146.95,288.614L42.619,255.96c-22.694-7.086-23.104-22.695,4.723-33.579L455.423,65.166     C474.316,58.081,490.85,69.375,484.689,98.231z" style="fill:#20A0E1;"/></path></g></g></g><g id="Layer_1"/></g></svg>  
<span>Telegram</span>
</a></li>


<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>





<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>





<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>


<li onclick='vibRate(50)'>
<a href="https://engineerabusufian.blogspot.com/p/tools.html" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>
<span>Tools</span>
</a></li>
</ul></div>

Step 10 : Now save the code and publish the widgets.

The category grid has now been successfully added to your blogger site. This is fully responsive and works well on all types of devices. You can also make further adjustments to fit your site.

*SVG icons are taken from Iconfinder site to create it

Terms Of Use 

To enjoy our workshop, remember to keep the credits in canon. We do not allow this article to be rewritten in any way. Do not copy this notice, the rules or any part of this composition without permission, it is strictly prohibited. However, legal action will be taken, 

Copyright : Taosin Blog