Loading title…
Loading description…
Search for movies, TV series, trailers, cast, reviews and release dates.
Learn how to add a captivating animated badge to your Blogger menu
{getToc} $title={Table of Contents} $count={true}
Implementation Guide
To add an animated badge to your Blogger menu:
Important Note
Place the badge HTML inside your menu link element, right after the menu text.
HTML Structure
<li class="menu-item">
<a href="#" class="menu-link">
<i class="fas fa-toolbox"></i> Toolkit
<span class="animated-badge">New!</span>
</a>
</li>
<a href="#" class="menu-link">
<i class="fas fa-toolbox"></i> Toolkit
<span class="animated-badge">New!</span>
</a>
</li>
CSS Styles
.animated-badge {
display: inline-block;
padding: 4px 10px;
margin-left: 8px;
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
color: white !important;
font: bold 0.7em 'Roboto', Arial, sans-serif;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
animation: pulse 2s infinite;
transform-origin: center;
vertical-align: middle;
position: absolute;
top: 10px;
right: -15px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
display: inline-block;
padding: 4px 10px;
margin-left: 8px;
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
color: white !important;
font: bold 0.7em 'Roboto', Arial, sans-serif;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
animation: pulse 2s infinite;
transform-origin: center;
vertical-align: middle;
position: absolute;
top: 10px;
right: -15px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Customization Tips
Customize your animated badge with these options:
Different Animations
/* Bounce Animation */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animated-badge.bounce {
animation: bounce 1.5s infinite;
}
/* Neon Glow */
.animated-badge.neon {
background: #0d6efd;
box-shadow: 0 0 5px #0d6efd, 0 0 15px #0d6efd;
animation: glow 1.5s alternate infinite;
}
@keyframes glow {
to { box-shadow: 0 0 10px #0d6efd, 0 0 30px #0d6efd; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animated-badge.bounce {
animation: bounce 1.5s infinite;
}
/* Neon Glow */
.animated-badge.neon {
background: #0d6efd;
box-shadow: 0 0 5px #0d6efd, 0 0 15px #0d6efd;
animation: glow 1.5s alternate infinite;
}
@keyframes glow {
to { box-shadow: 0 0 10px #0d6efd, 0 0 30px #0d6efd; }
}
Color Variations
/* Blue Badge */
.animated-badge.blue {
background: linear-gradient(135deg, #4361ee, #3a0ca3);
}
/* Green Badge */
.animated-badge.green {
background: linear-gradient(135deg, #4ade80, #16a34a);
}
/* Purple Badge */
.animated-badge.purple {
background: linear-gradient(135deg, #a855f7, #7e22ce);
}
.animated-badge.blue {
background: linear-gradient(135deg, #4361ee, #3a0ca3);
}
/* Green Badge */
.animated-badge.green {
background: linear-gradient(135deg, #4ade80, #16a34a);
}
/* Purple Badge */
.animated-badge.purple {
background: linear-gradient(135deg, #a855f7, #7e22ce);
}
Size Options
/* Small Badge */
.animated-badge.small {
padding: 2px 6px;
font-size: 0.6em;
}
/* Large Badge */
.animated-badge.large {
padding: 6px 14px;
font-size: 0.9em;
}
.animated-badge.small {
padding: 2px 6px;
font-size: 0.6em;
}
/* Large Badge */
.animated-badge.large {
padding: 6px 14px;
font-size: 0.9em;
}