Articles: Blogger

Membuat Template Blogger Mulai dari Nol

Thu, 01 Jan 1970 00:00:00 +0000

Tujuan: Membangun template Blogger dari kerangka kosong secara bertahap — mulai dari header, footer, sidebar, hingga area postingan — sehingga pemula bisa melihat langsung perubahan yang terjadi di blog mereka.

Prasyarat

Akun Google & blog Blogger yang sudah dibuat
Akses ke Tema → Edit HTML di dashboard Blogger
Browser (disarankan Chrome/Firefox)
Semangat belajar

Cara Mengganti Template di Blogger

Login ke blogger.com
Pilih blog Anda → klik Tema di menu kiri
Klik tombol Edit HTML (ikon pensil)
Hapus semua kode yang ada
Tempel kode baru dari tutorial ini
Klik Simpan tema
Buka blog Anda di tab baru untuk melihat hasilnya

💡 Tips: Buka blog Anda di tab terpisah, lalu setiap selesai menyimpan, refresh tab tersebut untuk melihat perubahannya langsung.

Tahap 1 — Kerangka Dasar (Hanya Tulang)

Kita mulai dari kerangka paling sederhana: hanya struktur HTML tanpa konten apapun. Ini untuk memastikan template terbaca oleh Blogger tanpa error.






  
  
  <data:view.title.escape/>

  



  
    Blog saya sedang dibangun...

Apa yang terjadi?

Simpan dan refresh blog Anda. Anda akan melihat halaman putih dengan tulisan "Blog saya sedang dibangun..."

Ini artinya:

Blogger menerima template Anda
Judul tab browser sudah menggunakan nama blog Anda (lihat )
CSS dasar sudah aktif

Penjelasan Kode Penting

Kode	Fungsi
`b:css='false'`	Mematikan CSS bawaan Blogger agar kita pakai CSS sendiri
`b:layoutsversion='3'`	Menggunakan versi layout Blogger terbaru
`xmlns:b`, `xmlns:data`, `xmlns:expr`	Namespace yang dibutuhkan agar tag Blogger (`b:section`, `data:`, dll) bisa dibaca
	Tag Blogger untuk menampilkan judul halaman secara otomatis
	Tempat menulis CSS utama template

Tahap 2 — Menambahkan Header

Sekarang kita tambahkan header — bagian paling atas blog yang biasanya berisi nama blog dan deskripsi.

Ganti seluruh kode dengan yang berikut:






  
  
  <data:view.title.escape/>

Cara Menambahkan Widget Header

Setelah menyimpan dan refresh blog, Anda akan melihat area gelap di atas (header). Tapi masih kosong! Sekarang:

Kembali ke dashboard Blogger → Tata Letak
Anda akan melihat kotak bertuliskan "header-section"
Klik tombol Tambah Widget di kotak header
Pilih widget Header → Simpan
Refresh blog Anda

Hasilnya: Nama blog dan deskripsi muncul di header dengan latar belakang gelap.

Penjelasan

Atribut	Fungsi
`id`	Nama unik untuk section ini (wajib, tidak boleh sama)
`maxwidgets='1'`	Membatasi hanya 1 widget yang bisa ditambahkan di sini
`showaddelement='yes'`	Menampilkan tombol "Tambah Widget" di mode Tata Letak

Tahap 3 — Menambahkan Footer

Footer adalah bagian paling bawah blog. Mari kita tambahkan sekarang.

Ganti seluruh kode dengan:






  
  
  <data:view.title.escape/>

  



  

    
      
    

    
    
      [ Area Postingan & Sidebar — segera hadir ]

Cara Menambahkan Widget Footer

Kembali ke Tata Letak
Di area footer-section, klik Tambah Widget
Pilih Teks → ketik "© 2025 Blog Saya. Hak cipta dilindungi." → Simpan
Refresh blog

Hasilnya: Sekarang blog Anda sudah punya header di atas, area kosong di tengah (placeholder), dan footer di bawah.

Tahap 4 — Menambahkan Sidebar

Sekarang kita bentuk layout dua kolom: konten utama di kiri dan sidebar di kanan.

Ganti seluruh kode dengan:






  
  
  <data:view.title.escape/>

  



  

    
      
    

    

      
        
        [ Area Postingan — segera hadir ]

Cara Mengisi Sidebar

Buka Tata Letak di dashboard
Di kotak sidebar-section, klik Tambah Widget
Coba tambahkan:
- Arsip Blog — menampilkan arsip postingan per bulan
- Label — menampilkan semua label/kategori
- Tentang Saya — profil singkat Anda
Simpan dan refresh blog

Hasilnya: Blog Anda sekarang punya dua kolom — kiri untuk konten, kanan untuk sidebar. Di layar HP (< 768px), keduanya akan tampil berurutan ke bawah secara otomatis berkat CSS flexbox + @media.

Memahami Flexbox yang Digunakan

.main-container {
  display: flex;        /* aktifkan flexbox */
  flex-direction: column; /* default: kolom (untuk HP) */
  gap: 20px;
}
@media (min-width: 768px) {
  .main-container {
    flex-direction: row; /* di layar lebar: jadi baris (kolom-kolom berdampingan) */
  }
}

main  { flex: 3; } /* ambil 3 bagian dari ruang tersedia */
aside { flex: 1; } /* ambil 1 bagian dari ruang tersedia */

Artinya: main mendapat 75% lebar, sidebar mendapat 25% lebar.

Tahap 5 — Menambahkan Area Postingan (Blog1)

Ini tahap terakhir dan paling penting. Kita akan mengganti placeholder dengan yang menampilkan postingan sungguhan.

⚠️ Perhatian: Widget Blog1 memang menghasilkan kode yang panjang. Tapi di tahap ini Anda sudah paham strukturnya, jadi tidak perlu khawatir.

Ganti seluruh kode dengan versi final berikut:






  
  
  <data:view.title.escape/>

  



  

    
      
    

    

      
        

          
            
              false
            
            

              
              
                

                  
                  
                    
                  

                  
                  
                     • oleh 
                  

                  
                  
                    
                      
                      
                    
                      
                      
                      Baca selengkapnya →
                    
                  

                  
                  
                    
                      Label:
                      
                        
                      
                    
                  

                
              

              
              
                
                  ← Postingan lebih baru
                
                
                  Postingan lebih lama →

Cara Kerja Widget Blog1

Widget ini berisi tag-tag Blogger untuk menampilkan data dari database blog Anda:

Tag	Fungsi
	Mengulang (loop) untuk setiap postingan yang ada
	Menampilkan judul postingan
	URL / link ke postingan
	Tanggal postingan
	Nama penulis
	Isi lengkap postingan
	Ringkasan/preview postingan (untuk beranda)
	Kondisi: apakah ini halaman postingan tunggal?
	Loop untuk setiap label postingan
`data:newerPageUrl`	URL halaman postingan lebih baru
`data:olderPageUrl`	URL halaman postingan lebih lama

Ringkasan

Tahap	Yang Dilakukan	Hasilnya
1	Kerangka HTML dasar	Halaman terbaca, judul dari nama blog
2	Header + b:section	Area header gelap, bisa tambah widget nama blog
3	Footer + placeholder tengah	Blog punya kepala & kaki
4	Sidebar + flexbox layout	Dua kolom: konten & sidebar
5	Widget Blog1	Postingan asli tampil lengkap

Langkah Selanjutnya

Setelah template berjalan, Anda bisa mengembangkannya lebih lanjut:

Ubah warna — ganti nilai #2c3e50 dan #e74c3c dengan warna pilihan Anda
Ganti font — tambahkan Google Fonts di dalam
Sempurnakan responsif — uji di berbagai ukuran layar
Tambah SEO — tambahkan meta description dan Open Graph tags
Dark mode — tambahkan CSS @media (prefers-color-scheme: dark)
Komentar — tambahkan widget komentar di bawah

Tutorial ini dibuat untuk pemula yang ingin memahami template Blogger dari dalam. Selamat bereksperimen!

Cara Membuat PageSpeed Tester Sendiri untuk Blog

Thu, 01 Jan 1970 00:00:00 +0000

Tutorial lengkap membuat tool PageSpeed Tester yang aman dan gratis untuk blog Blogger Anda. Tool ini menggunakan Google PageSpeed Insights API dengan Cloudflare Worker sebagai proxy untuk menyembunyikan API key.

Apa yang Akan Anda Buat

Tool yang bisa:

Cek skor Performance, Accessibility, Best Practices, dan SEO halaman manapun
Tampilkan Core Web Vitals (FCP, LCP, TBT, CLS, dll)
Berikan rekomendasi perbaikan diurutkan berdasarkan impact
Cache hasil 1 jam untuk hemat quota
100% gratis (Google API quota gratis cukup untuk blog normal)

Mengapa Butuh Cloudflare Worker?

API Google butuh API key untuk akses unlimited. Kalau key disimpan langsung di JavaScript blog Anda:

Key terlihat di view-source dan Network tab browser
Siapa saja bisa copy key Anda
Pakai untuk panggil API mereka sendiri
Quota Anda habis, atau worse — kena billing kalau key Anda attach ke service berbayar

Solusi: Simpan key di Cloudflare Worker (server). Tool browser hanya panggil Worker, Worker yang panggil Google API.

Browser (tool Anda) → Cloudflare Worker (key di sini) → Google PageSpeed API

Key tidak pernah keluar dari server. Aman.

Prasyarat

Sebelum mulai, siapkan:

Akun Google (untuk Google Cloud Console)
Akun Cloudflare (gratis, daftar di cloudflare.com)
Blog Blogger Anda

Tidak perlu credit card untuk setup ini.

STEP 1: Dapatkan Google API Key

1.1 Aktifkan PageSpeed Insights API

Buka Google Cloud Console
Buat project baru (atau pilih yang sudah ada)
Di sidebar kiri: APIs & Services → Library
Search: "PageSpeed Insights API"
Klik hasil, lalu Enable

1.2 Buat API Key

APIs & Services → Credentials
Create Credentials → API key
Key baru muncul. Copy key tersebut dan simpan sementara di Notepad/text editor
Klik Edit API key untuk setup restriction

1.3 Set Restriction (Sangat Penting!)

Tanpa restriction, key bisa dipakai siapa saja yang punya key tersebut.

Application restrictions:

Pilih Websites
Klik Add an item
Isi domain Anda:
- *.laluabdrahman.com* (ganti dengan domain Anda)
- https://laluabdrahman.com/*
- https://www.laluabdrahman.com/*

API restrictions:

Pilih Restrict key
Centang hanya "PageSpeed Insights API"
Klik Save

Tips keamanan: Restriction ini berarti key Anda tidak bisa dipakai dari domain lain ATAU untuk API Google lain (Maps, Translate, dll yang berbayar).

STEP 2: Deploy Cloudflare Worker

2.1 Buat Worker Baru

Login ke Cloudflare dashboard
Sidebar kiri: Workers & Pages
Klik Create application → Create Worker
Beri nama, misal: pagespeed-proxy
Klik Deploy (dengan default code)
Setelah deploy, klik Edit code

2.2 Paste Kode Worker

Hapus semua default code, paste kode berikut:

export default {
  async fetch(request, env, ctx) {
    // CORS preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, { status: 204, headers: corsHeaders() });
    }
    if (request.method !== 'GET') {
      return errorResponse('Only GET allowed', 405);
    }

    const url = new URL(request.url);
    const targetUrl = url.searchParams.get('url');
    const strategy = (url.searchParams.get('strategy') || 'mobile').toLowerCase();

    if (!targetUrl) {
      return errorResponse('Missing url parameter', 400);
    }
    if (!['mobile', 'desktop'].includes(strategy)) {
      return errorResponse('strategy must be mobile or desktop', 400);
    }

    // Validate target URL
    let target;
    try {
      target = new URL(targetUrl);
    } catch (e) {
      return errorResponse('Invalid URL format', 400);
    }
    if (!['http:', 'https:'].includes(target.protocol)) {
      return errorResponse('Only http(s) protocol allowed', 403);
    }

    // SSRF prevention
    const hostname = target.hostname.toLowerCase();
    if (['localhost', '127.0.0.1', '0.0.0.0', '::1'].includes(hostname) ||
        /^10\./.test(hostname) ||
        /^172\.(1[6-9]|2\d|3[01])\./.test(hostname) ||
        /^192\.168\./.test(hostname) ||
        /^169\.254\./.test(hostname)) {
      return errorResponse('Hostname not allowed', 403);
    }

    if (!env.GOOGLE_API_KEY) {
      return errorResponse('Worker not configured: missing GOOGLE_API_KEY secret', 500);
    }

    // Cache check
    const cacheKey = new Request(
      `https://psi-cache.internal/${strategy}/${encodeURIComponent(target.href)}`,
      { method: 'GET' }
    );
    const cache = caches.default;
    let cached = await cache.match(cacheKey);
    if (cached) {
      const newHeaders = new Headers(cached.headers);
      newHeaders.set('X-PSI-Cache', 'HIT');
      return new Response(cached.body, { status: cached.status, headers: newHeaders });
    }

    // Call Google PageSpeed API
    const apiUrl = new URL('https://www.googleapis.com/pagespeedonline/v5/runPagespeed');
    apiUrl.searchParams.set('url', target.href);
    apiUrl.searchParams.set('strategy', strategy);
    ['performance', 'accessibility', 'best-practices', 'seo'].forEach(cat => {
      apiUrl.searchParams.append('category', cat);
    });
    apiUrl.searchParams.set('key', env.GOOGLE_API_KEY);

    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 60000);

      // GANTI Referer di bawah dengan domain blog Anda
      const apiRes = await fetch(apiUrl.toString(), {
        headers: { 'Referer': 'https://www.laluabdrahman.com/' },
        signal: controller.signal
      });
      clearTimeout(timeoutId);

      if (!apiRes.ok) {
        let errMsg = `Google API returned HTTP ${apiRes.status}`;
        try {
          const errBody = await apiRes.json();
          if (errBody.error?.message) errMsg = errBody.error.message;
        } catch (e) {}
        return errorResponse(errMsg, apiRes.status === 429 ? 429 : 502);
      }

      const data = await apiRes.json();
      const response = new Response(JSON.stringify(data), {
        status: 200,
        headers: {
          ...corsHeaders(),
          'Content-Type': 'application/json',
          'Cache-Control': 'public, max-age=3600',
          'X-PSI-Cache': 'MISS'
        }
      });

      ctx.waitUntil(cache.put(cacheKey, response.clone()));
      return response;
    } catch (err) {
      if (err.name === 'AbortError') {
        return errorResponse('PageSpeed API timeout (>60s)', 504);
      }
      return errorResponse('Fetch failed: ' + err.message, 502);
    }
  }
};

function corsHeaders() {
  return {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type'
  };
}

function errorResponse(message, status) {
  return new Response(JSON.stringify({ error: message }), {
    status,
    headers: { ...corsHeaders(), 'Content-Type': 'application/json' }
  });
}

PENTING: Cari baris 'Referer': 'https://www.laluabdrahman.com/' dan ganti dengan domain Anda. Ini harus match dengan restriction key di Google Cloud Console.

Klik Save and deploy.

2.3 Tambah API Key sebagai Secret

Sekarang masukkan API key Anda ke Worker sebagai secret (encrypted):

Di Worker → tab Settings
Scroll ke section Variables and Secrets
Klik + Add
Isi:
- Type: Secret (penting! bukan Text)
- Variable name: GOOGLE_API_KEY (case-sensitive, persis seperti ini)
- Value: paste API key dari Step 1.2
Klik Save

Catatan: Setelah secret ditambahkan, Worker mungkin perlu di-redeploy. Buka tab Deployments, kalau tidak ada deployment baru otomatis, edit kode dan save lagi (tambah satu spasi lalu hapus juga cukup).

2.4 Test Worker

Buka di browser:

https://pagespeed-proxy.YOUR-NAME.workers.dev/?url=https://example.com&strategy=mobile

Ganti YOUR-NAME dengan subdomain Worker Anda.

Expected:

Tunggu 15-40 detik
Lihat JSON besar muncul dengan field lighthouseResult
Jika ada error, baca pesan dan cek troubleshooting di bawah

Catat URL Worker Anda — akan dipakai di Step 3.

STEP 3: Setup Tool HTML di Blogger

3.1 Edit Konfigurasi Tool

Buka file pagespeed-tester.html Anda. Cari baris ini (sekitar baris 510):

const WORKER_URL = '';

Ganti dengan URL Worker Anda:

const WORKER_URL = 'https://pagespeed-proxy.YOUR-NAME.workers.dev/';

3.2 Paste ke Blogger

Blogger dashboard → Pages → New Page
Klik mode HTML view (bukan Compose)
Paste seluruh isi file pagespeed-tester.html
Beri title halaman: "PageSpeed Tester"
Publish

3.3 Test Tool

Buka halaman yang baru dipublish, lalu:

Input URL, contoh: https://example.com
Pilih Mobile atau Desktop
Klik Mulai Tes
Tunggu 15-40 detik
Hasil muncul dengan score rings, Core Web Vitals, dan rekomendasi

Cache test:

Klik Mulai Tes lagi dengan URL dan strategy sama
Harusnya muncul <1 detik dari cache
Footer berubah jadi: "✓ dari cache"

Troubleshooting

Error: "Worker not configured: missing GOOGLE_API_KEY secret"

Secret belum tersimpan atau Worker belum redeploy. Solusi:

Cek di Settings → Variables and Secrets, pastikan ada GOOGLE_API_KEY (case-sensitive)
Pastikan Type-nya Secret, bukan Text
Edit kode Worker, save lagi untuk trigger redeploy

Error: "Requests from referer are blocked"

API key Anda di-restrict ke domain, tapi Worker tidak kirim Referer header.

Solusi: Pastikan di kode Worker ada baris ini di dalam fetch() ke Google API:

headers: { 'Referer': 'https://www.YOUR-DOMAIN.com/' }

Domain di sini harus match dengan salah satu restriction di Google Cloud Console.

Tombol "Mulai Tes" tidak respon

Buka Developer Console (F12 → Console), lihat error apa yang muncul.

Cek juga:

WORKER_URL sudah diisi dengan URL Worker Anda
URL Worker bisa diakses langsung di browser

Error: "HTTP 429" (Too Many Requests)

Rate limit dari Google. Tunggu 1-2 menit, lalu coba lagi. Atau:

Pastikan API key sudah terkonfigurasi dengan benar
Caching seharusnya mengurangi request rate

Hasil PageSpeed berbeda dari pagespeed.web.dev

Normal. Score PageSpeed bisa fluktuasi 5-10 point antar test karena:

Variasi network condition di server Google
Random sampling dari data CrUX (Chrome User Experience Report)
Cache TTL yang berbeda

Untuk benchmark akurat, jalankan test 3-5 kali dan ambil median.

Quota dan Biaya

Google PageSpeed Insights API

25,000 query per hari gratis
Cukup untuk blog normal — bahkan dengan caching off
Tidak perlu billing setup

Cloudflare Workers

100,000 request per hari gratis (free tier)
10ms CPU time per request (kita pakai jauh lebih sedikit)
Cache pakai Cloudflare Cache API (built-in, gratis)

Estimasi penggunaan blog dengan 1,000 visitor/hari

Asumsi: 1% visitor pakai tool = 10 test/hari

Resource	Limit	Penggunaan
Cloudflare Workers	100k/hari	10 req
Google API	25k/hari	10 req
Cache hit rate	-	~30% (URL repeat)

Penggunaan masih jauh di bawah free tier. Aman untuk blog dengan trafik wajar.

Cara Kerja Detail

Arsitektur Defense in Depth

Tool ini punya 5 layer keamanan:

Key disembunyikan di Worker secret — encrypted di Cloudflare, tidak visible di dashboard setelah disimpan
API restriction di Google — key hanya bisa pakai PageSpeed Insights API, bukan Maps/Translate yang berbayar
Website restriction di Google — referer harus match domain Anda
Worker forward referer — memungkinkan website restriction bekerja meski request datang dari Cloudflare IP
SSRF prevention di Worker — block private IP dan localhost di parameter URL

Kalau salah satu layer compromised, layer lain masih protect:

Key bocor → masih di-restrict ke PageSpeed Insights API only
Restriction lemah → key tetap tidak visible di browser

Cache Strategy

Worker pakai Cloudflare Cache API (built-in, no setup):

Cache key: URL + strategy
TTL: 1 jam (3600 detik)
Storage: Cloudflare edge, automatic eviction

Mobile dan Desktop terhitung cache terpisah. Cache di-share antar visitor — jadi kalau 100 orang test URL sama, hanya 1 yang fresh fetch, sisanya dari cache.

Kenapa Hasil Pertama Lambat?

Google PageSpeed API actually menjalankan Lighthouse audit di server mereka — load page, render, simulate user interaction, analyze. Itu butuh 15-40 detik. Tidak bisa diakselerasi.

Setelah cache, hasil instan karena tidak perlu re-audit.

Kesimpulan

Anda sekarang punya tool PageSpeed Tester sendiri yang:

Gratis sampai 25k test/hari (jauh di atas kebutuhan blog normal)
Aman — API key tidak pernah terlihat publik
Cepat untuk repeat test (cache 1 jam)
Customizable — bisa modify UI, tambah fitur, dll

Tool ini juga jadi foundation pattern untuk tool lain yang butuh API key. Misalnya kalau Anda mau buat:

Image Alt Text Generator (pakai OpenAI/Claude API)
SERP Checker (pakai SerpApi)
Backlink Checker (pakai Ahrefs API)

Polanya sama: Worker proxy + secret env variable.

Selamat mencoba!