Cara Membuat Widget Tombol Share Spiderman di Blogger

---

Widget tombol share animasi Spiderman ini saya buat untuk menambahkan tombol berbagi yang lebih atraktif di Blogger. Konsepnya tetap sederhana: gambar animasi bergerak ringan di sisi halaman, lalu ketika diklik akan membagikan URL artikel yang sedang dibuka.

Untuk engine-nya saya memakai vanilla JavaScript tanpa jQuery. Jika browser mendukung Web Share API, tombol dapat memanggil panel share bawaan perangkat. Jika tidak, saya sediakan fallback ke Facebook Share supaya widget tetap berguna di browser desktop.

Animasi juga dibuat dengan CSS sehingga kecepatan, posisi, ukuran gambar dan perilaku saat hover bisa diubah tanpa harus menyentuh banyak bagian kode.

Auto Share URLMengambil URL halaman yang sedang dibuka.

CSS AnimationGerakan dibuat tanpa library animasi tambahan.

Vanilla JSTidak membutuhkan jQuery untuk menjalankan widget.

ResponsiveUkuran widget menyesuaikan layar desktop dan mobile.

Informasi Singkat

---

Widget ini menggunakan URL halaman saat ini sebagai target share. Web Share API hanya berjalan jika browser dan konteks halaman mendukungnya, sehingga fallback tetap diperlukan untuk browser yang tidak menyediakan fitur tersebut.

Untuk Facebook, fallback memakai halaman share dengan parameter URL yang sudah di-encode. Dengan begitu link artikel tetap bisa dibagikan tanpa memasang SDK Facebook pada halaman.

Preview Widget Share Spiderman

Di bawah ini saya buat preview lokal agar animasinya bisa dilihat tanpa langsung memasang widget floating ke seluruh template. Klik gambar untuk mencoba fungsi share.

LIVE PREVIEW Share This Article

Gerakan naik-turun, sedikit zoom dan opacity membuat tombol terasa hidup tanpa animasi berlebihan.

Cara Kerja Widget Share Ini

01

Ambil URL halaman

JavaScript membaca location.href dari artikel yang sedang dibuka.

02

Cek Web Share API

Jika navigator.share() tersedia, browser membuka panel share native.

03

Fallback Facebook

Jika Web Share API tidak tersedia, widget membuka Facebook Share dalam popup kecil.

04

Animasi CSS

Efek floating, zoom dan opacity diatur dari CSS sehingga lebih mudah dimodifikasi.

Kode Widget Share Spiderman

Saya pisahkan struktur HTML, CSS dan JavaScript supaya lebih mudah diedit. Setiap baris kode pada parser juga saya beri pemisah agar tidak menyatu panjang.

<div class="cfSpiderShare" id="cfSpiderShare">
<button type="button" class="cfSpiderShareBtn" aria-label="Bagikan artikel" title="Bagikan artikel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqpeVbYO-I3itaJ1SjUedZae3_hN8Z_iDJNyS2XrEVUiXHKmqiqLsFS-3OLytCK5IH1zjfm6pewUgLmdI8yh3pbvhiIVMEikoR5Tgy_PVJsiFVpw3TM4HRXBg2CWEn9j0B4FhO2EhppYY/s1600/tombol_share_spiderman.gif" alt="Share artikel" />
</button>
</div>

<style>
.cfSpiderShare{position:fixed;right:16px;bottom:18px;z-index:9999}
.cfSpiderShareBtn{display:block;width:92px;padding:0;border:0;background:transparent;cursor:pointer;animation:cfSpiderFloat 2.8s ease-in-out infinite}
.cfSpiderShareBtn img{display:block;width:100%;height:auto;opacity:.92;filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));transition:transform .28s ease,opacity .28s ease}
.cfSpiderShareBtn:hover img{transform:scale(1.08);opacity:1}
@keyframes cfSpiderFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:620px){.cfSpiderShare{right:10px;bottom:12px}.cfSpiderShareBtn{width:72px}}
@media(prefers-reduced-motion:reduce){.cfSpiderShareBtn{animation:none}}
</style>

<script>
(function(){
"use strict";
var box=document.getElementById("cfSpiderShare");
if(!box)return;
var btn=box.querySelector(".cfSpiderShareBtn");
btn.addEventListener("click",function(){
var url=location.href;
var title=document.title;
if(navigator.share){
navigator.share({title:title,url:url}).catch(function(){});
return;
}
var shareUrl="https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(url);
window.open(shareUrl,"cfShare","width=640,height=520,noopener,noreferrer");
});
})();
</script>

Sebelum dipasang
Backup tema Blogger terlebih dahulu. Jika widget ditempatkan di template, pastikan hanya ada satu elemen dengan ID cfSpiderShare agar event click tidak terpasang ganda.

Cara Memasang Widget di Blogger

Untuk widget floating seperti ini saya lebih memilih memasangnya dari editor HTML tema, tepat sebelum penutup </body>. Dengan begitu widget bisa muncul pada halaman artikel tanpa harus menyalin kode ke setiap posting.

Buka TemaMasuk ke dashboard Blogger lalu pilih menu Tema.

Backup temaSimpan salinan template sebelum melakukan perubahan.

Pilih Edit HTMLBuka editor kode template Blogger.

Cari penutup bodyGunakan pencarian editor dan cari </body>.

Tempel HTML + JSLetakkan struktur widget dan script sebelum </body>. CSS bisa ditempatkan pada blok style template.

Simpan dan ujiBuka artikel di desktop dan mobile untuk memastikan tombol tidak menutupi elemen penting.

Cara Modifikasi Widget

Ukuran gambarUbah width:92px pada .cfSpiderShareBtn.

PosisiAtur nilai right dan bottom pada .cfSpiderShare.

Kecepatan animasiUbah durasi 2.8s pada properti animation.

Jarak gerakUbah nilai translateY(-10px) pada keyframes.

Efek hoverAtur nilai scale(1.08) dan opacity sesuai tampilan template.

Apakah Widget Share Membantu SEO?

Tombol share bukan faktor yang otomatis membuat artikel masuk page one Google. Nilai utamanya ada pada kemudahan pembaca membagikan halaman. Untuk SEO, saya tetap fokus pada konten yang membantu pembaca, performa halaman, struktur heading yang jelas dan pengalaman mobile yang baik.

Google Search juga terus menekankan prinsip people-first content dan praktik SEO dasar yang sehat. Jadi widget ini saya posisikan sebagai fitur pengalaman pengguna, bukan sebagai trik ranking.

RinganTanpa library tambahan dan hanya satu event click.

Mobile FriendlyUkuran tombol diperkecil pada layar sempit.

AksesibelTombol diberi aria-label dan title yang jelas.

Markup sederhanaStruktur kecil mengurangi risiko bentrok dengan template.

Catatan SEO

---

Saya tidak mengandalkan jumlah share sebagai sinyal ranking. Optimasi tetap diarahkan ke kualitas isi, keterbacaan, struktur yang jelas dan pengalaman pengguna yang baik.

Sumber: Google Search Central - Helpful Content.

Ringkasnya

Widget share Spiderman ini cocok untuk blog yang ingin memiliki tombol berbagi dengan karakter visual yang lebih kuat. Engine dibuat dengan vanilla JavaScript, animasinya menggunakan CSS, dan URL artikel diambil otomatis dari halaman yang sedang dibuka.

Kalau saya ingin tampilannya lebih kalem, cukup kecilkan ukuran gambar dan amplitudo animasinya. Kalau ingin lebih menonjol, efek zoom dan floating bisa diperbesar tanpa menambah library tambahan.