वर्डप्रेस वेबसाइट पर Social Follow Buttons (WhatsApp, Facebook, Telegram, YouTube) जोड़ने का तरीका

नीचे दिया गया कोड आपकी वेबसाइट पर सोशल फॉलो बटन (WhatsApp, Facebook, Telegram और YouTube) जोड़ने के लिए है। HTML कोड और CSS कोड दोनों दिए गए हैं, साथ ही इसे वर्डप्रेस में जोड़ने का पूरा गाइड भी।

HTML कोड: (बटन बनाने के लिए)

<div class="social-follow-buttons">
  <a href="https://wa.me/your_number" target="_blank" class="social-btn whatsapp">
    <img src="https://img.icons8.com/color/48/whatsapp.png" alt="WhatsApp">
  </a>
  <a href="https://facebook.com/your_page" target="_blank" class="social-btn facebook">
    <img src="https://img.icons8.com/color/48/facebook.png" alt="Facebook">
  </a>
  <a href="https://t.me/your_username" target="_blank" class="social-btn telegram">
    <img src="https://img.icons8.com/color/48/telegram-app.png" alt="Telegram">
  </a>
  <a href="https://youtube.com/your_channel" target="_blank" class="social-btn youtube">
    <img src="https://img.icons8.com/color/48/youtube-play.png" alt="YouTube">
  </a>
</div>

CSS कोड: (डिज़ाइन और स्टाइलिंग के लिए)

.social-follow-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
}

.social-follow-buttons .social-btn img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.social-follow-buttons .social-btn img:hover {
  transform: scale(1.2);
}

.social-follow-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
  padding: 8px;
  background: linear-gradient(135deg, #f3f3f3, #e7e7e7);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.social-follow-buttons:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.social-follow-buttons .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-follow-buttons .social-btn img {
  width: 30px;
  height: 30px;
}

.social-follow-buttons .social-btn:hover {
  background-color: #f0f0f0;
  transform: scale(1.2);
}

.social-follow-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
}

.social-follow-buttons .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 55px;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-follow-buttons .social-btn img {
  width: 35px;
  height: 35px;
  transition: transform 0.3s ease;
}

.social-follow-buttons .social-btn:hover {
  transform: translateY(-8px);
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.5);
}

.social-follow-buttons .social-btn:hover img {
  transform: scale(1.2);
}

.social-follow-buttons .social-btn:active {
  transform: translateY(2px);
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.2), inset -3px -3px 5px rgba(255, 255, 255, 0.5);
}

.tags-links { display:none; }

.comment-form #url{
 display:none;
}

.social-follow-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
}

.social-follow-buttons .social-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 55px;
  background: #1e1e1e;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: all 0.4s ease;
}

.social-follow-buttons .social-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #ff007c, #7d00ff, #00ffea, #ff007c);
  background-size: 300%;
  border-radius: 50%;
  z-index: -1;
  transition: opacity 0.4s ease;
  opacity: 0;
}

.social-follow-buttons .social-btn:hover:before {
  opacity: 1;
  animation: gradient-move 2s infinite linear;
}

.social-follow-buttons .social-btn img {
  width: 35px;
  height: 35px;
  z-index: 1;
  transition: transform 0.3s ease;
}

.social-follow-buttons .social-btn:hover img {
  transform: scale(1.2);
}

.social-follow-buttons .social-btn:hover {
  box-shadow: 0 0 20px rgba(255, 0, 122, 0.5), 0 0 40px rgba(125, 0, 255, 0.5);
}

@keyframes gradient-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

वर्डप्रेस में इस कोड को कैसे जोड़ें?

1. Custom HTML Widget का उपयोग करें:

अपने वर्डप्रेस डैशबोर्ड में लॉगिन करें।
जाएं: Appearance > Widgets (थीम में “विजेट” ऑप्शन चुनें)।
Custom HTML Widget जोड़ें:
- Custom HTML विजेट को अपनी वेबसाइट के Sidebar या Footer में खींचें।
- ऊपर दिया गया HTML कोड विजेट में पेस्ट करें।
- सेव बटन पर क्लिक करें।