Create A SEO Friendly Label Widget In Blogger Blog (Centered & Responsive)
- 1.) Go to www.blogger.com.
- 2.) Login using your Gmail Account.
- 3.) After login, the Blogger Dashboard will open
- 4.) Click and Select The Blog where you want to add the code
- 5.) From the left menu, click on Layout and go to layout
- 6.) Click +Add a Gadget where you want to show the widget (Sidebar / Footer / Header)
- 7.) From the gadget list, click HTML/JavaScript
Enter a Title (optional)
Copy the HTML/JavaScript code provided below and paste it into the Content Box.
- 8.) Click Save.
- 9.) Click Save Arrangement.
- 10.) Click View Blog and Check Your Blog.
- 11.) Your HTML / JavaScript widget is Now Live.
A SEO Friendly Label Widget In Blogger Blog (Centered & Responsive) HTML javascript Code
<!-- SEO Friendly Centered Label Widget for Blogger -->
<style>
.label-widget {
font-family: 'Segoe UI', sans-serif;
background: #fff;
padding: 25px 20px;
border-radius: 15px;
border: 1px solid #ddd;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
max-width: 900px;
margin: 30px auto; /* Center horizontally with top-bottom margin */
text-align: center;
transition: all 0.3s ease;
}
/* Responsive margin for smaller screens */
@media screen and (max-width: 1000px) {
.label-widget {
margin: 30px 20px;
}
}
/* Widget heading */
.label-widget h2 {
font-size: 24px;
margin-bottom: 20px;
color: #222;
border-bottom: 2px solid #eee;
padding-bottom: 12px;
}
/* Label list */
.label-widget .label-list {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Center labels */
gap: 12px;
}
/* Label buttons */
.label-widget .label-list a {
text-decoration: none;
background: #fff; /* White label background */
color: #1a0dab; /* Google-style link color */
padding: 10px 18px;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
text-align: center;
min-width: 140px;
flex: 1 1 auto; /* Responsive flex items */
}
.label-widget .label-list a:hover {
background: #e8f0fe; /* Light blue hover background */
color: #1a0dab;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
</style>
<div class="label-widget">
<h2>🏷️ Select Topic</h2>
<div class="label-list">
<a href="/search/label/Blogger Origin" title="Blogger Origin">Blogger Origin</a>
<a href="/search/label/Blogger SEO Tips" title="Blogger SEO Tips">Blogger SEO Tips</a>
<a href="/search/label/Blogger Blog Tips" title="Blogger Blog Tips">Blogger Blog Tips</a>
<a href="/search/label/Blogger Traffic Tips" title="Blogger Traffic Tips">Blogger Traffic Tips</a>
<a href="/search/label/Blogger Theme Tips" title="Blogger Theme Tips">Blogger Theme Tips</a>
<a href="/search/label/Blogger Widget Tips" title="Blogger Widget Tips">Blogger Widget Tips</a>
<a href="/search/label/Google Adsense Tips" title="Google Adsense Tips">Google Adsense Tips</a>
<a href="/search/label/Blogger Create Page Tips" title="Blogger Create Page Tips">Blogger Create Page Tips</a>
</div>
</div>
Important: "Where the text is highlighted, add your blog's labels."
Comments
Post a Comment