How To Add Silo Structure For Blogger Blog Post
In this post, I will share - How To Add Silo Structure For Blogger Blog Post and Benefit Of Blogger Silo Structure For Seo. Best Way add this with HTML and CSS.
Basically Silo Structure is a way to separate your blog site content into categories or table and you can think about this as creating a categories and subcategories for your blog site and writing relevant content for visitor.
What is Silo Structure?
Silo structure is one of the most important way to organize any specific content which plays a very important role in SEO. Having a silo structure somewhere will guide all users and search engines (google, bing, yahoo) across your website in a clear, understandable way and will help all search engines to better crawl, index and top rank your website and site content. Which, of course, made the video an overnight sensation.
Benefits of Blogger Silo Structure :
Blogger Silo Structure is one of the biggest benefits of SEO. Execute silo structure in your niche website from beginning and it reduces the Google spending time that your website undergoes for 3-4 months after its inception. This is the best way for your website top ranking on search engine.
When blogger blog posts or pages related to a topic are linked to each other, it helps the search engine to clearly determine the basic idea of your blogger site and it enhances the semantics of your website. Which is very important for SEO.
A good quality website enables you to easily attract visitors to your blog site and easily find all the content on your site, just like you have created a silo structure with a hierarchy. This makes navigation very normal for visitors.
Adding Silo Structure on Blogger With HTML and CSS
You need to use some HTML and CSS to add or create silo structure to your Blogger site, shown below step by step:
- Go to Blogger Dashboard
- Now, Create a New Post or Where you want add silo structure on your blogger site.
- Paste blew HTML and CSS Code.
HTML Code :
<div class="pricing-table-wrapper">
<ul class="pricing-table">
<li class="pricing-table__item">
<h3 class="pricing-table__title">Blogging</h3>
<p class="pricing-table__description">
</p>
<ul class="pricing-table__products">
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/08/add-lazy-load-javascript-code-in-blogger.html">How to add lazy load javascript in blogger?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/08/add-social-media-icons-in-blogger.html">How to make attractive social media icons in blogger?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/08/how-to-add-pricing-table-in-blogger-post.html">How to Create Responsive Pricing table in blogger?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/07/create-responsive-table-in-blogger-posts.html">3 Simple Steps To add Responsive table in blogger?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/06/boost-your-pagespeed-in-blogger.html">11 straightforward Tips to Increase Page Speed in blogger?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/04/how-to-protect-your-content-in-blogger.html">How to Protect your Content in blogger?</a>
</li>
</ul>
<a href="https://www.blogtriggers.com/search/label/blogging%20guides" class="pricing-table__button">Read More</a>
</li>
<li class="pricing-table__item pricing-table__item">
<h3 class="pricing-table__title">SEO</h3>
<ul class="pricing-table__products">
<li class="pricing-table__product"><a href="https://www.blogtriggers.com/2021/06/seo-pro-tips-in-2022.html">10 Pro SEO Tips to rank your website</a></li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/06/onpage-seo-tactics.html">On-Page SEO Basics</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/06/increase-da-and-pa-in-website.html">10 Quick Ways to Boost Your Domain and Page Authority</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogtriggers.com/2021/06/create-high-quality-backlinks-in-website.html">How to Create High Quality Backlinks?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogbn.com/2021/05/smart-and-informative-seo-titles-and-descriptions.html">How to write SEO Title & Descriptions?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogbn.com/2021/05/full-seo-guide-for-beginners.html">What is SEO? Important of SEO in Future?</a>
</li>
</ul>
<a href="https://www.blogbn.com/search/label/SEO" class="pricing-table__button">Read More</a>
</li>
<li class="pricing-table__item">
<h3 class="pricing-table__title">Hosting</h3>
<ul class="pricing-table__products">
<li class="pricing-table__product">
<a href="https://www.blogbn.com/2021/03/host-a-website-in-infinityfree-hosting-for-free.html">How to Host a website on Infinity free hosting for free?</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogbn.com/2021/03/top-7-hosting-review-in-2021.html">7 best Hosting review in 2021</a>
</li>
<li class="pricing-table__product">
<a href="https://www.blogbn.com/2021/03/how-to-host-website-in-google-drive.html">Host a website on Google drive for free?</a>
</li>
</ul>
<a href="https://www.blogbn.com/search/label/hosting" class="pricing-table__button">Read More</a>
</li>
</ul>
</div>CSS Code
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font: 100%/1.6 'Roboto', sans-serif;
padding: 2rem 1rem;
}
.pricing-table-wrapper {
max-width: 71rem;
margin: 0 auto;
}
.pricing-table {
--pricing-table-color: #3676ec;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
grid-gap: 2em;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.pricing-table__item {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
padding: 2em;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.08);
transition: box-shadow 200ms cubic-bezier(0.02, 0.01, 0.47, 1), transform 200ms cubic-bezier(0.02, 0.01, 0.47, 1);
}
.pricing-table__item--popular {
position: relative;
}
.pricing-table__item--popular::before {
position: absolute;
content: attr(data-popular);
top: 2em;
right: 2em;
font-size: 0.9em;
padding: 0 1em;
background-color: #ffd900;
border-radius: 0.1em;
color: #282824;
}
.pricing-table__img {
margin: 2.5em auto 4em;
width: 100%;
max-width: 9.3em;
}
.pricing-table__title {
margin: 0;
font-size: 1.7em;
text-transform: capitalize;
}
.pricing-table__description {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.pricing-table__tagline {
margin: 0;
color: #9ea0a3;
text-align: center;
}
.pricing-table__price {
color: var(--pricing-table-color);
font-size: 2.5em;
margin: 1em auto 0;
font-weight: bold;
}
.pricing-table__label {
margin: 0;
color: #9ea0a3;
font-size: 0.9em;
}
.pricing-table__save {
color: #4cae4f;
font-weight: bold;
}
.pricing-table__products {
margin: 1.87em 0;
padding: 0;
list-style-type: none;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.pricing-table__product {
display: flex;
align-items: center;
font-weight: bold;
margin-bottom: 1.5em;
}
.pricing-table__product a {
text-decoration: none;
color: inherit;
transition: color 0.2s ease-in-out;
}
.pricing-table__product a:hover {
color: var(--pricing-table-color);
}
.pricing-table__product::before {
content: ' ';
width: 0.5em;
height: 0.5em;
margin-inline-end: 1em;
border-radius: 20%;
background-color: var(--pricing-table-color);
border-radius: 50%;
}
.pricing-table__button {
background: var(--pricing-table-color);
color: #fff;
margin-top: auto;
padding: 0.5em 2em;
text-decoration: none;
width: 100%;
text-align: center;
transition: background 0.2s ease-in-out;
text-transform: capitalize;
}
</style>- Now Publish Or Save It.
Add your links here, then the Blogger silo structure will be completed.
Tags :
How To Add Silo Structure For Blogger Blog Post
Silo Structure on Blogger
Blogger Tips and Tricks 2022