Cara Memasang Ikon Media Sosial Keren & Canggih di Footer Blogger + Dark Mode

Warkasa1919

November 04, 2025

Cara Memasang Ikon Media Sosial Keren & Canggih di Footer Blogger + Dark Mode

Footer situs – bagian penting untuk meningkatkan branding dan kepercayaan pengunjung. Dengan menambahkan ikon media sosial seperti Facebook, Twitter (X), Instagram, dan WhatsApp, pembaca bisa langsung terhubung dengan Anda.

Pada tutorial ini, kita akan memasang widget media sosial yang:

✔️ Ringan & cepat loading
✔️ Responsif di semua perangkat
✔️ Ikon premium (SVG glow soft)
✔️ SEO-friendly
✔️ Warna otomatis mengikuti Dark Mode
✔️ Cocok untuk Blogger / Blogspot

Demo Tampilan

✨ Ikon minimalis modern
✨ Animasi hover glowing premium
✨ Auto-switch Light/Dark Mode
Sudah dioptimalkan untuk tampilan mobile & desktop!

Langkah 1: Masuk ke Blogger

Masuk Dashboard Blogger → Tata Letak / Layout → Scroll ke bagian Footer → Klik Tambahkan Gadget → Pilih HTML/JavaScript

Langkah 2: Paste Code HTML Media Sosial

Ganti URL sosial Anda pada bagian href=""

<div class="social-footer">
  <a href="https://facebook.com/USERNAME" target="_blank" aria-label="Facebook">
    <svg viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2v-3h2v-2.3c0-2 1.2-3.1 3-3.1 .9 0 1.8.1 2 .1v2.8h-1.1c-1 0-1.3.6-1.3 1.2V12h2.7l-.4 3h-2.3v7A10 10 0 0 0 22 12" /></svg>
  </a>
  <a href="https://twitter.com/USERNAME" target="_blank" aria-label="Twitter">
    <svg viewBox="0 0 24 24"><path d="M22 4.01c-.8.35-1.7.59-2.6.7a4.5 4.5 0 0 0 2-2.5 9.3 9.3 0 0 1-2.9 1.1A4.6 4.6 0 0 0 12 7.2a13 13 0 0 1-9.4-4.8A4.5 4.5 0 0 0 4.6 8a4.7 4.7 0 0 1-2-.6v.1a4.6 4.6 0 0 0 3.7 4.5 4.5 4.5 0 0 1-2 .1 4.7 4.7 0 0 0 4.3 3.2A9.3 9.3 0 0 1 2 18.6a13 13 0 0 0 7 2" /></svg>
  </a>
  <a href="https://instagram.com/USERNAME" target="_blank" aria-label="Instagram">
    <svg viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 ...Z" /></svg>
  </a>
  <a href="https://wa.me/6281234567890" target="_blank" aria-label="WhatsApp">
    <svg viewBox="0 0 24 24"><path d="M12 2a10 ...Z" /></svg>
  </a>
</div>

Sesuaikan USERNAME & nomor WhatsApp ✅
Format WA internasional: 628xxx

Langkah 3: Tambahkan CSS Premium + Dark Mode

Masukkan ke Theme → Edit HTML → cari </head> → paste di atasnya:

<style>
.social-footer{
  display:flex;gap:14px;justify-content:center;padding:15px;
}
.social-footer a svg{
  width:26px;height:26px;fill:#111;transition:.3s;
}
.social-footer a:hover svg{
  transform:scale(1.2);
  filter:drop-shadow(0 0 6px gold);
}
html[data-theme='dark'] .social-footer a svg{
  fill:#f8f8f8;
}
</style>

Dark Mode Auto Blogger

Jika template Anda mendukung mode gelap otomatis (data-theme='dark'), ikon akan mengikuti.
Jika belum, tambahkan tombol Dark Mode → DM ready ✅

Tips SEO Optimasi Social Footer

Teknik	Hasil
Tambahkan `aria-label`	Bantu Google pahami ikon
Gunakan SVG	Loading lebih cepat
Posisi footer	UX sempurna, tidak ganggu konten
Tambah rel nofollow opsional	Untuk akun baru

Bonus: Link WhatsApp Klik-Otomatis Dengan Pesan

Update link WA:

https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20mau%20bertanya%20😊

Testing Checklist

✅ Ikon klik berfungsi
✅ Hover glow muncul
✅ Mode gelap berubah warna
✅ Responsif di mobile
✅ Tidak memperlambat blog (Lighthouse Test Approved)

Berikut versi upgrade premium ikon media sosial footer Blogger dengan:

✨ Shimmer glow
🧲 Magnet follow cursor (ikon sedikit ikut arah mouse)
🌙 Auto Dark Mode
⚡ Super ringan (tanpa library)
🎯 SEO-friendly

Tinggal copy–paste — sudah saya optimalkan untuk Blogger ✅

HTML Widget Footer

Tata Letak → Footer → Tambah Gadget → HTML/JavaScript

Ganti semua URL dengan akun sosial Anda

<div class="social-footer-premium">
  <a href="https://facebook.com/USERNAME" target="_blank" aria-label="Facebook" class="mag-icon">
    <svg viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2v-3h2v-2.3c0-2 1.2-3.1 3-3.1 .9 0 1.8.1 2 .1v2.8h-1.1c-1 0-1.3.6-1.3 1.2V12h2.7l-.4 3h-2.3v7A10 10 0 0 0 22 12" /></svg>
  </a>
  <a href="https://twitter.com/USERNAME" target="_blank" aria-label="Twitter" class="mag-icon">
    <svg viewBox="0 0 24 24"><path d="M22 4.01c-.8.35-1.7.59-2.6.7a4.5 4.5 0 0 0 2-2.5 9.3 9.3 0 0 1-2.9 1.1A4.6 4.6 0 0 0 12 7.2a13 13 0 0 1-9.4-4.8A4.5 4.5 0 0 0 4.6 8a4.7 4.7 0 0 1-2-.6v.1a4.6 4.6 0 0 0 3.7 4.5 4.5 4.5 0 0 1-2 .1 4.7 4.7 0 0 0 4.3 3.2A9.3 9.3 0 0 1 2 18.6a13 13 0 0 0 7 2" /></svg>
  </a>
  <a href="https://instagram.com/USERNAME" target="_blank" aria-label="Instagram" class="mag-icon">
    <svg viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.8a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z" /></svg>
  </a>
  <a href="https://wa.me/6281234567890" target="_blank" aria-label="WhatsApp" class="mag-icon">
    <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18c-1.6 0-3-.4-4.3-1.3l-.3-.2-3 .8 .8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-5.7c-.2-.1-1.2-.6-1.4-.7-.2-.1-.4-.1-.6.1-.2.2-.7.8-.9 1-.2.2-.3.2-.5.1-.2-.1-.9-.4-1.7-1-.6-.5-1-1.2-1.1-1.4-.1-.2 0-.3.1-.4.1-.1.2-.2.2-.3s.1-.2.2-.3c.1-.1.1-.2.2-.3.1-.1 0-.2 0-.3s-.6-1.5-.8-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9 0 1.1.8 2.1.9 2.2.1.1 1.6 2.4 3.9 3.4.5.2.9.4 1.2.5.5.2 1 .2 1.3.1.4-.1 1.2-.5 1.4-1s.2-.9.2-.9c0-.2-.1-.3-.3-.4z"/></svg>
  </a>
</div>

CSS Premium (Glow + Shimmer + Dark Mode)

Tema → Edit HTML → sebelum </head>

<style>
.social-footer-premium{
  display:flex;gap:18px;justify-content:center;padding:18px;
}
.social-footer-premium svg{
  width:28px;height:28px;transition:.25s;
  fill:#222;
  filter:drop-shadow(0 0 0px rgba(255,215,0,.0));
}
.social-footer-premium a:hover svg{
  transform:scale(1.18);
  filter:drop-shadow(0 0 8px gold);
}
.mag-icon{position:relative;display:inline-block;}
.mag-icon::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  opacity:0;transform:translateX(-100%);
}
.mag-icon:hover::after{
  opacity:1;animation:shimmer .7s;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
html[data-theme='dark'] .social-footer-premium svg{
  fill:#fafafa;
}
</style>

JavaScript Magnet Follow Cursor

Tempel tepat sebelum </body> di theme

<script>
document.addEventListener("mousemove",e=>{
  document.querySelectorAll(".mag-icon").forEach(el=>{
    const r=el.getBoundingClientRect();
    const x=e.clientX-(r.left+r.width/2);
    const y=e.clientY-(r.top+r.height/2);
    const d=Math.min(Math.sqrt(x*x+y*y)/20,4);
    el.style.transform=`translate(${x/60}px,${y/60}px) scale(${1+d/40})`;
  });
});
document.addEventListener("mouseout",()=>{
  document.querySelectorAll(".mag-icon").forEach(el=>{
    el.style.transform="translate(0,0) scale(1)";
  });
});
</script>

Hasilnya

Ikon glow premium
Ada shimmer swipe
Ikut gerakan mouse halus (efek magnet lembut)
Kompatibel Blogger / AMP OFF
SEO safe + ARIA label

Berikutnya adalah footer media sosial yang canggih, ringan, SEO, dan responsif untuk Blogger — siap paste ke Blogger (HTML Gadget / Footer):

✅ Ringan & SEO
✅ Hover Glow & Dark Mode
✅ Responsif semua perangkat
✅ Aksesibilitas (ARIA + title)
✅ Tidak membuat blog berat

Kode Footer Media Sosial Premium

Ganti URL profil sosial kamu pada href

<style>
.footer-social-warkasa {
  display:flex;
  justify-content:center;
  gap:18px;
  padding:20px 10px;
  flex-wrap:wrap;
}
.footer-social-warkasa a {
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-decoration:none;
  font-size:20px;
  transition:.25s;
  background:#f5f5f5;
  color:#222;
  border:1px solid #ddd;
}
.footer-social-warkasa a:hover {
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 6px 18px rgba(255,215,0,.7);
  background:#000;
  color:#ffd700;
}
body.dark-mode .footer-social-warkasa a {
  background:#111;
  color:#fff;
  border:1px solid #333;
}
body.dark-mode .footer-social-warkasa a:hover {
  background:#ffd700;
  color:#000;
  box-shadow:0 8px 22px rgba(255,215,0,.9);
}
.footer-credit {
  text-align:center;
  font-size:13px;
  margin-top:4px;
  color:#777;
}
body.dark-mode .footer-credit{
  color:#ccc;
}
</style>

<div class="footer-social-warkasa">
  <a href="https://facebook.com/warkasa1919" aria-label="Facebook Warkasa1919" title="Ikuti kami di Facebook">
    <i class="fa-brands fa-facebook-f"></i>
  </a>
  <a href="https://instagram.com/warkasa1919" aria-label="Instagram Warkasa1919" title="Ikuti kami di Instagram">
    <i class="fa-brands fa-instagram"></i>
  </a>
  <a href="https://twitter.com/warkasa1919" aria-label="Twitter Warkasa1919" title="Ikuti kami di Twitter">
    <i class="fa-brands fa-x-twitter"></i>
  </a>
  <a href="https://youtube.com/@warkasa1919" aria-label="YouTube Warkasa1919" title="Subscribe kanal YouTube kami">
    <i class="fa-brands fa-youtube"></i>
  </a>
</div>

<div class="footer-credit">
  © <script>document.write(new Date().getFullYear())</script> Warkasa1919.com — Media Teknologi & Digital
</div>

<!-- Load Font Awesome (icon sosial) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js" defer></script>

Dark Mode Auto-Dynamic

Jika tema Anda belum ada dark mode script, tambahkan ini:

<script>
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (prefersDark) document.body.classList.add("dark-mode");
</script>

Bonus SEO Tips

Tambahkan di bawah footer:

<meta name="author" content="Warkasa1919">
<meta name="publisher" content="Warkasa1919.com">
<meta property="og:site_name" content="Warkasa1919.com">
<meta name="theme-color" content="#ffd700">

Selanjutnya adalah footer ikon sosial neon premium untuk blogger — style glowing, futuristik, super ringan, full SEO.

⚡ Futuristic Neon Glow
🌙 Auto Dark/Light Adaptive
📱 Fully Responsive
🌐 SEO + ARIA Accessibility
🧠 Ultra ringan tanpa library (kecuali FA icon)

Footer Neon Gradient Futuristik

Siap paste di Blogger > Tata Letak > HTML/Javascript

<style>
.footer-social-warkasa {
  display:flex;
  justify-content:center;
  gap:18px;
  padding:22px 12px;
  flex-wrap:wrap;
}

.footer-social-warkasa a {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:22px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(145deg,#00eaff,#8b54ff);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 0 12px rgba(0,238,255,.6),0 0 22px rgba(139,84,255,.6);
  transition:.25s ease;
}

.footer-social-warkasa a:hover {
  transform:translateY(-5px) scale(1.12);
  box-shadow:0 0 18px rgba(0,238,255,.9),0 0 32px rgba(139,84,255,.9);
  filter:brightness(1.25);
}

/* Dark Mode Adjust */
body.dark-mode .footer-social-warkasa a {
  box-shadow:0 0 12px rgba(0,238,255,.8),0 0 22px rgba(139,84,255,.8);
}

.footer-credit {
  text-align:center;
  font-size:13px;
  margin-top:8px;
  color:#8b8b8b;
  letter-spacing:.3px;
}

body.dark-mode .footer-credit{
  color:#cfcfcf;
}
</style>

<div class="footer-social-warkasa">
  <a href="https://facebook.com/warkasa1919" aria-label="Facebook Warkasa1919" title="Ikuti Facebook"><i class="fa-brands fa-facebook-f"></i></a>
  <a href="https://instagram.com/warkasa1919" aria-label="Instagram Warkasa1919" title="Ikuti Instagram"><i class="fa-brands fa-instagram"></i></a>
  <a href="https://twitter.com/warkasa1919" aria-label="Twitter Warkasa1919" title="Ikuti X Twitter"><i class="fa-brands fa-x-twitter"></i></a>
  <a href="https://youtube.com/@warkasa1919" aria-label="YouTube Warkasa1919" title="Subscribe YouTube"><i class="fa-brands fa-youtube"></i></a>
</div>

<div class="footer-credit">
  © <script>document.write(new Date().getFullYear())</script> Warkasa1919.com — Media Teknologi & Digital
</div>

<!-- Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js" defer></script>

Auto Dark Mode Script (jika diperlukan)

Lewati kalau sudah punya Dark Mode

<script>
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
 document.body.classList.add("dark-mode");
}
</script>

Bonus SEO Social

<meta name="author" content="Warkasa1919">
<meta name="publisher" content="Warkasa1919.com">
<meta name="theme-color" content="#00eaff">

Ini versi premium futuristik elegan, tanpa berisik efek partikel — clean, hologram, luxury.

Footer Neon Hologram Minimal — Siap Paste

Tempel ke Blogger → Tata Letak → Tambah Gadget → HTML/JS

<style>
.footer-holo-social {
  display:flex;
  gap:20px;
  justify-content:center;
  padding:24px 10px;
  flex-wrap:wrap;
}

.footer-holo-social a{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:20px;
  text-decoration:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 0 10px rgba(255,255,255,.2);
  color:#fff;
  transition:.25s ease;
}

.footer-holo-social a:hover {
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 0 18px rgba(0,255,255,.5),0 0 24px rgba(255,255,255,.4);
  background:rgba(0,255,255,.15);
}

/* Light mode adjustments */
body:not(.dark-mode) .footer-holo-social a {
  background:rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.15);
  color:#111;
  box-shadow:0 0 6px rgba(0,0,0,.12);
}
body:not(.dark-mode) .footer-holo-social a:hover {
  box-shadow:0 0 14px rgba(0,255,255,.4),0 0 20px rgba(0,0,0,.3);
}

/* Footer credit */
.footer-holo-credit{
  text-align:center;
  font-size:13px;
  margin-top:8px;
  opacity:.7;
  letter-spacing:.3px;
}
</style>

<div class="footer-holo-social">
  <a href="https://facebook.com/warkasa1919" aria-label="Facebook Warkasa1919" title="Ikuti Facebook"><i class="fa-brands fa-facebook-f"></i></a>
  <a href="https://instagram.com/warkasa1919" aria-label="Instagram Warkasa1919" title="Ikuti Instagram"><i class="fa-brands fa-instagram"></i></a>
  <a href="https://twitter.com/warkasa1919" aria-label="Twitter Warkasa1919" title="Ikuti X Twitter"><i class="fa-brands fa-x-twitter"></i></a>
  <a href="https://youtube.com/@warkasa1919" aria-label="YouTube Warkasa1919" title="Subscribe YouTube"><i class="fa-brands fa-youtube"></i></a>
</div>

<div class="footer-holo-credit">
  © <script>document.write(new Date().getFullYear())</script> Warkasa1919.com — Media Teknologi & Digital
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/js/all.min.js" defer></script>

Dark Mode Auto (jika belum punya)

<script>
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
 document.body.classList.add("dark-mode");
}
</script>

Instalasi Selesai

Silakan paste di footer blog Anda.

Bagikan artikel ini jika bermanfaat, dan jangan lupa baca artikel menarik lainnya di Warkasa1919.com.

📢 Dukung Warkasa1919 dengan membagikan artikel ini ke teman Anda! Temukan juga tutorial lainnya.

Warkasa1919

Cara Memasang Ikon Media Sosial Keren & Canggih di Footer Blogger + Dark Mode

Demo Tampilan

✨ Ikon minimalis modern
✨ Animasi hover glowing premium
✨ Auto-switch Light/Dark Mode
Sudah dioptimalkan untuk tampilan mobile & desktop!

Langkah 1: Masuk ke Blogger

Langkah 2: Paste Code HTML Media Sosial

Langkah 3: Tambahkan CSS Premium + Dark Mode

Dark Mode Auto Blogger

Tips SEO Optimasi Social Footer

Bonus: Link WhatsApp Klik-Otomatis Dengan Pesan

Testing Checklist

HTML Widget Footer

CSS Premium (Glow + Shimmer + Dark Mode)

JavaScript Magnet Follow Cursor

Hasilnya

Kode Footer Media Sosial Premium

Dark Mode Auto-Dynamic

Bonus SEO Tips

Footer Neon Gradient Futuristik

Auto Dark Mode Script (jika diperlukan)

Bonus SEO Social

Footer Neon Hologram Minimal — Siap Paste

Dark Mode Auto (jika belum punya)

Instalasi Selesai

Lihat Peta

Tanya AI

Dukung Warkasa1919

Cara Memasang Ikon Media Sosial Keren & Canggih di Footer Blogger + Dark Mode

Demo Tampilan

✨ Ikon minimalis modern✨ Animasi hover glowing premium✨ Auto-switch Light/Dark ModeSudah dioptimalkan untuk tampilan mobile & desktop!

Langkah 1: Masuk ke Blogger

Langkah 2: Paste Code HTML Media Sosial

Langkah 3: Tambahkan CSS Premium + Dark Mode

Dark Mode Auto Blogger

Tips SEO Optimasi Social Footer

Bonus: Link WhatsApp Klik-Otomatis Dengan Pesan

Testing Checklist

HTML Widget Footer

CSS Premium (Glow + Shimmer + Dark Mode)

JavaScript Magnet Follow Cursor

Hasilnya

Kode Footer Media Sosial Premium

Dark Mode Auto-Dynamic

Bonus SEO Tips

Footer Neon Gradient Futuristik

Auto Dark Mode Script (jika diperlukan)

Bonus SEO Social

Footer Neon Hologram Minimal — Siap Paste

Dark Mode Auto (jika belum punya)

Instalasi Selesai

Lihat Peta

Tanya AI

Dukung Warkasa1919

✨ Ikon minimalis modern
✨ Animasi hover glowing premium
✨ Auto-switch Light/Dark Mode
Sudah dioptimalkan untuk tampilan mobile & desktop!