Cara Membuat Floating Social Share Button di Blog (Versi Modern 2026)

Floating social share button adalah tombol berbagi yang muncul di sisi halaman blog dan tetap terlihat saat pengguna melakukan scroll. Fitur ini sangat efektif untuk meningkatkan share konten ke media sosial.

Teknik ini menggunakan kombinasi dan CSS untuk membuat elemen melayang (fixed position).

---

Manfaat Floating Share Button

• Meningkatkan share artikel ke media sosial
• Mempermudah pengguna membagikan konten
• Meningkatkan traffic blog
• Tampilan lebih modern dan interaktif
• Cocok untuk SEO dan engagement

---

Update Penting (2026)

Script lama seperti:

• Google+ (sudah ditutup)
• StumbleUpon (sudah tidak ada)
• Facebook old widgets

❌ Sudah tidak digunakan lagi

Sekarang digunakan:

• Facebook Share API modern
• Twitter/X Share Intent
• WhatsApp Share
• Telegram Share
• Copy Link button

---

Cara Membuat Floating Share Button (Versi Modern)

1. Masuk ke Blogger

• Login ke akun Blogger
• Pilih Tata Letak (Layout)
• Klik Tambah Gadget
• Pilih HTML/JavaScript

---

2. Masukkan Kode Floating Share Button

Copy dan paste kode berikut:

<style>
#floating-share {
  position: fixed;
  bottom: 20%;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
}

#floating-share a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 18px;
}

/* Warna sosial media */
.fb { background: #1877f2; }
.tw { background: #000; }
.wa { background: #25d366; }
.tg { background: #0088cc; }
.cp { background: #555; }
</style>

<div id="floating-share">

  <a class="fb" 
     href="https://www.facebook.com/sharer/sharer.php?u=URL_ARTIKEL" 
     target="_blank">F</a>

  <a class="tw" 
     href="https://twitter.com/intent/tweet?url=URL_ARTIKEL" 
     target="_blank">X</a>

  <a class="wa" 
     href="https://api.whatsapp.com/send?text=URL_ARTIKEL" 
     target="_blank">W</a>

  <a class="tg" 
     href="https://t.me/share/url?url=URL_ARTIKEL" 
     target="_blank">T</a>

  <a class="cp" 
     href="#" onclick="navigator.clipboard.writeText(window.location.href); alert('Link copied!');">C</a>

</div>

---

3. Ganti URL Otomatis (Penting)

Ganti bagian ini:

URL_ARTIKEL

Dengan URL postingan blog Anda.

---

4. Versi Lebih Canggih (Auto URL)

Jika ingin otomatis tanpa edit manual, gunakan ini:

const url = encodeURIComponent(window.location.href);

Lalu integrasikan ke setiap tombol.

---

Fitur Floating Share Modern

• Facebook Share
• X (Twitter) Share
• WhatsApp Share
• Telegram Share
• Copy Link Button
• Fixed floating position
• Responsive mobile-friendly

---

Tampilan Posisi

CSS ini membuat tombol berada di:

• kiri layar
• melayang (fixed)
• tetap terlihat saat scroll

---

Kesimpulan

Floating share button adalah fitur penting untuk meningkatkan interaksi pembaca dengan konten blog. Dengan menggunakan dan CSS modern, fitur ini kini jauh lebih ringan, cepat, dan kompatibel dengan semua browser.

Di tahun 2026, penggunaan script sosial media sudah lebih sederhana karena banyak API lama sudah dihentikan, sehingga fokusnya adalah WhatsApp, X (Twitter), Facebook, dan Telegram.