Cara Membuat Tombol Download dan Backlink di Blogger

Tutorial Membuat Tombol Download atau Backlink di Blogger Keren

Mau bikin tombol download di Blogger yang kelihatan niat, bukan cuma link biru standar? Atau butuh tombol backlink kece buat diarahkan ke postingan lain, page, atau link afiliasi? Santai, di artikel ini kita bahas pelan-pelan tapi to the point. cara membuat tombol download di blogspot.

Apa Itu Tombol Download / Backlink di Blogger?

Secara teknis, tombol download atau backlink di Blogger itu cuma <a> (anchor) yang dikasih styling CSS biar kelihatan kayak tombol. Fungsinya bisa macam-macam:

• Tombol download file (Google Drive, Mediafire, direct link, dll).
• Tombol backlink ke artikel terkait, landing page, atau halaman penting.
• Tombol CTA (call to action) buat daftar, beli, atau kunjungi link tertentu.

Bedanya sama link biasa? Tampilan dan CTR. Tombol yang jelas dan mencolok biasanya jauh lebih sering di-klik daripada link text doang.

Konsep Dasar: HTML + CSS di Blogger

Di Blogger, kamu bisa masukin HTML dan CSS di dua tempat:

1. Di dalam postingan (via mode HTML).
2. Di template / Tema (CSS global, biar bisa dipakai berulang).

Rekomendasi: CSS taruh di Tema (global), HTML tombol taruh di tiap postingan. Jadi kalau suatu saat mau ganti warna semua tombol, cukup edit satu tempat.

Cara Menambahkan CSS Global di Blogger

1. Buka Blogger > Tema > Sesuaikan > Edit HTML.
2. Cari tag </head>.
3. Tepat sebelum </head>, tempel CSS berikut:

<style>
.btn-download {
  display: inline-block;
  padding: 10px 18px;
  background: #1e88e5;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.btn-download:hover {
  background: #1565c0;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.btn-backlink {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #ff7043;
  color: #ff7043;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-backlink:hover {
  background: #ff7043;
  color: #fff;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
</style>

Simpan tema. Sekarang kelas .btn-download dan .btn-backlink sudah siap dipakai di semua postingan.

Membuat Tombol Download Keren di Postingan Blogger

1. Tombol Download Sederhana

Ini versi paling basic tapi sudah kelihatan rapi. Di editor postingan, pindah ke mode HTML, lalu tempel:

<a href="URL_DOWNLOAD_KAMU" class="btn-download" target="_blank" rel="nofollow noopener">
  Download Sekarang
</a>

Download Sekarang

Ganti URL_DOWNLOAD_KAMU dengan link file kamu (misal Google Drive). target="_blank" biar kebuka di tab baru, rel="nofollow" dipakai kalau linknya ke luar (hosting file, afiliasi, dll).

2. Tombol Download dengan Icon

Biar makin niat, tambahin icon pakai SVG inline (nggak perlu font icon tambahan). Contoh:

<a href="URL_DOWNLOAD_KAMU" class="btn-download btn-icon" target="_blank" rel="nofollow noopener">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M5 20h14v-2H5v2zm7-18L5.33 9h3.84v4h3.66V9h3.84L12 2z"/>
  </svg>
  <span>Download File</span>
</a>

Download File

Kalau iconnya nggak muncul, pastikan kamu tempel di mode HTML, bukan Compose. Jangan di-parse ulang oleh editor.

3. Tombol Download Multi Link (Mirror)

Kalau kamu pakai banyak mirror (Google Drive, Mediafire, Mega, dll), bikin list tombol kecil-kecil biar rapi:

<div class="download-box">
  <p>Link Download:</p>
  <a href="URL_GOOGLE_DRIVE" class="btn-download" target="_blank" rel="nofollow noopener">
    Google Drive
  </a>
  <a href="URL_MEDIAFIRE" class="btn-download" target="_blank" rel="nofollow noopener" style="background:#43a047">
    Mediafire
  </a>
</div>

Link Download:

Google Drive Mediafire

Kalau mau lebih rapi, kamu bisa tambahin CSS khusus untuk .download-box di Tema:

<style>
.download-box {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  margin: 16px 0;
}
.download-box .btn-download {
  margin-right: 8px;
  margin-top: 6px;
}
</style>

Membuat Tombol Backlink Keren di Blogger

1. Tombol Backlink ke Artikel Terkait

Tombol backlink bisa kamu pakai buat ngarahin pembaca ke tutorial lanjutan, part 2, atau artikel pendukung. Contoh: kode tombol download HTML dan CSS.

<a href="URL_ARTIKEL_LAIN" class="btn-backlink">
  Baca Juga: Cara Membuat Template Blogger dari Nol hingga Jadi
</a>

Baca Juga: Cara Membuat Template Blogger dari Nol hingga Jadi

Kalau backlink internal (masih dalam blog kamu), nggak perlu rel="nofollow". Kalau eksternal, boleh tambahin rel="nofollow" dan target="_blank".

2. Tombol Backlink Bulat dengan Icon Panah

Supaya kelihatan kayak tombol navigasi modern:

<a href="URL_ARTIKEL_SEBELUMNYA" class="btn-backlink btn-icon">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
  </svg>
  <span>Artikel Sebelumnya</span>
</a>

Artikel Sebelumnya

Kamu bisa bikin pasangan “Sebelumnya” dan “Selanjutnya” di bawah postingan biar user gampang pindah artikel.

3. Tombol Backlink Khusus CTA (Afiliasi / Landing Page)

Kalau dipakai buat afiliasi atau halaman penting, bikin lebih mencolok:

<a href="URL_AFFILIATE" class="btn-download btn-icon" style="background:#e53935" target="_blank" rel="nofollow sponsored noopener">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M5 13h14v-2H5v2zm7-9 5 5h-3v4h-4V9H7l5-5z"/>
  </svg>
  <span>Claim Diskon Sekarang</span>
</a>

Claim Diskon Sekarang

Tambahkan rel="sponsored" kalau linknya memang link berbayar / afiliasi, supaya aman di mata Google.

Tips Biar Tombol Download & Backlink Kamu Nge-klik

• Jelas teksnya: Hindari “Klik di sini”. Lebih spesifik: “Download Template”, “Baca Panduan Lanjutannya”.
• Kontras warna: Pastikan warna tombol beda sama warna background, tapi tetap enak dilihat.
• Posisi strategis: Tombol download sebaiknya ditaruh:
  • Di atas (setelah intro) untuk yang buru-buru.
  • Di bawah (setelah penjelasan) buat yang baca sampai habis.
• Mobile friendly: Jangan terlalu kecil. Padding minimal 8–10px biar enak di-tap jempol.
• Jangan jebak: Kalau bilang “Download tanpa iklan”, ya jangan dialihin ke 3 halaman shortlink dulu. User kabur, reputasi blog ikut turun.

Contoh Penempatan Tombol di Artikel Blogger

Struktur artikel yang enak biasanya kayak gini:

1. Judul + intro singkat.
2. Preview / deskripsi file (kalau ini postingan download).
3. Tombol download pertama (di tengah).
4. Penjelasan detail, cara pakai, screenshot, dll.
5. Tombol download kedua (di akhir, bisa multi link).
6. Tombol backlink ke artikel terkait.

Contoh layout di bagian akhir postingan:

<h3>Download Template Blogger</h3>
<p>Berikut ini link download template yang sudah saya pakai dan tes sendiri.</p>
<div class="download-box">
  <a href="URL_DRIVE" class="btn-download" target="_blank" rel="nofollow noopener">
    Download via Google Drive
  </a>
  <a href="URL_MIRROR" class="btn-download" target="_blank" rel="nofollow noopener" style="background:#8e24aa">
    Download Mirror
  </a>
</div>
<p>Kalau belum tahu cara pasangnya, baca dulu panduan di bawah ini.</p>
<a href="URL_PANDUAN" class="btn-backlink">
  Baca: Cara Pasang Template Blogger Lengkap
</a>

Kesimpulan

Bikin tombol download atau backlink keren di Blogger itu nggak ribet. Kuncinya cuma dua: HTML anchor dan CSS yang rapi. Setelah CSS global kamu pasang di Tema, sisanya cuma main copas struktur tombol di tiap postingan, ganti URL dan teksnya.

Dengan tombol yang jelas dan enak dilihat, CTR naik, pengunjung lebih betah, dan blog kamu kelihatan lebih profesional, meskipun di balik layar cuma mainan kode sederhana.

CTA: Coba Pasang di Salah Satu Postingan Kamu

Silakan langsung praktik: pilih satu artikel download di blog kamu, pasang CSS di Tema, lalu ganti link download lama dengan tombol baru. Rasakan bedanya tampilan blog kamu.

Kalau kamu mau, kamu bisa kembangkan sendiri: tambah icon beda, animasi hover, atau warna sesuai brand blog kamu. Yang penting, jangan lupa cek di HP dan desktop, pastikan tombolnya tetap enak di-klik. tombol backlink SEO friendly di Blogger.