Cara Buat Safelink Halaman Otomatis Untuk Blogger 2026 Terbaru

Cara Buat Safelink Halaman Otomatis Untuk Blogger 2026 Terbaru dan Premium

ASC Support Files

Sunday, April 12, 2026

---

Cara Memasang Script Safelink Halaman Otomatis di Blogger (Lengkap & Mudah)

Membuat blog download dan ingin memaksimalkan pendapatan dari Google AdSense? Memasang safelink adalah salah satu strategi terbaik. Namun, banyak pemilik blog yang bingung bagaimana cara membuat safelink yang rapi, profesional, dan tetap disukai oleh Google (SEO-friendly).

Tutorial ini akan memandu Anda langkah demi langkah cara memasang script safelink otomatis di Blogger. Script ini dirancang khusus dengan fitur 2x klik, animasi loading halus (progress bar), artikel SEO, dan 4 slot iklan yang siap mendongkrak penghasilan Anda tanpa membuat pengunjung kesal.

Mari kita mulai pemasangannya!

Persiapan Sebelum Memasang Safelink

Sebelum masuk ke tutorial, pastikan Anda sudah menyiapkan dua hal ini:

Blog Utama/Blog Download: Blog tempat Anda membagikan link download.
Gambar Ilustrasi: Siapkan satu gambar (misalnya tentang teknologi) dan upload ke blog Anda. Salin link gambar tersebut untuk diletakkan di dalam script nanti.

Pemasangan ini dibagi menjadi dua tahap: Membuat halaman safelink itu sendiri, dan memasang sistem otomatisnya di template blog Anda.

Langkah 1: Membuat Halaman Safelink di Blogger

Tahap pertama adalah membuat "ruang tunggu" atau halaman tujuan sebelum pengunjung mendapatkan link aslinya.

Buka dashboard Blogger Anda.
Pilih menu Halaman (Pages) di bilah sebelah kiri, lalu klik Halaman Baru (New Page).
Beri judul halaman sesuka Anda, misalnya: "Generate Link" atau "Safelink".
Di pojok kiri atas area menulis, klik ikon pensil dan ubah dari Tampilan Menulis (Compose View) menjadi Tampilan HTML (HTML View).
Hapus semua kode yang ada di layar.
Copy dan paste seluruh kode safelink yang sudah Anda siapkan.
Wajib Diubah: Cari tulisan URL_GAMBAR_ANDA_DISINI di dalam kode tersebut, dan ganti dengan link gambar yang sudah Anda siapkan.
Klik menu Pilihan di sebelah kanan (ikon roda gigi), pilih Jangan izinkan komentar.
Klik Publikasikan (Publish).
Setelah terbit, Salin/Copy URL halaman tersebut. Kita akan menggunakannya di Langkah 2.


<style>
  /* Script Safelink by ASC Support Files */
  :root {
    --arieff-blue: #2563eb;
    --arieff-hover: #1d4ed8;
    --arieff-text: #334155;
    --arieff-bg: #f8fafc;
    --arieff-progress: #bfdbfe;
  }
  
  .arieff-container {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--arieff-text);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .arieff-img-top {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 12px;
  }

  .arieff-ad {
    width: 100%;
    text-align: center;
    margin: 2px 0;
    padding: 0;
    min-height: 50px;
  }

  .arieff-btn-wrap {
    text-align: center;
    margin: 2px 0;
  }

  .arieff-btn {
    position: relative;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    transition: all 0.3s ease;
  }

  .arieff-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background-color: var(--arieff-progress);
    transition: width 1s linear;
    z-index: 1;
  }

  .arieff-btn span {
    position: relative;
    z-index: 2;
  }

  .arieff-btn.arieff-active {
    background-color: var(--arieff-blue);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
  }

  .arieff-btn.arieff-active .arieff-progress-bar {
    display: none;
  }

  .arieff-article {
    text-align: justify;
    margin: 30px 0;
    padding: 25px;
    background-color: var(--arieff-bg);
    border-radius: 12px;
    border-left: 5px solid var(--arieff-blue);
  }

  .arieff-article h1, .arieff-article h2 {
    color: var(--arieff-blue);
    font-size: 24px;
    margin-top: 0;
  }

  .arieff-article p {
    margin-bottom: 15px;
    font-size: 16px;
  }

  .arieff-bot-area {
    display: none;
    text-align: center;
    margin-top: 20px;
  }

  .arieff-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid var(--arieff-blue);
    border-radius: 50%;
    margin: 0 auto 15px auto;
    animation: arieff-spin 1s linear infinite;
  }

  @keyframes arieff-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>

<div class="arieff-container">
  
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7..." alt="Teknologi Modern" class="arieff-img-top" />

  <div class="arieff-ad">
  <!-- Slot Iklan 1 -->
    </div>

  <div class="arieff-btn-wrap">
    <button id="arieff-btn-top" class="arieff-btn" disabled>
      <div id="arieff-prog-top" class="arieff-progress-bar"></div>
      <span id="arieff-txt-top">Harap tunggu... 10s</span>
    </button>
  </div>

  <div class="arieff-ad">
  <!-- Slot Iklan 2 -->
    </div>

  <div class="arieff-article">
    <h1>Pengertian Teknologi dan Pemahamannya</h1>
    <p>Teknologi merupakan istilah yang sangat dekat dengan kehidupan manusia modern. Secara umum, teknologi dapat diartikan sebagai hasil dari pengembangan ilmu pengetahuan yang digunakan untuk mempermudah aktivitas manusia. Teknologi mencakup berbagai alat, sistem, metode, maupun proses yang diciptakan untuk membantu manusia menyelesaikan pekerjaan dengan lebih efisien dan efektif.</p>
    <p>Dalam pengertian yang lebih luas, teknologi tidak hanya terbatas pada perangkat elektronik seperti smartphone, komputer, atau internet. Teknologi juga mencakup hal-hal sederhana seperti alat pertanian tradisional, sistem irigasi, hingga metode pengolahan makanan. Artinya, sejak zaman dahulu, manusia sebenarnya sudah menggunakan teknologi, meskipun dalam bentuk yang sangat sederhana.</p>
    <p>Pemahaman tentang teknologi tidak hanya berhenti pada penggunaannya saja, tetapi juga mencakup bagaimana teknologi tersebut diciptakan, dikembangkan, dan dimanfaatkan secara bijak. Teknologi lahir dari kebutuhan manusia untuk meningkatkan kualitas hidup. Misalnya, perkembangan teknologi komunikasi memungkinkan manusia berinteraksi tanpa batas jarak dan waktu. Hal ini tentu membawa dampak besar dalam berbagai bidang seperti pendidikan, bisnis, dan sosial.</p>
    <p>Dalam dunia pendidikan, teknologi membantu proses belajar menjadi lebih interaktif dan mudah diakses. Dengan adanya internet, siswa dapat memperoleh informasi dari berbagai sumber secara cepat. Di bidang bisnis, teknologi memungkinkan transaksi dilakukan secara online, memperluas pasar, serta meningkatkan efisiensi operasional. Sementara itu, dalam kehidupan sehari-hari, teknologi membantu manusia menghemat waktu dan tenaga, seperti penggunaan aplikasi transportasi online atau alat rumah tangga otomatis.</p>
    <p>Namun, pemahaman teknologi juga harus disertai dengan kesadaran akan dampak negatifnya. Penggunaan teknologi yang berlebihan dapat menimbulkan berbagai masalah, seperti ketergantungan, menurunnya interaksi sosial secara langsung, hingga penyebaran informasi yang tidak benar. Oleh karena itu, penting bagi setiap individu untuk memiliki literasi teknologi, yaitu kemampuan untuk memahami, menggunakan, dan mengelola teknologi dengan bijak.</p>
    <p>Selain itu, perkembangan teknologi yang sangat cepat menuntut manusia untuk terus belajar dan beradaptasi. Kemampuan untuk mengikuti perkembangan teknologi menjadi salah satu kunci penting dalam menghadapi persaingan di era digital. Individu yang mampu memanfaatkan teknologi dengan baik akan memiliki peluang lebih besar untuk berkembang dan sukses.</p>
    <p>Kesimpulannya, teknologi adalah bagian yang tidak terpisahkan dari kehidupan manusia. Teknologi hadir sebagai solusi untuk mempermudah berbagai aktivitas dan meningkatkan kualitas hidup. Namun, pemahaman yang baik tentang teknologi sangat diperlukan agar penggunaannya tetap memberikan manfaat dan tidak menimbulkan dampak negatif. Dengan penggunaan yang bijak, teknologi dapat menjadi alat yang sangat powerful dalam mendukung kemajuan individu maupun masyarakat secara keseluruhan.</p>
  </div>

  <div id="arieff-bot-wrap" class="arieff-bot-area">
    <div class="arieff-spinner"></div>

    <div class="arieff-ad">
    <!-- Slot Iklan 3 -->
      </div>

    <div class="arieff-btn-wrap">
      <button id="arieff-btn-bot" class="arieff-btn" disabled>
        <div id="arieff-prog-bot" class="arieff-progress-bar"></div>
        <span id="arieff-txt-bot">Memproses link...</span>
      </button>
    </div>

    <div class="arieff-ad">
    <!-- Slot Iklan 4 -->
      </div>
  </div>

</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    let targetUrl = "/"; 
    const urlParams = new URLSearchParams(window.location.search);
    const getUrl = urlParams.get('url');
    if (getUrl) { try { targetUrl = atob(getUrl); } catch (e) { targetUrl = getUrl; } }

    const btnTop = document.getElementById("arieff-btn-top");
    const progressTop = document.getElementById("arieff-prog-top");
    const textTop = document.getElementById("arieff-txt-top");
    const bottomArea = document.getElementById("arieff-bot-wrap");
    
    let timeTop = 10;
    const topTimer = setInterval(function() {
      timeTop--;
      let percentage = ((10 - timeTop) / 10) * 100;
      progressTop.style.width = percentage + "%";
      textTop.innerHTML = "Klik 2x to Get Link (" + timeTop + "s)";
      
      if (timeTop <= 0) {
        clearInterval(topTimer);
        textTop.innerHTML = "Klik 2x to Get Link";
        btnTop.classList.add("arieff-active");
        btnTop.disabled = false;
      }
    }, 1000);

    let clickCount = 0;
    btnTop.addEventListener("click", function() {
      if (btnTop.classList.contains("arieff-active")) {
        clickCount++;
        
        if (clickCount === 1) {
          textTop.innerHTML = "Klik 1x lagi...";
        } else if (clickCount === 2) {
          bottomArea.style.display = "block";
          setTimeout(() => {
            document.getElementById("arieff-btn-bot").scrollIntoView({ behavior: "smooth", block: "center" });
          }, 100);
          
          btnTop.classList.remove("arieff-active");
          textTop.innerHTML = "Silahkan scroll ke bawah \u2193";
          btnTop.disabled = true;
          
          startBottomTimer();
        }
      }
    });

    function startBottomTimer() {
      const btnBottom = document.getElementById("arieff-btn-bot");
      const progressBottom = document.getElementById("arieff-prog-bot");
      const textBottom = document.getElementById("arieff-txt-bot");
      
      let timeBottom = 25;
      const bottomTimer = setInterval(function() {
        timeBottom--;
        let percentage = ((25 - timeBottom) / 25) * 100;
        progressBottom.style.width = percentage + "%";
        textBottom.innerHTML = "Mohon tunggu... " + timeBottom + "s";
        
        if (timeBottom <= 0) {
          clearInterval(bottomTimer);
          document.querySelector(".arieff-spinner").style.display = "none";
          textBottom.innerHTML = "Visit Link";
          btnBottom.classList.add("arieff-active");
          btnBottom.disabled = false;
          btnBottom.addEventListener("click", function() { window.location.href = targetUrl; });
        }
      }, 1000);
    }
  });
</script>

Langkah 2: Mengatur Auto Safelink di Template Blogger

Penjelasan

Tahap ini bertujuan agar semua link keluar (seperti link Google Drive, Mediafire) otomatis berubah menjadi link safelink Anda tanpa perlu repot mengedit artikel satu per satu.

Langkah-langkah

Kembali ke dashboard Blogger, pilih menu Tema (Theme).
Klik tanda panah kecil di sebelah tombol Sesuaikan, lalu pilih Edit HTML.
Gulir ke bagian paling bawah kode template. Cari kode penutup body yaitu </body>.
Copy kode di bawah ini dan paste tepat di atas kode </body>:
Wajib Diubah: Perhatikan baris ke-6 pada kode di atas. Ganti teks https://URL_BLOG_ANDA.blogspot.com/p/halaman-safelink.html dengan URL Halaman Safelink yang sudah Anda copy pada akhir langkah 1.
Klik ikon Simpan (Save) di pojok kanan atas.


<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  
  // 1. GANTI DENGAN URL HALAMAN SAFELINK ANDA
  var arieffSafelinkUrl = "https://URL_BLOG_ANDA.blogspot.com/p/halaman-safelink.html";

  // 2. DAFTAR PENGECUALIAN (Link yang TIDAK akan dijadikan safelink)
  var arieffDomainPengecualian = [
    window.location.hostname,
    "javascript:",
    "mailto:",
    "facebook.com",
    "twitter.com",
    "instagram.com",
    "youtube.com",
    "wa.me",
    "whatsapp.com",
    "t.me"
  ];

  var arieffSemuaLink = document.querySelectorAll("a");

  arieffSemuaLink.forEach(function(arieffLink) {
    var arieffHrefAsli = arieffLink.href;

    if (arieffHrefAsli && arieffHrefAsli.startsWith("http")) {
      var arieffIsPengecualian = false;

      for (var i = 0; i < arieffDomainPengecualian.length; i++) {
        if (arieffHrefAsli.indexOf(arieffDomainPengecualian[i]) !== -1) {
          arieffIsPengecualian = true;
          break;
        }
      }

      if (!arieffIsPengecualian) {
        try {
          var arieffEncodedUrl = btoa(arieffHrefAsli);
          
          arieffLink.href = arieffSafelinkUrl + "?url=" + arieffEncodedUrl;
          
          arieffLink.setAttribute("target", "_blank");
          arieffLink.setAttribute("rel", "nofollow noopener noreferrer");
        } catch (e) {
          console.error("Gagal encode URL:", e);
        }
      }
    }
  });
});
//]]>
</script>

Cara Mengatur Slot Iklan AdSense

Script ini sudah menyediakan 4 tempat strategis untuk memasang iklan AdSense. Caranya sangat mudah:

Kembali edit Halaman Safelink Anda pada mode Tampilan HTML.
Cari tulisan , , dan seterusnya.
Hapus tulisan tersebut, lalu masukkan kode script unit iklan AdSense Anda di sana.

DEMO SAFELINK

Custom Safelink Sesuai Keinginan Anda? Bisa!

Kami melayani jasa pembuatan desain safelink custom (warna, tata letak iklan, animasi loading khusus, dll) yang disesuaikan persis dengan tema blog Anda.

💰 Biaya Jasa: Rp 200.000,-

Tertarik? Silakan klik tombol di bawah ini untuk menghubungi kami secara langsung:

Hubungi Kami di Facebook

TUTORIAL