Panduan Lengkap Membuat Safelink Generator di Blogger untuk Pemula

OTAKU.WEB.ID - Pelajari cara membuat Safelink Generator di Blogger menggunakan HTML, CSS, dan JavaScript. Panduan ini dibuat langkah demi langkah agar mudah diterapkan pada blog tanpa memerlukan hosting atau database tambahan.

Safelink merupakan salah satu metode yang dapat digunakan untuk membuat halaman perantara sebelum pengunjung menuju URL tujuan. Pada Blogger, sistem sederhana dapat dibuat menggunakan HTML, CSS, dan JavaScript yang berjalan langsung di sisi browser.

Dalam panduan ini, kita akan membuat sistem Safelink Generator sederhana yang dapat menerima URL tujuan, mengubahnya menjadi format Base64, mengarahkannya ke halaman Safelink, menjalankan countdown, kemudian menampilkan tombol menuju URL tujuan.

Catatan penting: Base64 hanya merupakan metode encoding, bukan enkripsi. URL tujuan tetap dapat diketahui oleh pengguna yang memahami cara kerja halaman atau memeriksa kode JavaScript.

Apa Itu Safelink Generator?

Safelink Generator adalah halaman atau alat yang membantu membuat URL perantara dari URL tujuan. Pengunjung membuka URL Safelink terlebih dahulu, kemudian sistem memproses parameter URL dan menampilkan tombol menuju halaman tujuan.

Dalam implementasi sederhana di Blogger, kita tidak membutuhkan database. Data URL dapat dikirim melalui parameter query pada alamat halaman. Contohnya adalah parameter ?url=.

01 URL Tujuan Alamat halaman yang ingin dibagikan.

→

02 Safelink URL tujuan dikirim melalui parameter.

→

03 Countdown Pengunjung menunggu beberapa detik.

→

04 Tujuan Tombol menuju URL tujuan ditampilkan.

Yang Perlu Disiapkan

Sebelum mulai, siapkan sebuah blog Blogger yang dapat digunakan untuk membuat halaman Safelink dan halaman Generator.

Akun Blogger dan blog yang aktif.
Halaman khusus untuk Safelink.
Halaman khusus untuk Generator.
HTML, CSS, dan JavaScript di bawah ini.
URL tujuan yang menggunakan http:// atau https://.

Langkah 1: Membuat Halaman Safelink

Pertama, buat halaman baru di Blogger. Beri nama halaman tersebut, misalnya Safelink.

Setelah halaman dibuat, ubah editor Blogger ke mode HTML dan masukkan struktur Safelink berikut.

HTML Safelink

<div class="safelink-box">

  <div class="safelink-icon">🔗</div>

  <h2>Link Siap Dibuka</h2>

  <p>
    Silakan tunggu beberapa detik sebelum
    melanjutkan ke halaman tujuan.
  </p>

  <div class="safelink-countdown">
    <span id="countdown">5</span>
  </div>

  <a
    id="destinationButton"
    class="safelink-button"
    href="#"
    rel="nofollow noopener"
    style="display:none;">
    Lanjut ke Link Tujuan
  </a>

  <div
    id="safelinkMessage"
    class="safelink-message">
    Menyiapkan link...
  </div>

</div>

Langkah 2: Menambahkan CSS Safelink

CSS berikut digunakan untuk mengatur tampilan kotak Safelink, countdown, tombol, dan tampilan responsif pada perangkat mobile.

CSS Safelink

<style>
.safelink-box {
  max-width: 680px;
  margin: 30px auto;
  padding: 30px 24px;
  text-align: center;
  border: 1px solid rgba(127,127,127,.20);
  border-radius: 16px;
  background: rgba(127,127,127,.06);
  box-sizing: border-box;
}

.safelink-icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 14px;
}

.safelink-box h2 {
  margin: 0 0 10px;
}

.safelink-box p {
  max-width: 560px;
  margin: 0 auto 20px;
  line-height: 1.7;
}

.safelink-countdown {
  width: 64px;
  height: 64px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid currentColor;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  box-sizing: border-box;
}

.safelink-button {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 700;
  background: #111827;
  color: #fff !important;
}

.safelink-button:hover {
  opacity: .88;
}

.safelink-message {
  margin-top: 16px;
  font-size: 13px;
  opacity: .75;
}

@media screen and (max-width: 600px) {
  .safelink-box {
    margin: 22px 0;
    padding: 24px 16px;
    border-radius: 12px;
  }

  .safelink-box h2 {
    font-size: 21px;
  }

  .safelink-box p {
    font-size: 14px;
  }

  .safelink-button {
    width: 100%;
    box-sizing: border-box;
  }
}
</style>

Langkah 3: Menambahkan JavaScript Safelink

JavaScript bertugas membaca parameter url, melakukan decode Base64, memeriksa URL, menjalankan countdown selama lima detik, kemudian menampilkan tombol menuju URL tujuan.

JavaScript Safelink

<script>
(function () {

  var params =
    new URLSearchParams(window.location.search);

  var encodedUrl =
    params.get("url");

  var countdownElement =
    document.getElementById("countdown");

  var button =
    document.getElementById("destinationButton");

  var message =
    document.getElementById("safelinkMessage");


  function decodeUrl(value) {

    try {

      return decodeURIComponent(
        escape(atob(value))
      );

    } catch (error) {

      return null;

    }

  }


  function validUrl(value) {

    try {

      var url = new URL(value);

      return (
        url.protocol === "http:" ||
        url.protocol === "https:"
      );

    } catch (error) {

      return false;

    }

  }


  if (!encodedUrl) {

    countdownElement.textContent = "!";

    message.textContent =
      "URL tujuan tidak ditemukan.";

    return;

  }


  var destination =
    decodeUrl(encodedUrl);


  if (
    !destination ||
    !validUrl(destination)
  ) {

    countdownElement.textContent = "!";

    message.textContent =
      "URL tujuan tidak valid.";

    return;

  }


  var seconds = 5;

  countdownElement.textContent =
    seconds;


  var timer = setInterval(function () {

    seconds--;

    countdownElement.textContent =
      seconds;


    if (seconds <= 0) {

      clearInterval(timer);

      countdownElement.textContent =
        "✓";

      message.textContent =
        "Link tujuan sudah siap.";

      button.href =
        destination;

      button.style.display =
        "inline-block";

    }

  }, 1000);

})();
</script>

Memahami JavaScript Safelink

Bagian pertama JavaScript membaca parameter url dari alamat halaman menggunakan URLSearchParams.

Membaca Parameter URL

var params =
  new URLSearchParams(window.location.search);

var encodedUrl =
  params.get("url");

Setelah parameter diperoleh, nilai tersebut kemudian di-decode menggunakan Base64.

Decode Base64

var destination =
  decodeURIComponent(
    escape(atob(encodedUrl))
  );

Sistem kemudian memeriksa apakah URL tersebut menggunakan protokol HTTP atau HTTPS.

Elemen Penting pada Halaman Safelink

Beberapa ID pada HTML harus tetap sama karena JavaScript menggunakannya untuk memperbarui countdown, pesan, dan tombol tujuan.

ID Elemen Safelink

countdown
destinationButton
safelinkMessage

Penting: Jangan mengganti ID tersebut kecuali Anda juga mengubah referensinya di JavaScript.

Langkah 4: Menyimpan Halaman Safelink

Setelah HTML, CSS, dan JavaScript dimasukkan, simpan halaman tersebut. Kemudian buka halaman Safelink yang sudah dibuat dan catat URL-nya.

Contohnya:

URL Halaman Safelink

https://domainanda.com/p/safelink.html

URL tersebut nantinya akan dimasukkan ke JavaScript Generator.

Langkah 5: Membuat Halaman Safelink Generator

Selanjutnya buat halaman baru untuk Generator. Halaman ini digunakan untuk memasukkan URL tujuan dan menghasilkan URL Safelink secara otomatis.

HTML Generator

<div class="generator-box">

  <h2>Safelink Generator</h2>

  <p>
    Masukkan URL tujuan untuk membuat
    URL Safelink.
  </p>

  <input
    id="targetUrl"
    type="url"
    placeholder="https://contoh.com/halaman"
    autocomplete="off"
  />

  <button
    type="button"
    onclick="generateSafelink()">
    Generate URL
  </button>


  <div
    id="resultBox"
    style="display:none;">

    <p>URL Safelink:</p>

    <input
      id="generatedUrl"
      type="text"
      readonly
    />

    <button
      type="button"
      onclick="copyGeneratedUrl()">
      Salin URL
    </button>

  </div>

</div>

CSS Generator

<style>
.generator-box {
  max-width: 680px;
  margin: 30px auto;
  padding: 24px;
  border: 1px solid rgba(127,127,127,.20);
  border-radius: 14px;
  background: rgba(127,127,127,.06);
  box-sizing: border-box;
}

.generator-box h2 {
  margin-top: 0;
}

.generator-box input {
  width: 100%;
  margin: 8px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(127,127,127,.30);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  box-sizing: border-box;
  outline: none;
}

.generator-box button {
  padding: 11px 16px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  background: #111827;
  color: #fff;
}

#resultBox {
  margin-top: 22px;
}

@media screen and (max-width: 600px) {
  .generator-box {
    margin: 22px 0;
    padding: 18px 14px;
  }

  .generator-box button {
    width: 100%;
  }
}
</style>

JavaScript Generator

<script>
function encodeUrl(value) {

  return btoa(
    unescape(
      encodeURIComponent(value)
    )
  );

}


function generateSafelink() {

  var input =
    document.getElementById("targetUrl");

  var resultBox =
    document.getElementById("resultBox");

  var generatedUrl =
    document.getElementById("generatedUrl");


  var destination =
    input.value.trim();


  if (!destination) {

    alert(
      "Silakan masukkan URL tujuan."
    );

    return;

  }


  try {

    var url =
      new URL(destination);


    if (
      url.protocol !== "http:" &&
      url.protocol !== "https:"
    ) {

      alert(
        "Gunakan URL dengan http:// atau https://."
      );

      return;

    }


    var encoded =
      encodeUrl(destination);


    var safelinkPage =
      "URL-HALAMAN-SAFELINK?url=" +
      encodeURIComponent(encoded);


    generatedUrl.value =
      safelinkPage;


    resultBox.style.display =
      "block";


  } catch (error) {

    alert(
      "URL yang dimasukkan tidak valid."
    );

  }

}


function copyGeneratedUrl() {

  var input =
    document.getElementById(
      "generatedUrl"
    );


  input.select();

  input.setSelectionRange(
    0,
    99999
  );


  if (
    navigator.clipboard &&
    window.isSecureContext
  ) {

    navigator.clipboard.writeText(
      input.value
    )
    .then(function () {

      alert(
        "URL berhasil disalin."
      );

    })
    .catch(function () {

      fallbackGeneratedCopy(input);

    });

  } else {

    fallbackGeneratedCopy(input);

  }

}


function fallbackGeneratedCopy(input) {

  try {

    var successful =
      document.execCommand("copy");


    if (successful) {

      alert(
        "URL berhasil disalin."
      );

    } else {

      alert(
        "URL tidak dapat disalin."
      );

    }

  } catch (error) {

    alert(
      "URL tidak dapat disalin."
    );

  }

}
</script>

Langkah 6: Mengganti URL Halaman Safelink

Pada JavaScript Generator terdapat bagian yang harus diganti dengan URL halaman Safelink milik Anda.

Placeholder URL Safelink

URL-HALAMAN-SAFELINK

Misalnya halaman Safelink Anda adalah:

Contoh URL Safelink

https://domainanda.com/p/safelink.html

Maka bagian:

Sebelum

var safelinkPage =
  "URL-HALAMAN-SAFELINK?url=" +
  encodeURIComponent(encoded);

diubah menjadi:

Sesudah

var safelinkPage =
  "https://domainanda.com/p/safelink.html?url=" +
  encodeURIComponent(encoded);

Perhatikan: Gunakan URL halaman Safelink Anda sendiri. Jangan menggunakan contoh domainanda.com sebagai alamat final.

Langkah 7: Menguji Safelink Generator

Setelah semua kode dipasang, lakukan pengujian sebelum digunakan pada artikel atau halaman publik.

Buka halaman Generator.
Masukkan URL tujuan yang valid.
Klik tombol Generate URL.
Salin URL Safelink yang dihasilkan.
Buka URL tersebut di tab baru.
Pastikan countdown berjalan dari lima hingga nol.
Pastikan tombol tujuan muncul setelah countdown selesai.
Klik tombol dan pastikan URL tujuan terbuka dengan benar.

Contoh Cara Kerja URL

Misalnya URL tujuan Anda adalah:

Contoh URL Tujuan

https://contoh.com/halaman-tujuan

Generator akan membuat URL Safelink dengan parameter url. Nilai tersebut merupakan hasil encoding dari URL tujuan.

Parameter Safelink

?url=HASIL-ENCODING-BASE64

Ketika halaman Safelink dibuka, JavaScript membaca nilai tersebut, mengubahnya kembali menjadi URL tujuan, lalu menampilkan tombol setelah countdown selesai.

Tips Mengoptimalkan Safelink

Safelink sebaiknya digunakan dengan pengalaman pengguna yang sederhana. Pengunjung harus memahami apa yang sedang terjadi tanpa merasa ditipu atau dipaksa melakukan tindakan tertentu.

Gunakan countdown yang singkat dan masuk akal.
Gunakan tombol dengan teks yang jelas.
Jelaskan bahwa halaman sedang menyiapkan link.
Pastikan halaman tetap nyaman dibuka melalui perangkat mobile.
Hindari terlalu banyak iklan yang menutupi tombol utama.
Gunakan URL tujuan yang relevan dengan konteks artikel.

Cara Menarik Pengunjung ke Blog

Safelink bukan pengganti strategi SEO. Untuk mendapatkan pengunjung, tetap fokus pada konten yang benar-benar membantu pembaca.

Buat artikel yang menjawab kebutuhan pencarian pengguna.
Gunakan judul yang jelas dan sesuai isi artikel.
Gunakan struktur heading yang teratur.
Tambahkan internal link ke artikel yang relevan.
Bagikan konten melalui kanal yang sesuai dengan audiens.
Perbarui artikel lama jika informasinya sudah berubah.

Cara Meningkatkan Klik Tanpa Mengganggu Pengunjung

Klik yang baik berasal dari pengalaman pengguna yang jelas, bukan dari cara-cara yang memaksa pengunjung.

Gunakan satu tombol utama yang mudah ditemukan.
Gunakan label tombol yang menjelaskan tindakan.
Jangan menyamarkan iklan sebagai tombol download atau link.
Jangan membuat tombol palsu yang mengarah ke halaman berbeda.
Jangan membuka banyak tab secara otomatis.
Jangan memaksa pengunjung melakukan klik iklan.

Prinsip sederhana: Pengunjung harus tahu tombol mana yang merupakan link tujuan dan apa yang akan terjadi setelah tombol tersebut diklik.

Optimasi SEO Artikel Safelink

Safelink tidak otomatis membuat sebuah artikel mendapatkan posisi tinggi di mesin pencari. SEO tetap bergantung pada kualitas konten, relevansi, struktur halaman, pengalaman pengguna, dan berbagai faktor lainnya.

Untuk artikel tentang Safelink Generator, gunakan istilah yang relevan secara alami seperti Safelink Blogger, Safelink Generator, tutorial Blogger, HTML Safelink, dan JavaScript Safelink tanpa mengulang kata kunci secara berlebihan.

Base64 Bukan Enkripsi

Salah satu hal yang perlu dipahami adalah Base64 tidak memberikan perlindungan keamanan terhadap URL.

Base64 hanya mengubah representasi data sehingga URL tidak langsung terlihat dalam bentuk aslinya pada alamat. Pengguna yang mengetahui cara decode Base64 tetap dapat memperoleh URL tersebut.

Jangan gunakan sistem ini sebagai mekanisme keamanan. Jika Anda membutuhkan autentikasi, kontrol akses, token aman, atau perlindungan data, diperlukan mekanisme server-side yang sesuai.

Kesalahan yang Sering Terjadi

URL halaman Safelink belum diganti.
ID elemen HTML berbeda dengan ID yang digunakan JavaScript.
Tag HTML atau JavaScript tidak lengkap.
URL tujuan tidak menggunakan HTTP atau HTTPS.
Kode dimasukkan ke editor Blogger dalam mode yang salah.
CSS atau JavaScript tertimpa oleh kode lain pada tema.
URL Safelink menggunakan alamat halaman yang sudah berubah.

Hal yang Harus Dihindari

Gunakan Safelink secara transparan dan jangan menggunakannya untuk menipu atau memanipulasi pengunjung.

Jangan menyembunyikan tujuan sebenarnya dari pengunjung.
Jangan menggunakan redirect ke situs berbahaya.
Jangan memaksa klik iklan.
Jangan membuat tombol yang menyerupai elemen lain secara menipu.
Jangan membuka banyak jendela atau tab tanpa tindakan pengguna.
Jangan menggunakan countdown yang terlalu lama tanpa alasan.

Apakah Safelink Membantu Ranking Google?

Safelink sendiri bukan faktor yang menjamin sebuah halaman mendapatkan peringkat tinggi di Google. Penggunaan Safelink juga tidak menggantikan optimasi konten dan pengalaman pengguna.

Jika digunakan, sebaiknya Safelink menjadi bagian kecil dari sistem navigasi blog, bukan cara utama untuk memanipulasi mesin pencari atau memaksa interaksi pengunjung.

Checklist Sebelum Safelink Dipublikasikan

✓

Halaman Safelink aktif

Pastikan halaman dapat dibuka tanpa error.

✓

HTML lengkap

Pastikan semua elemen yang dibutuhkan tersedia.

✓

CSS aktif

Periksa tampilan pada desktop dan mobile.

✓

JavaScript berjalan

Countdown dan tombol tujuan harus bekerja.

✓

URL tujuan valid

Gunakan alamat HTTP atau HTTPS yang benar.

✓

Pengalaman pengguna baik

Jangan membuat pengunjung kesulitan menemukan link tujuan.

FAQ Safelink Generator

Apa itu Safelink Generator?

Safelink Generator adalah alat yang membuat URL perantara dari URL tujuan. Pengunjung membuka halaman Safelink sebelum melanjutkan ke halaman tujuan.

Apakah Safelink bisa dibuat di Blogger?

Ya. Sistem Safelink sederhana dapat dibuat menggunakan HTML, CSS, dan JavaScript yang ditempatkan pada halaman Blogger.

Apakah membutuhkan hosting atau database?

Sistem sederhana pada panduan ini tidak membutuhkan hosting atau database tambahan karena pemrosesan dilakukan menggunakan JavaScript di browser.

Apakah Base64 aman untuk menyembunyikan URL?

Tidak. Base64 bukan enkripsi. Nilai yang di-encode masih dapat dikembalikan ke bentuk aslinya oleh pengguna.

Berapa lama countdown yang sebaiknya digunakan?

Gunakan waktu yang singkat dan wajar. Contoh pada tutorial ini menggunakan lima detik agar proses tetap sederhana.

Apakah Safelink menjamin ranking Google?

Tidak. Safelink bukan jaminan peringkat mesin pencari. Fokus utama tetap pada kualitas konten, relevansi, struktur halaman, dan pengalaman pengguna.

Kenapa tombol tujuan tidak muncul?

Periksa kembali JavaScript, ID elemen HTML, URL halaman Safelink, serta parameter url. Pastikan tidak ada kesalahan penulisan pada kode.

Apakah kode ini bisa digunakan di perangkat mobile?

Ya. CSS pada tutorial ini memiliki aturan responsif agar kotak Safelink dan Generator dapat menyesuaikan ukuran layar.

🚀

Safelink Blogger Siap Digunakan

Dengan mengikuti langkah di atas, Anda dapat membuat Safelink Generator sederhana di Blogger menggunakan HTML, CSS, dan JavaScript. Uji seluruh alur terlebih dahulu sebelum digunakan pada artikel publik.

Otaku.web.id