Table of Contents

Hello Guys !  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 viewers

Let's Begin 

How to add Stylish Category showcase on Blogger Homepage or a Post : 

Step 1 : Go to Your Blogger's dashboard

Step 2 : If can add this category showcase in Both Homepage and your Posts/Pages

Step 3 : To add this in home page go to your layout section and add a new gadget and select Html/ Javascript  Option 

Step 4 : To add this in your Posts / Pages create a new page/ post and select HTML view 

Step 5  : Copy and paste the code given below 

<div class='Techy-DarshaN showcase'>
<h2> Explore our Blog: Techy DarshaN</h2>
        
<ul>
<li>
    <a href='https://www.techydarshan.eu.org/' 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='https://www.techydarshan.eu.org/' 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='https://www.techydarshan.eu.org/' 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='https://www.techydarshan.eu.org/' 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='https://www.techydarshan.eu.org/' 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='https://www.techydarshan.eu.org/' 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>

    .Techy-DarshaN {
      padding: 5px;
      text-align: center;
  }
  
  .Techy-DarshaN ul {
      clear: both;
      margin: 15px 0 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  
  .showcase ul li {
      width: 30%;
  }
  
  .Techy-DarshaN 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;
  }
  
  .Techy-DarshaN li a {
      display: block;
      text-decoration: none;
      color: #333;
  }
  
  .Techy-DarshaN li svg {
      margin: 3px 0;
      width: 35px;
      height: 35px;
      fill:#ff7700;
      display: inline-block;
  }
  
  .Techy-DarshaN li span {
      display: block;
      padding: 0 3px;
  }
  </style>

Step 6 : If you want you can also change SVG icons by replacing my icons and also you can change the icon names.

Step 7 : Click on save 

How to add an Extra Category showcase :

Step 1 : Copy the Code give below 

Step 2 : Paste the give below code just after the </li> in the code 

<li>
    <a href='https://www.laxman.eu.org/' 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>

Step 4 : If you wanna change the icon just replace the SVG code by your SVG icon

Step 3 : Then Click on save 

Getting Info...