Hello guys. Welcome to Bytes Vibe Blogger tutorials. Today we will learn how we can add a Stylish Grid Category Showcase on Blogger homepage. This way when users or visitors land on our blogger homepage of blogger site they will see all of the services or category we have on our blogger website.
Advantage of adding category showcase in blogger:
Creating a Grid Stylish Category Showcase on Blogger Home Page not only gives our blog a fresh and new look but this showcase also offers many advantages. We can also add a image preloader to make our blogger site more beautiful. This also look like a hero section. Let’s check out the advantages of adding a category showcase in blogger site:
- This Stylish Grid Category Showcase is Mobile Friendly and Responsive.
- Showcase all Categories and get engaged with viewers.
How to add a Stylish Grid Category Showcase on Blogger
We can add this category showcase in both posts or our blogger homepage. To add a Stylish Grid Category Showcase on Blogger site follow these steps below:
Step 1 :
Log in to Blogger’s dashboard. And now we need to decide where we want the category showcase – on our homepage or in individual posts/pages. Because this can be used in both posts and homepage. We just need to copy the codes and add them wherever we want to show this category showcase.
Step 2 (For Homepage):
- We need to to to the layout section in blogger dashboard.
- Than click on Add a new gadget.
- Choose the “HTML/Javascript” option.
Step 3 (For Posts/Pages):
- We need to Create a new post/page.
- And Select HTML view by clicking the pen icon.
Step 4:
Copy and paste the code given below to add a Stylish Grid Category Showcase on Blogger:
<div class='Bytes-Vibe 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>
.Bytes-Vibe {
padding: 5px;
text-align: center;
}
.Bytes-Vibe ul {
clear: both;
margin: 15px 0 20px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.showcase ul li {
width: 30%;
}
.Bytes-Vibe 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;
}
.Bytes-Vibe li a {
display: block;
text-decoration: none;
color: #333;
}
.Bytes-Vibe li svg {
margin: 3px 0;
width: 35px;
height: 35px;
fill: #ff7700;
display: inline-block;
}
.Bytes-Vibe li span {
display: block;
padding: 0 3px;
}
</style>
Code language: HTML, XML (xml)Now save all of the codes or settings.
Customize: We can customize the SVG icons by replacing them with our own. We can also change the icon names and links as per our preference.
How to add an Extra Category showcase:
Now suppose we need to add an extra category or remove an existing one. We just need to add the below code before </ul>.
<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>Code language: HTML, XML (xml)Now save all the changes. If we want to change the icon than we can simply replace the SVG code with our SVG icon and same for the texts and links.
In this post, we covered the steps on How to add a Stylish Grid Category Showcase on Blogger homepage or posts. We hope this article was helpful. Don’t forget to follow our blog for daily blogger tutorials like this. 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.
