How to Create a Grid Stylish Category Showcase on Blogger Home Page

How to Create a Grid Stylish Category Showcase on Blogger Home Page | Peak Fiction. How to Showcase services in Homepage of Blogger. Blogger edit.

Welcome to PEAK FICTION, where creativity meets practicality! In this post, we're excited to share a step-by-step tutorial on enhancing your Blogger experience by adding a Stylish Category Showcase to your blogger homepage or individual posts. This not only gives your blog a fresh, new look but also offers several advantages. Lets see How to Showcase services in Homepage of Blogger.

How to Showcase services in Homepage of Blogger., How to Create a Grid Stylish Category Showcase on Blogger Home Page | Peak Fiction, Category on Blogger Home Page., How to Create a Grid Stylish

Advantage of adding category showcase in blogger:

Mobile Friendly
Responsive
New Look to showcase your categories
Showcase Your Categories and get engaged with your viewers
Permanently activate dark mode in blogger Theme

How to add Stylish Category showcase on Blogger Homepage

You can add this category showcase in both posts or your blogger homepage.

Step 1 :

Head to your Blogger's dashboard.

Step 2:

Decide where you want the category showcase - on your homepage or in individual posts/pages.

Step 3 (For Homepage):

Go to the layout section in your dashboard.
Add a new gadget.
Choose the "HTML/Javascript" option.

Step 4 (For Posts/Pages):

Create a new post/page.
Select HTML view.

Step 5 :

Copy and paste the code given below.

<div class='Techy-DarshaN showcase'>

<h2> Explore our Blog: Peak Fiction </h2>

        

<ul>

<li>

    <a href='https://www.peakfiction.top/' 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.peakfiction.top/' 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.peakfiction.top/' 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.peakfiction.top/' 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.peakfiction.top/' 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.peakfiction.top/' 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 :

Optionally, customize the SVG icons by replacing them with your own. You can also change the icon names and links as per your preference.

Step 7:

Click on 'Save'.

How to add an Extra Category showcase:

Easy steps to add an extra category showcase!

Step 1: Copy the provided code below.

<li>
    <a href='https://www.peakfiction.top/' 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 2: Paste the code just after the </li> in your existing code.

Step 3: If you want to change the icon, simply replace the SVG code with your desired SVG icon

Step 4: After pasting the code, click on 'Save'.

In this post, we covered the steps on how to add a category section to your Blogger homepage or post. We hope you found this article helpful. Don't forget to follow our blog for daily posts like this. Share your thoughts on the post, and if you have any questions, feel free to contact us or drop a comment below. Thanks for reading! So we learned How to Create a Grid Stylish Widget Category on Blogger Home Page.