Memiliki fitur berbagi ke media sosial sangat penting bagi sebuah blog untuk meningkatkan jumlah pengunjung. Salah satu metode yang paling efektif adalah menggunakan tombol share melayang atau floating share buttons. Dengan posisi yang tetap saat pengunjung melakukan scrolling, peluang artikel Anda dibagikan menjadi jauh lebih besar.
Sayangnya, banyak widget share yang beredar di internet menggunakan JavaScript pihak ketiga yang cukup berat, sehingga bisa memperlambat loading blog Anda. Dalam tutorial ini, kita akan membuat tombol share melayang yang murni menggunakan CSS dan HTML saja, sehingga sangat ringan dan ramah SEO.
Keunggulan Tombol Share Tanpa JavaScript
Metode ini memiliki beberapa kelebihan utama. Pertama, kecepatan loading blog tetap terjaga karena tidak ada script eksternal yang perlu dimuat. Kedua, tampilan akan tetap responsif dan rapi di berbagai ukuran layar. Ketiga, Anda memiliki kontrol penuh terhadap desain warna dan ikon yang ingin ditampilkan.
Langkah 1: Menambahkan Kode CSS
Langkah pertama yang harus Anda lakukan adalah menambahkan kode CSS ke dalam template Blogger. Kode ini berfungsi untuk mengatur posisi tombol agar melayang di sisi kiri layar dan memberikan efek hover yang menarik.
Silakan buka dashboard Blogger, pilih menu Tema, klik tanda panah kecil di sebelah Sesuaikan, lalu pilih Edit HTML. Cari kode </style> atau </b:skin> dan letakkan kode berikut tepat di atasnya.
/* Floating Social Share Style */
.share-sidebar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 9999;
}
.share-sidebar a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
transition: all 0.3s ease;
color: #fff;
text-decoration: none;
margin-bottom: 2px;
}
.share-sidebar a svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.share-sidebar a:hover {
width: 55px;
padding-left: 10px;
}
.fb-share { background: #3b5998; }
.tw-share { background: #1da1f2; }
.wa-share { background: #25d366; }
.tg-share { background: #0088cc; }
@media screen and (max-width: 768px) {
.share-sidebar {
bottom: 0;
top: auto;
left: 0;
width: 100%;
transform: none;
display: flex;
}
.share-sidebar a {
flex: 1;
margin-bottom: 0;
height: 50px;
}
.share-sidebar a:hover {
width: 100%;
padding-left: 0;
}
}
Langkah 2: Menambahkan Kode HTML
Setelah menyimpan kode CSS, langkah selanjutnya adalah menambahkan struktur HTML untuk memanggil tombol tersebut. Kode ini sudah menggunakan ikon SVG internal sehingga Anda tidak perlu lagi memanggil library FontAwesome.
Tetap di dalam editor HTML Blogger, cari kode </body> (biasanya ada di bagian paling bawah) dan letakkan kode HTML berikut tepat di atasnya.
<div class='share-sidebar'>
<!-- Facebook -->
<a class='fb-share' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' target='_blank' title='Share to Facebook'>
<svg viewBox='0 0 24 24'><path d='M9 8H6v4h3v12h5V12h3.642L18 8h-4V6.333C14 5.388 14.192 5 15.647 5H18V0h-3.857C10.511 0 9 1.79 9 4.615V8z'/></svg>
</a>
<!-- Twitter / X -->
<a class='tw-share' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title' target='_blank' title='Share to Twitter'>
<svg viewBox='0 0 24 24'><path d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.84 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'/></svg>
</a>
<!-- WhatsApp -->
<a class='wa-share' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " %0A%0A " + data:blog.url' target='_blank' title='Share to WhatsApp'>
<svg viewBox='0 0 24 24'><path d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.417-.003 6.557-5.338 11.892-11.893 11.892-1.997-.001-3.951-.5-5.688-1.448l-6.305 1.652zm6.599-3.835c1.455.864 2.158 1.31 3.974 1.311 5.454 0 9.897-4.442 9.9-9.9.001-2.641-1.027-5.122-2.897-6.992-1.869-1.871-4.349-2.899-6.992-2.899-5.454 0-9.896 4.444-9.898 9.899-.001 2.108.543 3.153 1.554 4.886l-1.02 3.732 3.844-.999z'/></svg>
</a>
<!-- Telegram -->
<a class='tg-share' expr:href='"https://telegram.me/share/url?url=" + data:blog.url + "&text=" + data:post.title' target='_blank' title='Share to Telegram'>
<svg viewBox='0 0 24 24'><path d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.891 8.146l-1.844 8.707c-.115.517-.423.647-.853.406l-2.812-2.073-1.357 1.306c-.15.15-.275.275-.562.275l.202-2.859 5.204-4.699c.226-.201-.049-.313-.35-.112l-6.433 4.05-2.771-.866c-.604-.188-.616-.604.126-.894l10.822-4.17c.501-.188.939.112.78.924z'/></svg>
</a>
</div>
Langkah 3: Simpan dan Lihat Hasilnya
Setelah semua kode terpasang, klik tombol Simpan (ikon disket) pada editor HTML Blogger Anda. Sekarang silakan buka salah satu artikel di blog Anda untuk melihat hasilnya. Tombol share tersebut akan melayang di sebelah kiri pada layar komputer, dan akan berpindah ke posisi bawah (sticky bottom) saat dibuka melalui perangkat mobile atau smartphone.
Dengan teknik ini, Anda tidak hanya mempermudah pembaca untuk membagikan konten, tetapi juga menjaga performa kecepatan blog agar tetap hijau di Google PageSpeed Insights karena tidak ada beban JavaScript tambahan.