Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / BLOGGING

Cara Membuat Tombol Share Media Sosial di Blogger

Oleh SABILISLOW Posting Komentar
Cara Membuat Tombol Share Media Sosial di Blogger

Cara Membuat Tombol Share Media Sosial di Blog Blogger dengan Mudah

Ingin artikel blog lebih mudah dibagikan ke Facebook, WhatsApp, X, dan Pinterest? Salah satu caranya adalah memasang tombol share media sosial di Blogger. Fitur ini memudahkan pembaca membagikan artikel yang bermanfaat kepada teman, keluarga, atau pengikut mereka sehingga blog memiliki peluang mendapatkan pengunjung tambahan dari media sosial.

Pada panduan ini, Anda akan mempelajari fungsi tombol share, cara memasangnya melalui template atau gadget HTML/JavaScript, contoh kode yang responsif, serta solusi untuk mengatasi tombol yang tidak berfungsi. Panduan disusun untuk pengguna Blogspot, termasuk pemula yang belum terbiasa mengedit kode HTML, CSS, dan JavaScript.

Apa Itu Tombol Share Media Sosial?

Tombol share media sosial adalah tautan atau tombol yang memungkinkan pengunjung membagikan halaman web ke platform lain tanpa harus menyalin alamat artikel secara manual. Ketika tombol diklik, pengguna akan diarahkan ke halaman berbagi milik platform terkait atau membuka aplikasi yang sesuai.

Misalnya, pembaca menemukan tutorial yang menarik di blog Anda. Dengan menekan tombol WhatsApp, pembaca dapat mengirimkan tautan artikel tersebut kepada teman atau grup. Tombol Facebook dan X juga memudahkan pembaca membagikan tautan melalui akun mereka.

Secara umum, tombol share dapat menggunakan dua pendekatan:

  • Tautan berbagi langsung: mengarahkan pengguna ke halaman berbagi platform dengan alamat artikel yang sudah disiapkan.
  • Fitur berbagi perangkat: memanfaatkan Web Share API pada browser yang mendukungnya untuk menampilkan menu berbagi bawaan perangkat.

Untuk blog Blogger, tautan berbagi langsung biasanya menjadi pilihan yang sederhana karena tidak membutuhkan API khusus atau layanan pihak ketiga.

Manfaat Tombol Share untuk Blog

1. Memudahkan pembaca membagikan artikel

Pembaca tidak perlu menyalin URL dan membuka media sosial secara manual. Proses berbagi yang lebih praktis dapat meningkatkan kemungkinan artikel direkomendasikan kepada orang lain.

2. Membuka peluang mendapatkan pengunjung baru

Ketika artikel dibagikan kepada teman atau komunitas, orang yang sebelumnya belum mengenal blog Anda dapat menemukan kontennya. Jika mereka tertarik, mereka mungkin mengunjungi artikel lain atau kembali di kemudian hari.

3. Mendukung distribusi konten

Artikel edukasi, tutorial teknologi, sains, dan konten Islami dapat menjangkau pembaca yang memiliki minat serupa melalui jaringan sosial pembaca.

4. Menambah kenyamanan penggunaan blog

Tombol yang diletakkan dengan baik menjadi salah satu fitur pendukung pengalaman pengguna. Namun, desainnya perlu dibuat sederhana agar tidak mengganggu kegiatan membaca.

Tombol share mempermudah distribusi artikel, tetapi tidak menjamin artikel menjadi viral atau langsung meningkatkan peringkat di mesin pencari. Konten yang bermanfaat, relevan, dan mudah dibaca tetap menjadi fondasi utama.

Persiapan Sebelum Memasang Tombol Share di Blogger

Sebelum mulai mengedit template, siapkan beberapa hal berikut agar proses pemasangan lebih aman.

  • Pastikan Anda dapat masuk ke akun Blogger yang mengelola blog.
  • Cadangkan tema Blogger sebelum mengubah kode HTML.
  • Tentukan posisi tombol, misalnya di bawah judul atau setelah isi artikel.
  • Periksa apakah template sudah memiliki tombol berbagi bawaan agar tidak muncul dua kali.
  • Gunakan tema uji coba jika belum terbiasa mengedit template.

Untuk memahami pengelolaan blog lebih lanjut, Anda juga dapat membaca artikel lain di panduan Blogger di maznara.com.

Kode CSS Tombol Share Media Sosial

CSS berikut mengatur tampilan tombol agar memiliki warna berbeda, jarak yang rapi, sudut membulat, dan ukuran yang menyesuaikan lebar layar. Contoh ini menggunakan teks sebagai label sehingga tidak memerlukan pustaka ikon tambahan seperti Font Awesome.

Jika memasang tombol melalui template, buka Blogger > Tema > Edit HTML. Cari penutup blok CSS, biasanya </b:skin>, lalu letakkan kode CSS berikut tepat di atasnya. Jika template memakai blok <style> terpisah, letakkan CSS di dalam blok tersebut.

.mz-share-container {
  margin: 24px 0;
  font-family: inherit;
}

.mz-share-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}

.mz-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mz-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity .2s ease;
}

.mz-share a:hover {
  opacity: .85;
}

.mz-share a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.mz-share .mz-facebook {
  background: #1877f2;
}

.mz-share .mz-x {
  background: #222;
}

.mz-share .mz-pinterest {
  background: #bd081c;
}

.mz-share .mz-whatsapp {
  background: #25d366;
  color: #103d25;
}

.mz-share .mz-copy {
  background: #5b6472;
}

@media (max-width: 480px) {
  .mz-share a {
    flex: 1 1 calc(50% - 8px);
    padding: 10px 8px;
    text-align: center;
  }
}

Jika Anda memasang tombol melalui gadget HTML/JavaScript, CSS yang sama dapat diletakkan di dalam elemen <style>...</style> pada gadget. Hindari memasukkan tag <style> lengkap ke dalam blok CSS template.

Cara Memasang Tombol Share melalui Template Blogger

Metode ini cocok jika Anda ingin tombol berbagi muncul secara otomatis pada setiap halaman artikel. Lokasi kode bergantung pada struktur tema yang digunakan, sehingga Anda perlu memeriksa template terlebih dahulu.

Langkah 1: Cadangkan tema

Masuk ke Blogger, pilih Tema, lalu gunakan menu pencadangan atau download tema jika tersedia. Simpan file cadangan sebelum mengubah HTML.

Langkah 2: Tambahkan CSS

Masukkan CSS pada bagian yang dijelaskan di atas. Simpan perubahan jika editor mengizinkannya.

Langkah 3: Temukan lokasi isi artikel

Di menu Tema > Edit HTML, gunakan fitur pencarian browser atau editor untuk mencari kode:

<data:post.body/>

Kode tersebut biasanya digunakan untuk menampilkan isi postingan. Dalam beberapa tema, kode ini muncul lebih dari satu kali, misalnya untuk tampilan daftar artikel dan halaman detail artikel. Pastikan Anda memilih bagian yang digunakan untuk halaman postingan penuh.

Langkah 4: Tambahkan markup tombol share

Letakkan markup berikut di sekitar area artikel, misalnya setelah isi postingan. Kode ini memanfaatkan JavaScript untuk membaca judul halaman dan URL saat ini, sehingga tidak perlu menulis URL setiap artikel secara manual.

<div class="mz-share-container">
  <p class="mz-share-title">Bagikan artikel ini:</p>
  <div class="mz-share">
    <a class="mz-facebook" data-share="facebook"
       href="#" target="_blank" rel="noopener noreferrer">
      Facebook
    </a>
    <a class="mz-x" data-share="x"
       href="#" target="_blank" rel="noopener noreferrer">
      X
    </a>
    <a class="mz-pinterest" data-share="pinterest"
       href="#" target="_blank" rel="noopener noreferrer">
      Pinterest
    </a>
    <a class="mz-whatsapp" data-share="whatsapp"
       href="#" target="_blank" rel="noopener noreferrer">
      WhatsApp
    </a>
    <a class="mz-copy" data-share="copy" href="#">
      Salin tautan
    </a>
  </div>
  <p class="mz-copy-status" aria-live="polite"></p>
</div>

Langkah 5: Tambahkan JavaScript

Letakkan script berikut setelah markup tombol. Karena kode ini menggunakan JavaScript biasa, judul dan alamat artikel akan disesuaikan dengan halaman yang sedang dibuka.

(function () {
  var containers = document.querySelectorAll(".mz-share-container");

  containers.forEach(function (container) {
    if (container.dataset.shareReady === "true") return;
    container.dataset.shareReady = "true";

    var articleUrl = window.location.href.split("#")[0];
    var articleTitle = document.title;
    var encodedUrl = encodeURIComponent(articleUrl);
    var encodedTitle = encodeURIComponent(articleTitle);

    var links = {
      facebook: "https://www.facebook.com/sharer/sharer.php?u=" + encodedUrl,
      x: "https://twitter.com/intent/tweet?url=" + encodedUrl +
         "&text=" + encodedTitle,
      pinterest: "https://pinterest.com/pin/create/button/?url=" +
         encodedUrl + "&description=" + encodedTitle,
      whatsapp: "https://api.whatsapp.com/send?text=" +
         encodedTitle + "%20" + encodedUrl
    };

    container.querySelectorAll("[data-share]").forEach(function (button) {
      var service = button.dataset.share;

      if (links[service]) {
        button.href = links[service];
      }

      if (service === "copy") {
        button.addEventListener("click", function (event) {
          event.preventDefault();

          var status = container.querySelector(".mz-copy-status");

          function showStatus(message) {
            if (status) status.textContent = message;
          }

          if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(articleUrl)
              .then(function () {
                showStatus("Tautan berhasil disalin.");
              })
              .catch(function () {
                showStatus("Salin URL artikel dari bilah alamat browser.");
              });
          } else {
            showStatus("Salin URL artikel dari bilah alamat browser.");
          }
        });
      }
    });
  });
})();

Catatan teknis: jika menempelkan JavaScript langsung ke file XML tema Blogger, karakter tertentu dapat ditafsirkan sebagai markup XML. Apabila editor menolak kode tersebut, gunakan gadget HTML/JavaScript atau bungkus script sesuai aturan XML tema yang Anda gunakan. Jangan menambahkan script yang sama berulang kali.

Langkah 6: Simpan dan uji

Simpan tema, lalu buka salah satu artikel di blog. Periksa apakah tombol muncul, URL berbagi mengarah ke artikel yang benar, dan tampilan tetap rapi pada perangkat seluler.

Cara Memasang Tombol Share melalui Gadget HTML/JavaScript

Metode gadget lebih mudah bagi pemula yang ingin menempatkan tombol di sidebar, footer, atau area lain yang disediakan tata letak tema. Namun, gadget biasanya menampilkan tombol di lokasi widget, bukan otomatis tepat setelah isi setiap artikel.

Langkah 1: Buka menu Tata Letak

  1. Login ke Blogger.
  2. Pilih blog yang akan diedit.
  3. Buka menu Tata Letak.
  4. Pilih Tambahkan Gadget pada area yang diinginkan.
  5. Pilih gadget HTML/JavaScript.

Langkah 2: Masukkan kode

Masukkan markup tombol dan JavaScript dari bagian sebelumnya ke dalam gadget. Masukkan CSS di antara tag <style> dan </style> jika CSS belum ditambahkan ke tema. Untuk gadget yang hanya berisi tombol berbagi, gunakan satu blok markup, satu blok CSS, dan satu script saja.

Langkah 3: Simpan dan atur posisi

Simpan gadget, lalu atur posisinya pada Tata Letak. Jika ingin tombol berada tepat setelah isi artikel, gadget standar mungkin tidak menyediakan area yang sesuai. Dalam kondisi tersebut, pemasangan melalui template atau fitur bawaan tema lebih tepat.

Penting: kode gadget tidak boleh menggunakan sintaks khusus template seperti expr:href atau data:post.url secara langsung. Sintaks tersebut diproses oleh template Blogger, bukan oleh gadget HTML/JavaScript biasa.

Posisi Terbaik Tombol Share di Blog

Di bawah artikel

Posisi ini cocok bagi pembaca yang ingin membagikan artikel setelah selesai membacanya. Tombol tidak mengganggu paragraf pembuka dan tetap mudah ditemukan di akhir konten.

Di atas artikel

Posisi ini dapat dipilih jika tombol berbagi memang menjadi bagian penting dari pengalaman pengguna. Namun, hindari membuat area pembuka terlalu padat sehingga pembaca kesulitan menemukan isi artikel.

Di sidebar

Sidebar cocok untuk tombol berbagi umum atau tautan ke profil media sosial. Untuk membagikan URL artikel yang sedang dibaca, pastikan script benar-benar mengambil URL halaman aktif.

Uji posisi tombol pada layar desktop dan ponsel. Hindari tombol yang terlalu besar, menutupi teks, atau mengganggu navigasi utama.

Tips Optimasi Tombol Share dan SEO Blog

1. Pilih media sosial yang relevan

Tidak perlu memasang terlalu banyak tombol. Facebook, WhatsApp, X, dan Pinterest dapat menjadi pilihan awal, tetapi platform terbaik tetap bergantung pada karakter pembaca dan jenis konten Anda.

2. Gunakan HTTPS

Pastikan blog menggunakan HTTPS dan tautan berbagi mengarah ke URL artikel yang benar. Hal ini membantu menjaga konsistensi alamat halaman yang dibagikan.

3. Buat tombol responsif

Pastikan tombol mudah ditekan di layar kecil, memiliki jarak yang cukup, dan tidak membuat halaman melebar melebihi layar perangkat.

4. Perhatikan aksesibilitas

Gunakan label yang jelas, kontras warna yang memadai, dan indikator fokus untuk pengguna yang bernavigasi menggunakan keyboard. Jika menggunakan ikon saja, tambahkan nama yang dapat dibaca teknologi bantu.

5. Hindari script berlebihan

Plugin berbagi pihak ketiga terkadang memuat sumber daya tambahan atau meminta izin tertentu. Gunakan kode sesederhana mungkin dan hindari layanan yang tidak diperlukan.

6. Jangan menganggap tombol share sebagai faktor peringkat langsung

Tombol berbagi mempermudah promosi dan berpotensi mendatangkan kunjungan rujukan. Akan tetapi, tidak ada jaminan bahwa menambahkan tombol tersebut langsung meningkatkan posisi artikel di hasil pencarian Google.

Untuk memperkuat optimasi blog, pelajari juga panduan SEO di maznara.com dan pastikan setiap artikel memiliki informasi yang bermanfaat, judul yang jelas, serta struktur heading yang teratur.

Mengatasi Tombol Share yang Tidak Berfungsi

Tombol muncul, tetapi tidak membuka halaman berbagi

Periksa apakah JavaScript telah ditambahkan dengan benar dan tidak ada kesalahan sintaks. Buka halaman artikel, klik kanan, lalu periksa tautan tombol jika browser menyediakan pilihan tersebut.

URL artikel yang dibagikan salah

Pastikan script mengambil window.location.href dari halaman artikel yang sedang dibuka. Uji pada halaman postingan penuh, bukan hanya halaman beranda atau arsip.

Ikon tidak muncul

Contoh pada panduan ini menggunakan label teks, sehingga tidak memerlukan Font Awesome. Jika Anda menggantinya dengan ikon, pastikan pustaka ikon dimuat dengan benar dan lisensinya sesuai.

Tombol salin tautan gagal

Fitur clipboard browser biasanya memerlukan konteks aman, seperti HTTPS, dan izin browser yang sesuai. Jika gagal, berikan petunjuk kepada pembaca untuk menyalin alamat halaman dari bilah alamat browser.

Tombol muncul dua kali

Periksa apakah tema sudah menyediakan tombol share bawaan atau apakah kode yang sama ditambahkan di beberapa lokasi. Hapus salah satu pemasangan agar tidak terjadi duplikasi.

Tampilan berantakan pada ponsel

Periksa aturan CSS, lebar kontainer, jarak antartombol, serta kemungkinan konflik dengan CSS tema. Gunakan tampilan responsif dan hindari ukuran lebar tetap yang terlalu besar.

FAQ: Pertanyaan Umum tentang Tombol Share Blogger

1. Apakah tombol share bisa dipasang di semua template Blogger?

Pada umumnya bisa, tetapi cara pemasangan dan lokasi kode dapat berbeda. Tema yang sangat dimodifikasi mungkin memiliki struktur HTML yang berbeda dari tema bawaan Blogger.

2. Apakah saya harus menggunakan Font Awesome?

Tidak. Anda dapat memakai teks, SVG, atau pustaka ikon lain. Contoh pada panduan ini menggunakan teks agar tidak bergantung pada pustaka eksternal.

3. Apakah tombol share dapat meningkatkan trafik blog?

Tombol share dapat memudahkan pembaca mendistribusikan artikel dan membuka peluang memperoleh pengunjung dari media sosial. Jumlah kunjungan tetap bergantung pada kualitas konten, relevansi topik, dan respons audiens.

4. Apakah tombol share langsung meningkatkan SEO?

Tidak ada jaminan peningkatan peringkat secara langsung. Manfaat utamanya adalah mempermudah pembagian konten dan berpotensi mendatangkan kunjungan rujukan.

5. Mengapa tombol berbagi X masih menggunakan alamat twitter.com?

Alamat https://twitter.com/intent/tweet merupakan endpoint berbagi yang secara historis digunakan untuk membuat postingan. Ketersediaan dan perilakunya dapat berubah mengikuti kebijakan platform, sehingga perlu diuji secara berkala.

6. Mengapa Google+ tidak disertakan?

Google+ sudah dihentikan untuk pengguna umum pada 2019. Karena itu, tombol Google+ tidak lagi relevan untuk panduan berbagi artikel masa kini.

7. Lebih baik memasang tombol melalui template atau gadget?

Template lebih cocok jika tombol perlu muncul otomatis di setiap artikel pada posisi tertentu. Gadget lebih mudah untuk area widget seperti sidebar atau footer, tetapi penempatannya bergantung pada struktur tema.

Kesimpulan

Cara membuat tombol share media sosial di blog Blogger dapat dilakukan melalui pengeditan template atau penambahan gadget HTML/JavaScript. Pilih metode yang sesuai dengan posisi tombol yang diinginkan dan kemampuan teknis Anda.

Gunakan tombol yang sederhana, responsif, mudah diakses, serta benar-benar membagikan URL artikel yang sedang dibuka. Sebelum menerapkan perubahan pada blog utama, cadangkan tema dan lakukan pengujian di desktop maupun ponsel.

Yang tidak kalah penting, tombol share hanyalah alat bantu distribusi. Artikel yang informatif, akurat, dan bermanfaat tetap menjadi alasan utama pembaca mau membaca serta membagikan konten Anda.

Referensi

Posting Komentar untuk "Cara Membuat Tombol Share Media Sosial di Blogger"

Silahkan Berkomentar Dengan Bijak