Memiliki tombol share atau berbagi ke media sosial merupakan hal wajib bagi setiap blogger. Namun, banyak widget tombol share pihak ketiga yang justru membuat loading blog menjadi lambat karena memuat script eksternal yang berat. Artikel ini akan membagikan cara membuat tombol share media sosial yang sangat ringan, tanpa JavaScript tambahan, dan pastinya sangat cepat saat diakses.
Keunggulan Tombol Share Fast-Loading
Metode yang kita gunakan ini mengandalkan HTML dan CSS murni dengan ikon SVG. Keuntungannya adalah tidak ada beban tambahan pada server, skor Google PageSpeed akan tetap hijau, dan tampilan tetap terlihat profesional serta responsif di berbagai perangkat seperti smartphone dan desktop.
Langkah 1: Menambahkan Kode CSS
Langkah pertama adalah memasukkan kode CSS ke dalam template Blogger Anda agar tampilan tombol terlihat rapi dan modern. Silakan masuk ke dashboard Blogger, pilih menu Tema, klik Edit HTML, lalu cari kode </b:skin> atau </style> dan tempelkan kode berikut tepat di atasnya.
/* Social Share Buttons by Tutorial Blog */
.share-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
padding: 10px 0;
border-top: 1px solid #eee;
}
.share-btn {
display: flex;
align-items: center;
padding: 8px 15px;
border-radius: 5px;
color: #fff !important;
text-decoration: none !important;
font-size: 14px;
font-weight: bold;
transition: opacity 0.3s;
}
.share-btn:hover {
opacity: 0.8;
}
.share-btn svg {
width: 18px;
height: 18px;
fill: #fff;
margin-right: 8px;
}
.fb { background-color: #3b5998; }
.tw { background-color: #1da1f2; }
.wa { background-color: #25d366; }
.pt { background-color: #bd081c; }Langkah 2: Memasang Kode HTML Tombol Share
Setelah menyimpan CSS, sekarang kita perlu memasang struktur HTML tombol share. Cari kode <data:post.body/> di dalam editor HTML Blogger Anda. Biasanya kode ini muncul lebih dari satu kali, pilihlah yang berada di dalam lingkup postingan atau biasanya yang kedua atau ketiga. Tempelkan kode di bawah ini tepat di bawah kode <data:post.body/>.
<div class='share-container'>
<!-- Facebook -->
<a class='share-btn fb' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Share to Facebook'>
<svg viewBox='0 0 24 24'><path d='M9 8H6v4h3v12h5V12h3.6l.4-4h-4V6.3c0-1.1.3-1.6 1.7-1.6H18V.4c-.8-.1-2.1-.2-3.4-.2-3.4 0-5.6 1.8-5.6 5.4V8z'/></svg> Facebook
</a>
<!-- Twitter / X -->
<a class='share-btn tw' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' 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> Twitter
</a>
<!-- WhatsApp -->
<a class='share-btn wa' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " %20 " + data:post.url' target='_blank' title='Share to WhatsApp'>
<svg viewBox='0 0 24 24'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.72.94 3.659 1.437 5.63 1.438h.004c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/></svg> WhatsApp
</a>
</div>Langkah 3: Simpan dan Lihat Hasilnya
Klik tombol Simpan di pojok kanan atas editor HTML Blogger. Sekarang, buka salah satu artikel di blog Anda, dan Anda akan melihat tombol share yang cantik muncul di bawah isi artikel. Tombol-tombol ini bekerja dengan cara memanggil URL berbagi resmi dari masing-masing media sosial tanpa perlu memuat script pihak ketiga yang seringkali memperlambat blog.
Tips Tambahan untuk Kustomisasi
Anda bisa mengubah warna latar belakang tombol dengan memodifikasi kode CSS pada bagian background-color. Misalnya, jika ingin mengubah warna tombol Facebook menjadi lebih gelap, cukup ganti kode warna HEX-nya. Selain itu, Anda bisa menambahkan media sosial lain seperti Pinterest atau LinkedIn dengan mengikuti pola URL berbagi yang sama.
Dengan menerapkan tombol share statis seperti ini, blog Anda tidak hanya terlihat lebih profesional, tetapi juga memberikan pengalaman pengguna yang lebih baik karena waktu pemuatan halaman tetap terjaga. Selamat mencoba dan semoga bermanfaat bagi kemajuan blog Anda!