Cara Membuat Short Link / Safelink - Blogspot
Blogspot Web ToolsDokumentasi lengkap cara menginstal dan mengkonfigurasi sistem short link dengan fitur random redirect page untuk memaksimalkan CPC iklan di Blogspot. Sistem ini menggunakan Google Apps Script sebagai database dan Google Spreadsheet sebagai penyimpan data.
LIVE DEMO
Lihat langsung bagaimana sistem bekerja:
Demo Halaman Pembuat Short Link Demo Blog SafelinkKlik tombol di atas untuk mencoba membuat short link secara langsung
Bagian core yang wajib dipertahankan: mekanisme timer 15 detik, validasi ID dari parameter URL, fetch ke Google Apps Script, dan redirect ke destination URL. Mengubah ketiga komponen ini akan merusak fungsi safelink.
Fitur Utama Sistem
Random Redirect Page
Sistem akan memilih 1 dari 5 halaman artikel secara acak untuk memaksimalkan CPC iklan
Timer 15 Detik
Waktu tunggu untuk memastikan pengunjung melihat konten dan iklan Anda
Database Google Sheets
Semua data short link tersimpan rapi dengan tracking klik
Custom Slug
Buat short link dengan kata kunci custom yang mudah diingat
Komponen Sistem
| Komponen | Fungsi |
|---|---|
| Halaman Pembuat Link | Form untuk membuat short link baru |
| Halaman Safelink (5 halaman atau lebih) | Halaman dengan timer 15 detik + konten artikel CPC tinggi, Anda bisa mengatur sendiri |
| Google Apps Script | Backend API untuk menyimpan & mengambil data link |
| Google Spreadsheet | Tempat penyimpanan database link |
Source Code 1: Google Apps Script (Backend)
function doGet(e) {
const action = e.parameter.action;
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
let result = { error: 'Invalid action' };
try {
if (action == 'create') {
result = createShortLink(e, sheet);
} else if (action == 'get') {
result = getDestination(e, sheet);
} else if (action == 'list') {
result = listShortLinks(sheet);
} else if (action == 'updateClick') {
result = updateClickCount(e, sheet);
}
} catch (err) {
result = { error: err.toString() };
}
return ContentService.createTextOutput(JSON.stringify(result))
.setMimeType(ContentService.MimeType.JSON);
}
function createShortLink(e, sheet) {
const destination = e.parameter.destination;
let id = e.parameter.slug || generateRandomId(6);
const data = sheet.getDataRange().getValues();
for (let i = 1; i < data.length; i++) {
if (data[i][0] == id) return { error: 'Slug sudah digunakan' };
}
sheet.appendRow([id, destination, new Date().toISOString(), 0]);
return { success: true, id: id };
}
function getDestination(e, sheet) {
const id = e.parameter.id;
const data = sheet.getDataRange().getValues();
for (let i = 1; i < data.length; i++) {
if (data[i][0] == id) return { success: true, destination: data[i][1] };
}
return { error: 'Link tidak ditemukan' };
}
function updateClickCount(e, sheet) {
const id = e.parameter.id;
const data = sheet.getDataRange().getValues();
for (let i = 1; i < data.length; i++) {
if (data[i][0] == id) {
const currentClicks = parseInt(data[i][3] || 0);
sheet.getRange(i + 1, 4).setValue(currentClicks + 1);
return { success: true };
}
}
return { error: 'ID tidak ditemukan' };
}
function listShortLinks(sheet) {
const data = sheet.getDataRange().getValues();
const links = data.slice(1).map(row => ({
id: row[0],
destination: row[1],
created_at: row[2],
clicks: row[3] || 0
}));
return { success: true, links: links.reverse() };
}
function generateRandomId(length) {
const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
Source Code 2: Halaman Pembuat Short Link
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buat Short Link - High CPC Tool</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: transparent; padding: 20px; }
.container { max-width: 700px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid #e0e0e0; }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; }
.header h1 { font-size: 28px; margin-bottom: 10px; }
.content { padding: 30px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; }
input { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; }
input:focus { outline: none; border-color: #667eea; }
.short-url { background: #f5f5f5; padding: 15px; border-radius: 8px; margin: 20px 0; display: none; }
.short-url.show { display: block; }
.url-text { font-size: 18px; color: #667eea; word-break: break-all; margin: 10px 0; font-weight: bold; }
.url-text a { color: #667eea; text-decoration: none; }
.url-text a:hover { text-decoration: underline; }
button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 14px 30px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%; }
button:hover { transform: translateY(-2px); }
button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.alert { padding: 12px; border-radius: 8px; margin-bottom: 20px; display: none; text-align: center; font-weight: bold; }
.alert.error { background: #fee; color: #c33; border: 1px solid #fcc; display: block; }
.alert.success { background: #efe; color: #3c3; border: 1px solid #cfc; display: block; }
.info-text { font-size: 12px; color: #888; text-align: center; margin-top: 20px; padding: 10px; background: #f9f9f9; border-radius: 8px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Short Link Creator</h1>
<p>Generate high-earning short links randomly</p>
</div>
<div class="content">
<div class="alert" id="alert"></div>
<div class="form-group">
<label>URL Tujuan</label>
<input type="url" id="destinationUrl" placeholder="https://example.com/your-article" required>
</div>
<div class="form-group">
<label>Custom Slug (Opsional)</label>
<input type="text" id="customSlug" placeholder="my-custom-link">
</div>
<button onclick="generateShortLink()" id="generateBtn">Buat Short Link</button>
<div class="short-url" id="shortUrlResult">
<strong>Link Berhasil Dibuat:</strong>
<div class="url-text" id="shortUrlText"></div>
<button onclick="copyToClipboard()" style="background: #607d8b;">Copy Link</button>
</div>
<div class="info-text">
Sistem akan memilih 1 dari 5 halaman artikel secara acak untuk memaksimalkan CPC iklan.
</div>
</div>
</div>
<script>
// KONFIGURASI - SESUAIKAN DENGAN BLOG ANDA
const BLOG_URL = "https://namablog.blogspot.com/"; // GANTI DENGAN URL BLOG ANDA
const REDIRECT_PAGES = [
"p/finance.html", // GANTI dengan URL halaman safelink 1
"p/health.html", // GANTI dengan URL halaman safelink 2
"p/tech.html", // GANTI dengan URL halaman safelink 3
"p/law.html", // GANTI dengan URL halaman safelink 4
"p/travel.html" // GANTI dengan URL halaman safelink 5
];
const API_URL = "https://script.google.com/macros/s/xxxxxxxx/exec"; // GANTI DENGAN URL WEB APP ANDA
function getRandomPage() {
return REDIRECT_PAGES[Math.floor(Math.random() * REDIRECT_PAGES.length)];
}
async function generateShortLink() {
const destinationUrl = document.getElementById('destinationUrl').value;
const customSlug = document.getElementById('customSlug').value;
const generateBtn = document.getElementById('generateBtn');
if (!destinationUrl) {
showAlert('Masukkan URL tujuan!', 'error');
return;
}
try {
new URL(destinationUrl);
} catch(e) {
showAlert('URL tidak valid!', 'error');
return;
}
generateBtn.disabled = true;
generateBtn.innerHTML = 'Membuat...';
let url = `${API_URL}?action=create&destination=${encodeURIComponent(destinationUrl)}`;
if (customSlug) url += `&slug=${encodeURIComponent(customSlug)}`;
try {
const response = await fetch(url);
const result = await response.json();
if (result.error) {
showAlert(result.error, 'error');
} else if (result.success) {
const selectedPage = getRandomPage();
const shortUrl = `${BLOG_URL}${selectedPage}?id=${result.id}`;
document.getElementById('shortUrlText').innerHTML = `<a href="${shortUrl}" target="_blank">${shortUrl}</a>`;
document.getElementById('shortUrlResult').classList.add('show');
showAlert('Berhasil!', 'success');
document.getElementById('destinationUrl').value = '';
document.getElementById('customSlug').value = '';
}
} catch (error) {
console.error("Error:", error);
showAlert('Gagal terhubung ke database!', 'error');
} finally {
generateBtn.disabled = false;
generateBtn.innerHTML = 'Buat Short Link';
}
}
function copyToClipboard() {
const urlText = document.getElementById('shortUrlText').innerText;
navigator.clipboard.writeText(urlText).then(() => showAlert('Link disalin!', 'success'));
}
function showAlert(message, type) {
const alertDiv = document.getElementById('alert');
alertDiv.textContent = message;
alertDiv.className = 'alert ' + type;
setTimeout(() => {
alertDiv.className = 'alert';
}, 3000);
}
</script>
</body>
</html>
Source Code 3: Halaman Safelink (Timer + Artikel)
<div class="main-wrapper">
<div class="card">
<div class="waiting-box">
<div id="loader"><p>Initialising Security Protocol...</p></div>
<div id="content" style="display: none;">
<center>
<h3>Case File Verification</h3>
</center>
<div class="timer-circle">
<svg width="90" height="90" viewBox="0 0 100 100">
<circle class="ring-bg" cx="50" cy="50" r="45"/>
<circle class="ring-circle" id="circle" cx="50" cy="50" r="45" stroke-dasharray="282.7" stroke-dashoffset="282.7"/>
</svg>
<div class="timer-num" id="timer">15</div>
</div>
<center>
<button class="btn btn-step1" id="btn1" onclick="doScroll()">Please wait for review...</button>
</center>
</div>
</div>
</div>
<article class="article-body"><br>
<!-- GANTI KONTEN ARTIKEL DI BAWAH INI SESUAI NICHE ANDA -->
<h1>Understanding Personal Injury Law and Legal Representation</h1><br>
<p>Navigating the complex landscape of <strong>Personal Injury Law</strong> can be a daunting task for individuals who have suffered harm due to the negligence of others. Whether it is a <strong>car accident</strong>, workplace injury, or medical malpractice, seeking professional <strong>legal representation</strong> is the first step toward securing the compensation you rightfully deserve. A qualified <strong>attorney</strong> specializes in tort law, ensuring that the victim's rights are protected against powerful insurance companies and corporate entities.</p>
<br>
<h2>The Importance of an Experienced Trial Lawyer</h2><br>
<p>In high-stakes litigation, the expertise of a seasoned <strong>trial lawyer</strong> cannot be overstated. From gathering evidence to negotiating settlements, a dedicated <strong>law firm</strong> provides the necessary resources to build a compelling case. Many victims hesitate to seek <strong>legal advice</strong> due to concerns over costs; however, most <strong>personal injury lawyers</strong> operate on a contingency fee basis. This means they only receive payment if they win your case, making justice accessible to everyone regardless of their financial status.</p>
<br>
<p>Moreover, specialized fields such as <strong>mesothelioma litigation</strong>, product liability, or <strong>commercial truck accidents</strong> require deep technical knowledge. An expert <strong>lawyer</strong> will meticulously analyze medical records, accident reports, and witness testimonies to establish liability. In many instances, having a reputable <strong>legal counsel</strong> can lead to out-of-court settlements that are significantly higher than the initial offers made by insurance adjusters who often aim to minimize payouts.</p>
<br>
<h2>Strategic Legal Planning and Consultation</h2><br>
<p>Effective <strong>legal consultation</strong> involves a thorough assessment of the damages incurred, including medical expenses, lost wages, and emotional distress. Beyond immediate compensation, a comprehensive <strong>legal strategy</strong> accounts for future rehabilitation costs and long-term disability. Engaging a <strong>lawyer</strong> early in the process prevents common pitfalls, such as missing statutory deadlines or providing statements that could inadvertently jeopardize your claim. Professional attorneys act as a shield, handling all communications with third parties so that the victim can focus entirely on their recovery and physical well-being.</p>
<br>
<p>Furthermore, the legal landscape is constantly shifting with new precedents and regulations. A <strong>litigation expert</strong> stays updated on these changes to provide the most accurate advice. They also understand the psychological toll a legal battle can take. By offering compassionate yet firm guidance, they help clients navigate the emotional hurdles of the courtroom. Whether it's through mediation, arbitration, or a full jury trial, your legal team ensures that your voice is heard and that corporate negligence is held accountable under the full extent of the law.</p>
<br>
<ul>
<li><strong>Medical Malpractice:</strong> Holding healthcare providers accountable for errors and negligence.</li>
<li><strong>Wrongful Death:</strong> Seeking justice for families after a tragic and preventable loss.</li>
<li><strong>Product Liability:</strong> Suing manufacturers for defective, dangerous, or poorly labelled products.</li>
<li><strong>Class Action Lawsuits:</strong> Joining forces with other victims to challenge corporate misconduct.</li>
</ul>
<br>
<h2>Maximising Settlement Value and Future Security</h2><br>
<p>The goal of any <strong>personal injury claim</strong> is to restore the victim's life to the state it was in before the accident occurred. While money cannot replace health or a loved one, it provides the financial security needed to manage the aftermath. Experienced <strong>counsel</strong> will work with financial experts to calculate the "present value" of your future losses, ensuring that inflation and medical cost increases are considered. This level of detail is what separates a standard settlement from one that provides true lifelong security. Always remember that insurance companies have teams of lawyers working for them; you deserve a powerful legal team working for you.</p>
<!-- SAMPAI SINI KONTEN ARTIKEL YANG DIGANTI -->
</article>
<div id="finalArea" style="padding: 30px; text-align: center; margin-top: 25px;">
<h3>Case Verification Complete</h3>
<p style="margin-bottom:20px;">Authentication successful. You may now proceed to your requested destination.</p>
<!-- GANTI LINK ADS DI BAWAH INI -->
<div style="margin: 20px auto; padding: 25px; border: 3px solid #e74c3c; border-radius: 16px; max-width: 350px; background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%); box-shadow: 0 8px 20px rgba(0,0,0,0.15);">
<a href="https://your-ads-link.com" target="_blank" rel="noopener noreferrer" style="display: inline-block; padding: 14px 28px; background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%); color: white; text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);">
DOWNLOAD HERE
</a>
<p style="font-size: 13px; margin-top: 15px; color: #c0392b; font-weight: bold; background: #fed7d7; display: inline-block; padding: 5px 15px; border-radius: 20px;">Secure Legal Gateway • Instant Access</p>
</div>
<!-- SAMPAI SINI GANTI LINK ADS -->
<button id="btn2" onclick="go()" style="display: none; padding: 12px 24px; margin-top: 20px; cursor: pointer; background: #2c3e50; color: white; border: none; border-radius: 8px; font-weight: bold;">
Proceed to Destination
</button>
<div id="err" style="display:none; color: red; margin-top: 15px; font-weight: bold;"></div>
</div>
</div>
<style>
/* CSS FOR FUNCTION ONLY */
.timer-circle { width: 90px; height: 90px; margin: 20px auto; position: relative; }
.timer-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 26px; font-weight: bold; color: #e74c3c; }
svg { transform: rotate(-90deg); }
.ring-circle { transition: stroke-dashoffset 0.1s; stroke: #e74c3c; stroke-width: 6; fill: none; }
.ring-bg { stroke: #e2e8f0; stroke-width: 6; fill: none; }
.btn { border: none; padding: 12px 24px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; display: inline-block; }
.btn-step1 { background: #cbd5e1; color: #475569; opacity: 0.6; pointer-events: none; border: none; }
.btn-step1.active { background: #2c3e50; color: white; opacity: 1; pointer-events: auto; }
.main-wrapper { max-width: 800px; margin: 0 auto; padding: 20px; }
.waiting-box { padding: 20px; text-align: center; }
.card, .article-body, #finalArea { background: transparent; }
</style>
<script>
const API = "https://script.google.com/macros/s/xxxxxxxx/exec"; // GANTI DENGAN URL WEB APP ANDA
let t = 15;
let u = "";
let timerActive = false;
async function init(){
const p = new URLSearchParams(window.location.search);
const i = p.get('id');
if(!i){showErr("Invalid Access ID."); return;}
document.getElementById('loader').style.display = 'none';
document.getElementById('content').style.display = 'block';
start();
try {
const r = await fetch(`${API}?action=get&id=${i}`);
const d = await r.json();
if(d.success && d.destination){
u = d.destination;
fetch(`${API}?action=updateClick&id=${i}`).catch(e=>{});
} else {
showErr("Link has expired or was not found.");
}
} catch(e){
console.log("Fetch error, but timer continues...");
}
}
function start(){
if(timerActive) return;
timerActive = true;
const c = document.getElementById('circle');
const step = 282.7;
const b = document.getElementById('btn1');
const iv = setInterval(()=>{
t--;
document.getElementById('timer').textContent = t;
c.style.strokeDashoffset = step - (t/15)*step;
if(t <= 0){
clearInterval(iv);
document.getElementById('timer').textContent = "OK";
b.innerHTML = "Scroll to Bottom";
b.classList.add('active');
}
}, 1000);
}
function doScroll(){
document.getElementById('finalArea').scrollIntoView({ behavior: 'smooth' });
document.getElementById('btn2').style.display = 'inline-block';
}
function go(){
if(u) {
window.location.replace(u.startsWith('http') ? u : 'https://' + u);
} else {
alert("The secure link is still being fetched. Please wait a moment.");
}
}
function showErr(m){
document.getElementById('loader').style.display = 'none';
document.getElementById('content').style.display = 'none';
const e = document.getElementById('err');
e.style.display = 'block';
e.innerHTML = m;
}
init();
</script>
Langkah 1: Persiapan Google Spreadsheet
| A | B | C | D |
| ID | destination | created_at | clicks|
Langkah 2: Deploy Google Apps Script
- Execute as: Me (your email)
- Who has access: Anyone
Langkah 3: Membuat Halaman Postingan Safelink (Minimal 5 Halaman)
Cara membuat di Blogspot:
Langkah 4: Membuat Halaman Pembuat Short Link
- BLOG_URL - ganti dengan URL blog Anda
- REDIRECT_PAGES - ganti dengan URL 5 halaman safelink yang sudah dibuat
- API_URL - ganti dengan URL Web App dari Google Apps Script
Flow Sistem (Cara Kerja)
1. Pengunjung mengisi form di Halaman Pembuat Link
|
v
2. Data dikirim ke Google Apps Script -> tersimpan di Spreadsheet
|
v
3. Sistem memilih 1 dari 5 halaman safelink secara RANDOM
|
v
4. Short link dihasilkan: https://blog.com/p/finance.html?id=abc123
|
v
5. Pengunjung klik short link -> masuk halaman safelink
|
v
6. Timer 15 detik berjalan + konten artikel CPC tinggi
|
v
7. Setelah timer habis, tombol scroll muncul
|
v
8. Scroll ke bawah -> tombol "Proceed to Destination" muncul
|
v
9. Klik tombol -> redirect ke URL tujuan + mencatat klik
Yang Harus Anda Ganti Sendiri
| Lokasi | Yang Diganti | Keterangan |
|---|---|---|
| Source Code 1 (GAS) | Tidak perlu ganti apa-apa | Langsung copy-paste |
| Source Code 2 | BLOG_URL | Ganti dengan URL blog Anda |
| Source Code 2 | REDIRECT_PAGES | Ganti dengan URL 5 halaman safelink Anda |
| Source Code 2 & 3 | API_URL | Ganti dengan URL Web App dari GAS |
| Source Code 3 | Konten artikel | Sesuaikan dengan niche Anda |
| Source Code 3 | Link afiliasi/ADS | Ganti dengan link Anda sendiri |
Troubleshooting & Solusi
| Masalah | Solusi |
|---|---|
| Error "Slug sudah digunakan" | Custom slug sudah dipakai, biarkan kosong atau gunakan slug lain |
| Error "Gagal terhubung ke database" | Periksa API_URL di semua halaman, pastikan sudah benar dan redeploy GAS |
| Timer tidak berjalan | Pastikan kode JavaScript tidak error, cek console browser (F12) |
| Link tidak redirect setelah klik | Periksa destination URL di spreadsheet, pastikan formatnya valid |
| Halaman safelink tidak muncul | Pastikan URL di REDIRECT_PAGES sudah benar dan halaman sudah dipublish |
| Data tidak tersimpan | Cek izin akses Google Apps Script -> Deploy dengan "Anyone" |
Sistem short link ini sudah siap pakai. Ikuti langkah-langkah di atas:
1. Buat Google Spreadsheet + deploy Google Apps Script (Source Code 1)
2. Buat 5 halaman safelink (Source Code 3) - ganti konten artikel dan link ads
3. Buat 1 halaman pembuat link (Source Code 2) - ganti konfigurasi
Dengan randomisasi halaman berbeda, CPC iklan Anda akan lebih maksimal.
- Demo Pembuat Link: https://page-safelinkdemo.blogspot.com/2026/04/demo-safelink.html
- Demo Blog Safelink: https://page-safelinkdemo.blogspot.com/p/law.html?id=gysny7/a>
Dokumentasi Sistem Short Link / Safelink - Simpan untuk referensi
Core system protected - jangan ubah bagian kritis yang sudah ditandai
