Catchy Title for Social Media

Learn how to add a captivating animated badge to your Blogger menu

{getToc} $title={Table of Contents} $count={true}

• Home
• Blog
• Toolkit New!
• Gallery
• About Updated
• Contact

{ads}

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>

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); }
}

Copy CSS to Clipboard

{ads}

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; }
}

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);
}

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;
}