Tombol share melayang di Blogger merupakan salah satu elemen navigasi yang dapat memudahkan pengunjung membagikan artikel ke media sosial. Berbeda dengan tombol share biasa yang hanya berada di satu lokasi, floating share button tetap berada di area layar tertentu ketika pengunjung melakukan scrolling.
Fitur berbagi seperti Facebook, X, WhatsApp, dan Telegram dapat membantu pembaca membagikan artikel yang mereka anggap bermanfaat. Namun, penggunaan widget share dari pihak ketiga terkadang membutuhkan JavaScript atau library tambahan yang tidak selalu diperlukan.
Salah satu alternatifnya adalah membuat tombol share melayang menggunakan HTML dan CSS. Pada tutorial ini, tombol menggunakan SVG inline sehingga tidak membutuhkan library ikon eksternal seperti Font Awesome.
Keuntungan Membuat Floating Share Button dengan HTML dan CSS
Membuat tombol share sendiri memberikan kontrol lebih besar terhadap tampilan dan kode yang digunakan. Selain itu, Anda tidak perlu menambahkan library JavaScript pihak ketiga hanya untuk menampilkan beberapa tombol berbagi.
- Tidak membutuhkan JavaScript khusus untuk mengatur posisi dan tampilan tombol.
- Tidak membutuhkan library ikon eksternal karena menggunakan SVG inline.
- Desain mudah disesuaikan dengan warna dan gaya template Blogger.
- Responsif untuk perangkat mobile dengan bantuan CSS media query.
- Ukuran kode relatif sederhana dibandingkan widget share yang memuat berbagai library tambahan.
- Mudah dipasang langsung pada template Blogger melalui menu Edit HTML.
Cara Membuat Tombol Share Melayang di Blogger
Berikut langkah lengkap untuk memasang tombol share melayang atau floating social share buttons pada template Blogger.
Langkah 1: Buka Edit HTML Blogger
Pertama, masuk ke dashboard Blogger dan pilih blog yang ingin Anda pasang tombol share. Kemudian buka menu Tema.
Klik tanda panah di samping tombol Sesuaikan, lalu pilih Edit HTML.
Sebelum mengubah kode template, sebaiknya buat cadangan template terlebih dahulu. Langkah ini berguna untuk mengantisipasi kesalahan ketika melakukan proses editing.
Langkah 2: Tambahkan CSS Floating Share Button
Setelah berada di editor HTML Blogger, cari kode </style> atau </b:skin>. Kemudian letakkan CSS berikut tepat sebelum kode penutup tersebut.
/* Floating Social Share */
.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;
}
}Penjelasan CSS Tombol Share
CSS di atas memiliki beberapa bagian penting yang mengatur posisi dan perilaku tombol share pada halaman Blogger.
Position Fixed
position: fixed;Properti tersebut membuat container tombol tetap berada pada posisi layar tertentu ketika pengunjung melakukan scrolling.
Posisi di Tengah Layar
top: 50%;
transform: translateY(-50%);Kombinasi tersebut membuat tombol berada di sekitar bagian tengah sisi kiri layar pada perangkat desktop.
Efek Hover
.share-sidebar a:hover {
width: 55px;
padding-left: 10px;
}Efek hover memberikan perubahan ukuran ketika kursor diarahkan ke tombol. Efek ini dapat membuat tombol lebih mudah dikenali oleh pengguna desktop.
Tampilan Mobile
Pada layar dengan lebar maksimal 768px, posisi tombol diubah dari sisi kiri menjadi sticky bottom bar. Setiap tombol akan membagi ruang yang tersedia sehingga lebih mudah digunakan melalui layar sentuh.
Langkah 3: Tambahkan HTML Tombol Share
Setelah CSS selesai ditambahkan, langkah berikutnya adalah memasukkan struktur HTML untuk tombol berbagi. Karena kode menggunakan SVG inline, Anda tidak perlu memanggil library ikon tambahan.
Cari kode </body> pada template Blogger. Letakkan kode berikut tepat sebelum tag tersebut.
<div class='share-sidebar'>
<!-- Facebook -->
<a class='fb-share'
expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:blog.url'
target='_blank'
rel='noopener noreferrer'
title='Bagikan ke Facebook'>
<svg viewBox='0 0 24 24' aria-hidden='true'>
<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>
<!-- X / Twitter -->
<a class='tw-share'
expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title'
target='_blank'
rel='noopener noreferrer'
title='Bagikan ke X'>
<svg viewBox='0 0 24 24' aria-hidden='true'>
<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'
rel='noopener noreferrer'
title='Bagikan ke WhatsApp'>
<svg viewBox='0 0 24 24' aria-hidden='true'>
<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'
rel='noopener noreferrer'
title='Bagikan ke Telegram'>
<svg viewBox='0 0 24 24' aria-hidden='true'>
<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>Fungsi Setiap Tombol Share
Tombol yang digunakan pada contoh di atas memiliki fungsi untuk membuka halaman berbagi dari masing-masing platform.
- Facebook digunakan untuk membagikan URL artikel melalui fitur share Facebook.
- X atau Twitter digunakan untuk membuat posting berbagi yang berisi URL dan judul artikel.
- WhatsApp digunakan untuk membuka WhatsApp dengan teks yang berisi judul artikel dan URL.
- Telegram digunakan untuk membagikan URL dan judul artikel melalui Telegram.
Langkah 4: Simpan dan Uji Tombol Share
Setelah CSS dan HTML selesai ditambahkan, periksa kembali kode template kemudian klik Simpan.
Selanjutnya buka salah satu artikel di blog Anda. Pada perangkat desktop, tombol share akan berada di sisi kiri layar. Sementara itu, pada perangkat mobile dengan lebar layar maksimal 768px, tombol akan berpindah ke bagian bawah layar.
Cobalah klik setiap tombol untuk memastikan URL artikel dan judul posting dikirim dengan benar ke platform berbagi yang dituju.
Cara Mengubah Warna Tombol Share
Warna setiap tombol dapat diubah dengan mudah melalui bagian CSS berikut:
.fb-share {
background: #3b5998;
}
.tw-share {
background: #1da1f2;
}
.wa-share {
background: #25d366;
}
.tg-share {
background: #0088cc;
}Anda dapat mengganti nilai warna tersebut dengan warna lain yang sesuai dengan desain template Blogger. Sebaiknya gunakan warna yang memiliki kontras cukup agar ikon tetap terlihat jelas.
Tips Agar Floating Share Button Tidak Mengganggu Tampilan Blog
Tombol share melayang memang dapat mempermudah akses ke fitur berbagi, tetapi penempatannya harus diperhatikan agar tidak menutupi konten utama.
- Gunakan ukuran tombol yang tidak terlalu besar.
- Pastikan tombol tidak menutupi judul atau teks artikel.
- Gunakan media query untuk menyesuaikan tampilan pada smartphone.
- Jangan menggunakan terlalu banyak tombol jika tidak diperlukan.
- Pastikan warna tombol memiliki kontras yang baik.
- Uji tampilan pada desktop, tablet, dan smartphone.
Apakah Tombol Share Tanpa JavaScript Lebih Baik untuk SEO?
Menggunakan HTML dan CSS untuk membuat tombol share dapat mengurangi kebutuhan terhadap script tambahan dari widget pihak ketiga. Hal ini dapat membantu menjaga kode halaman tetap sederhana, terutama jika alternatif sebelumnya memuat library atau script eksternal yang tidak diperlukan.
Namun, tombol share tanpa JavaScript tidak otomatis membuat sebuah blog mendapatkan ranking lebih tinggi di Google. Performa halaman dipengaruhi oleh banyak faktor, termasuk ukuran gambar, CSS, JavaScript lain yang digunakan template, font eksternal, iklan, server, dan berbagai komponen halaman lainnya.
Karena itu, penggunaan HTML dan CSS saja sebaiknya dianggap sebagai salah satu langkah untuk mengurangi komponen yang tidak diperlukan, bukan sebagai jaminan bahwa skor PageSpeed atau ranking SEO akan meningkat secara otomatis.
Kesimpulan
Membuat tombol share melayang di Blogger tanpa JavaScript tambahan dapat dilakukan menggunakan kombinasi HTML, CSS, dan SVG inline. Dengan metode ini, Anda dapat menyediakan tombol berbagi untuk Facebook, X, WhatsApp, dan Telegram tanpa harus memasang library ikon eksternal.
Desain juga dapat dibuat responsif sehingga tombol berada di sisi kiri pada desktop dan berpindah menjadi bar di bagian bawah ketika dibuka melalui smartphone. Warna, ukuran, posisi, dan jumlah tombol dapat disesuaikan dengan kebutuhan blog.
Sebelum menerapkan kode pada blog utama, sebaiknya lakukan pencadangan template dan uji terlebih dahulu untuk memastikan tidak terjadi konflik dengan CSS atau elemen lain pada template Blogger Anda.
FAQ Tombol Share Melayang di Blogger
1. Apakah tombol share melayang di Blogger membutuhkan JavaScript?
Tidak. Kode pada tutorial ini menggunakan HTML, CSS, dan SVG inline sehingga tidak membutuhkan JavaScript khusus untuk menampilkan dan mengatur tombol share.
2. Media sosial apa saja yang tersedia pada kode ini?
Contoh kode menyediakan tombol Facebook, X atau Twitter, WhatsApp, dan Telegram.
3. Apakah tombol share bisa digunakan di smartphone?
Bisa. CSS media query akan mengubah posisi tombol menjadi bar di bagian bawah layar pada perangkat dengan lebar maksimal 768px.
4. Apakah tombol share ini menggunakan Font Awesome?
Tidak. Ikon menggunakan SVG inline sehingga tidak membutuhkan library ikon eksternal seperti Font Awesome.
5. Apakah tombol share tanpa JavaScript otomatis meningkatkan SEO?
Tidak otomatis. Penggunaan HTML dan CSS dapat membantu mengurangi kebutuhan terhadap script tambahan, tetapi performa dan SEO blog dipengaruhi oleh banyak faktor lainnya.
6. Apakah warna tombol share bisa diubah?
Bisa. Warna dapat diubah melalui class CSS seperti .fb-share, .tw-share, .wa-share, dan .tg-share.
7. Di mana kode HTML tombol share dipasang?
Kode HTML tombol share pada tutorial ini diletakkan tepat sebelum tag </body> pada template Blogger.