Cara Membuat Tombol Berbagi (Share Button) di Bawah Artikel Blog

Cara Membuat Tombol Berbagi (Share Button) di Bawah Artikel Blog

Punya artikel bagus tapi gak ada yang share? Rugi, bro. Tombol berbagi di bawah artikel itu wajib hukumnya biar pembaca bisa langsung membagikan kontenmu ke WhatsApp, Facebook, atau X (Twitter) dengan mudah.

Berikut dibagikan cara paling ringan, tanpa plugin tambahan, dan tanpa script JavaScript eksternal yang bikin blog jadi lemot.

Langkah 1: Buka Template Blogger

Masuk ke panel Blogger > Tema > Edit HTML. Cari kode <data:post.body/>. Kita akan menempatkan kode tombol share persis di bawah kode tersebut.

Langkah 2: Paste Kode HTML + CSS Ini

Salin kode di bawah ini, lalu tempelkan persis di bawah kode <data:post.body/>:

<!-- Tombol Berbagi ABM Garage Start -->
<style>
.abm-share{margin:20px 0;padding:15px 0;border-top:1px solid #eee;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm-share span{font-weight:bold;margin-right:10px;font-size:14px}
.abm-share a{padding:8px 14px;border-radius:20px;text-decoration:none;color:#fff;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.abm-wa{background:#25D366}
.abm-fb{background:#1877F2}
.abm-x{background:#000}
.abm-link{background:#6c757d}
.abm-share a:hover{opacity:0.85}
</style>

<div class='abm-share'>
  <span>Bagikan:</span>
  <a class='abm-wa' expr:href='"https://wa.me/?text=" + data:post.title + " " + data:post.url' target='_blank'>WhatsApp</a>
  <a class='abm-fb' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank'>Facebook</a>
  <a class='abm-x' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&text=" + data:post.title' target='_blank'>X / Twitter</a>
  <a class='abm-link' href='javascript:;' onclick='navigator.clipboard.writeText(window.location.href);alert("Link berhasil disalin!")'>Salin Link</a>
</div>
<!-- Tombol Berbagi ABM Garage End -->

Langkah 3: Simpan Tema

Klik tombol Simpan di pojok kanan atas editor HTML Blogger, dan selesai!

Kenapa Kode Ini Enak Digunakan?

• Ringan: Murni hanya menggunakan CSS dan link bawaan tanpa widget berat pihak ketiga.
• Otomatis: Menggunakan data:post.url dan data:post.title sehingga otomatis mengambil judul dan link artikel tanpa perlu edit manual tiap postingan.
• SEO Friendly: Memanfaatkan fungsi expr:href bawaan ekosistem Blogger yang aman bagi perayapan mesin pencari.

Ditulis oleh

Owner ABM Garage

Bengkel & Catatan Otomotif di Plosoklaten - Kediri — abmgarage.com