Articleshttps://lalu.pro/articles/Baca artikel kamienMembuat Template Blogger Mulai dari Nolhttps://lalu.pro/articles/tutorial/membuat-template-blogger-mulai-dari-nol-r5/

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

  1. Login ke blogger.com

  2. Pilih blog Anda โ†’ klik Tema di menu kiri

  3. Klik tombol Edit HTML (ikon pensil)

  4. Hapus semua kode yang ada

  5. Tempel kode baru dari tutorial ini

  6. Klik Simpan tema

  7. 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.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>
    <p>Blog saya sedang dibangun...</p>
  </div>
</body>

</html>

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 <data:view.title.escape/>)

  • 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

<data:view.title.escape/>

Tag Blogger untuk menampilkan judul halaman secara otomatis

<b:skin><![CDATA[ ... ]]></b:skin>

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:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

  </div>
</body>

</html>

Cara Menambahkan Widget Header

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

  1. Kembali ke dashboard Blogger โ†’ Tata Letak

  2. Anda akan melihat kotak bertuliskan "header-section"

  3. Klik tombol Tambah Widget di kotak header

  4. Pilih widget Header โ†’ Simpan

  5. Refresh blog Anda

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

Penjelasan <b:section>

<b:section id='header-section' maxwidgets='1' showaddelement='yes'/>

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:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      margin-top: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <!-- Area tengah (isi & sidebar) akan ditambahkan nanti -->
    <div style='background:#fff; padding:20px; border-radius:6px; min-height:200px; margin-bottom:20px;'>
      <p style='color:#999; text-align:center;'>[ Area Postingan &amp; Sidebar โ€” segera hadir ]</p>
    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Menambahkan Widget Footer

  1. Kembali ke Tata Letak

  2. Di area footer-section, klik Tambah Widget

  3. Pilih Teks โ†’ ketik "ยฉ 2025 Blog Saya. Hak cipta dilindungi." โ†’ Simpan

  4. 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:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === LAYOUT TENGAH === */
    .main-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (min-width: 768px) {
      .main-container {
        flex-direction: row;
      }
    }

    /* === AREA KONTEN UTAMA === */
    main {
      flex: 3;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      min-height: 300px;
    }

    /* === SIDEBAR === */
    aside {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }
    aside h2, aside h3 {
      font-size: 1em;
      border-bottom: 2px solid #2c3e50;
      padding-bottom: 6px;
      margin-top: 0;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <div class='main-container'>

      <main id='main-content' role='main'>
        <!-- Postingan akan ditambahkan di tahap berikutnya -->
        <p style='color:#999; text-align:center;'>[ Area Postingan โ€” segera hadir ]</p>
      </main>

      <aside id='sidebar' role='complementary'>
        <b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'/>
      </aside>

    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Mengisi Sidebar

  1. Buka Tata Letak di dashboard

  2. Di kotak sidebar-section, klik Tambah Widget

  3. Coba tambahkan:

    • Arsip Blog โ€” menampilkan arsip postingan per bulan

    • Label โ€” menampilkan semua label/kategori

    • Tentang Saya โ€” profil singkat Anda

  4. 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 <b:widget id='Blog1'> 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:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsversion='3'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='utf-8'/>
  <meta content='width=device-width,initial-scale=1' name='viewport'/>
  <title><data:view.title.escape/></title>

  <b:skin><![CDATA[
    * { box-sizing: border-box; }
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color: #333;
    }
    .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* === HEADER === */
    header {
      background: #2c3e50;
      color: #fff;
      padding: 30px 20px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    header a {
      color: #fff;
      text-decoration: none;
    }

    /* === LAYOUT TENGAH === */
    .main-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (min-width: 768px) {
      .main-container {
        flex-direction: row;
      }
    }

    /* === AREA KONTEN UTAMA === */
    main {
      flex: 3;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }

    /* === POSTINGAN === */
    .post {
      margin-bottom: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid #eee;
    }
    .post:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    .post-title {
      font-size: 1.5em;
      margin: 0 0 8px 0;
    }
    .post-title a {
      color: #2c3e50;
      text-decoration: none;
    }
    .post-title a:hover {
      color: #e74c3c;
    }
    .post-meta {
      font-size: 0.85em;
      color: #888;
      margin-bottom: 14px;
    }
    .post-body {
      line-height: 1.7;
    }
    .post-labels {
      margin-top: 12px;
      font-size: 0.85em;
    }
    .post-labels a {
      background: #eaf2ff;
      color: #2980b9;
      padding: 2px 8px;
      border-radius: 12px;
      text-decoration: none;
      margin-right: 4px;
    }

    /* === NAVIGASI HALAMAN === */
    .blog-pager {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 0.9em;
    }
    .blog-pager a {
      background: #2c3e50;
      color: #fff;
      padding: 8px 16px;
      border-radius: 4px;
      text-decoration: none;
    }
    .blog-pager a:hover {
      background: #e74c3c;
    }

    /* === SIDEBAR === */
    aside {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
    }
    aside h2, aside h3 {
      font-size: 1em;
      border-bottom: 2px solid #2c3e50;
      padding-bottom: 6px;
      margin-top: 0;
    }

    /* === FOOTER === */
    footer {
      background: #2c3e50;
      color: #ccc;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.9em;
    }
    footer a {
      color: #aed6f1;
      text-decoration: none;
    }
  ]]></b:skin>
</head>

<body>
  <div class='wrapper'>

    <header role='banner'>
      <b:section class='header-section' id='header-section' maxwidgets='1' showaddelement='yes'/>
    </header>

    <div class='main-container'>

      <main id='main-content' role='main'>
        <b:section class='main-section' id='main-section' showaddelement='yes'>

          <b:widget id='Blog1' locked='false' title='Postingan Blog' type='Blog' version='2'>
            <b:widget-settings>
              <b:widget-setting name='showDateHeader'>false</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main' var='top'>

              <!-- Loop semua postingan -->
              <b:loop values='data:posts' var='post'>
                <article class='post' expr:id='"post-" + data:post.id'>

                  <!-- Judul postingan -->
                  <h2 class='post-title'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  </h2>

                  <!-- Meta: tanggal & penulis -->
                  <div class='post-meta'>
                    <data:post.dateHeader/> &#8226; oleh <data:post.author/>
                  </div>

                  <!-- Isi postingan -->
                  <div class='post-body'>
                    <b:if cond='data:view.isPost'>
                      <!-- Di halaman postingan tunggal: tampilkan semua isi -->
                      <data:post.body/>
                    <b:else/>
                      <!-- Di halaman beranda: tampilkan ringkasan / snippet -->
                      <data:post.snippets/>
                      <a expr:href='data:post.url'>Baca selengkapnya &#8594;</a>
                    </b:if>
                  </div>

                  <!-- Label / kategori -->
                  <b:if cond='data:post.labels'>
                    <div class='post-labels'>
                      Label:
                      <b:loop values='data:post.labels' var='label'>
                        <a expr:href='data:label.url'><data:label.name/></a>
                      </b:loop>
                    </div>
                  </b:if>

                </article>
              </b:loop>

              <!-- Navigasi halaman (Lebih Baru / Lebih Lama) -->
              <div class='blog-pager'>
                <b:if cond='data:newerPageUrl'>
                  <a expr:href='data:newerPageUrl'>&#8592; Postingan lebih baru</a>
                </b:if>
                <b:if cond='data:olderPageUrl'>
                  <a expr:href='data:olderPageUrl'>Postingan lebih lama &#8594;</a>
                </b:if>
              </div>

            </b:includable>
          </b:widget>

        </b:section>
      </main>

      <aside id='sidebar' role='complementary'>
        <b:section class='sidebar-section' id='sidebar-section' showaddelement='yes'/>
      </aside>

    </div>

    <footer role='contentinfo'>
      <b:section class='footer-section' id='footer-section' showaddelement='yes'/>
    </footer>

  </div>
</body>

</html>

Cara Kerja Widget Blog1

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

Tag

Fungsi

<b:loop values='data:posts' var='post'>

Mengulang (loop) untuk setiap postingan yang ada

<data:post.title/>

Menampilkan judul postingan

<data:post.url/>

URL / link ke postingan

<data:post.dateHeader/>

Tanggal postingan

<data:post.author/>

Nama penulis

<data:post.body/>

Isi lengkap postingan

<data:post.snippets/>

Ringkasan/preview postingan (untuk beranda)

<b:if cond='data:view.isPost'>

Kondisi: apakah ini halaman postingan tunggal?

<b:loop values='data:post.labels'>

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 <head>

  • 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 <data:post.body/>

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

]]>5Sun, 21 Jun 2026 00:45:49 +0000Tutorial: Membuat Cover Forum Style IPS untuk XenForohttps://lalu.pro/articles/forum-software/tutorial-membuat-cover-forum-style-ips-untuk-xenforo-r4/Panduan lengkap membangun tampilan cover forum dengan layout 2 kolom (gambar + info di kiri, daftar thread terbaru di kanan) โ€” mirip gaya Invision Community / IPS, tapi natif di XenForo. Tanpa beli style komersial.

Estimasi waktu: 30โ€“45 menit Tingkat: Menengah (perlu nyaman edit file PHP via FTP dan template XenForo)

Konsep tampilan akhir: cover di kiri, daftar thread terbaru di kanan, border atas warna berbeda per kategori.

Lihat demo: https://forum.intutekno.com/

1. Yang Akan Dibuat

Setiap forum di halaman utama akan menampilkan:

Kolom kiri (30% lebar):

  • Cover image 3:2 (SVG/WebP/JPG)

  • Judul forum (link ke forum)

  • Deskripsi forum

  • Statistik (jumlah threads & messages)

Kolom kanan (70% lebar):

  • 5 thread terbaru dengan avatar, judul, username, tanggal, jumlah replies

  • Atau ikon + pesan "Belum ada thread" kalau forum masih kosong

Bonus: Border-top tiap card forum bisa diwarnai berbeda berdasarkan kategori induk-nya.

2. Prasyarat

  • XenForo 2.3.x (panduan ini diuji di 2.3.10)

  • Akses AdminCP

  • Akses FTP/File Manager ke server (untuk upload PHP files)

  • Akses cPanel atau setara untuk backup database (opsional tapi disarankan)

  • Pemahaman dasar HTML/CSS akan membantu

3. Backup Dulu

Sebelum apa pun, lakukan dua backup:

Backup database:

  • cPanel โ†’ phpMyAdmin โ†’ pilih database forum โ†’ Export โ†’ Quick โ†’ Go

Backup file:

  • File Manager cPanel โ†’ kompres folder forum jadi .zip โ†’ download

Kalau ada yang salah saat ngoprek, kita bisa balik ke kondisi awal.

4. Aktifkan Development Mode

Buka /src/config.php lewat File Manager atau FTP. Tambahkan dua baris ini di paling bawah:

$config['development']['enabled'] = true;
$config['development']['defaultAddOn'] = 'Intutekno/CoverForum';

Ganti Intutekno/CoverForum sesuai nama yang Anda inginkan (format: VendorName/AddOnName). Setelah save, refresh AdminCP โ€” menu Development dan Add-ons akan muncul di sidebar.

5. Bikin Add-on PHP

Add-on ini bertugas menjalankan satu fungsi: mengambil 5 thread terbaru dari sebuah forum dan menyediakannya untuk dipakai di template.

5.1. Buat folder add-on

Via FTP, buat struktur folder:

/src/addons/Intutekno/CoverForum/

5.2. Buat file addon.json

Isi:

{
    "title": "Intutekno Cover Forum",
    "version_string": "1.0.0",
    "version_id": 1000070,
    "dev": "Intutekno",
    "supported": true
}

5.3. Buat file Listener.php

<?php
namespace Intutekno\CoverForum;

class Listener
{
    public static function templaterSetup(\XF\Container $container, \XF\Template\Templater &$templater)
    {
        $templater->addFunction('latest_forum_threads',
            ['Intutekno\CoverForum\TemplateHelper', 'templaterFunction']
        );
    }
}

5.4. Buat file TemplateHelper.php

<?php
namespace Intutekno\CoverForum;

class TemplateHelper
{
    public static function templaterFunction($templater, &$escape, $nodeId, $limit = 5)
    {
        $escape = false;
        return self::getLatestThreads($nodeId, $limit);
    }

    public static function getLatestThreads($nodeId, $limit = 5)
    {
        $finder = \XF::finder('XF:Thread')
            ->where('node_id', $nodeId)
            ->where('discussion_state', 'visible')
            ->where('discussion_type', '<>', 'redirect')
            ->with('User')
            ->with('Prefix')
            ->order('last_post_date', 'DESC')
            ->limit($limit);

        return $finder->fetch();
    }
}

Struktur akhir folder:

/src/addons/Intutekno/CoverForum/
โ”œโ”€โ”€ addon.json
โ”œโ”€โ”€ Listener.php
โ””โ”€โ”€ TemplateHelper.php

6. Install Add-on

Di AdminCP:

  1. Klik menu Add-ons di sidebar

  2. Cari "Intutekno Cover Forum" di list

  3. Klik tombol Install di sampingnya

  4. Confirm

Status add-on harus jadi Active (toggle hijau).

7. Register Code Event Listener

Ini langkah yang menghubungkan add-on PHP kita ke template engine XenForo.

  1. AdminCP โ†’ Development โ†’ Code event listeners

  2. Klik + Add code event listener di pojok kanan atas

  3. Isi form:

Field

Isi

Listen to event

templater_setup

Event hint

(kosongkan)

Execute callback: Class

Intutekno\CoverForum\Listener

Execute callback: Method

templaterSetup

Callback execution order

10 (default)

Enable callback execution

โœ… centang

Description

Register latest_forum_threads function

Add-on

Intutekno Cover Forum 1.0.0

  1. Klik Save

8. Edit Template node_list_forum

AdminCP โ†’ Appearance โ†’ Templates โ†’ cari template node_list_forum โ†’ Edit.

Ganti seluruh isi template dengan kode berikut:

<xf:macro id="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<div class="block">
		<div class="block-container">
			<div class="block-body">
				<xf:macro id="forum"
					arg-node="{$node}"
					arg-extras="{$extras}"
					arg-children="{$children}"
					arg-childExtras="{$childExtras}"
					arg-depth="{$depth}" />
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro id="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<xf:macro id="forum"
		arg-node="{$node}"
		arg-extras="{$extras}"
		arg-children="{$children}"
		arg-childExtras="{$childExtras}"
		arg-depth="{$depth}" />
</xf:macro>

<xf:macro id="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
	<li>
		<a href="{{ link('forums', $node) }}" class="subNodeLink subNodeLink--forum {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">
			<xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" class="subNodeLink-icon" />{$node.title}
		</a>
		<xf:macro id="forum_list::sub_node_list"
			arg-children="{$children}"
			arg-childExtras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</li>
</xf:macro>

<xf:macro id="forum"
	arg-node="!"
	arg-extras="!"
	arg-children="!"
	arg-childExtras="!"
	arg-depth="!"
	arg-chooseName=""
	arg-bonusInfo="">

	<xf:if is="$depth == 1 OR $depth == 2">

		<!-- ===== COVER STYLE (forum utama) ===== -->
		<div class="node node--id{$node.node_id} node--depth{$depth} node--forum intuteknoCover intuteknoCover--cat{$node.parent_node_id} {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
			<div class="intuteknoCover-body">

				<div class="intuteknoCover-side">
					<a href="{{ link('forums', $node) }}" class="intuteknoCover-img">
						<img src="/data/forum_covers/{$node.node_id}.svg"
							 onerror="this.src='/data/forum_covers/default.svg'"
							 alt="{$node.title}" loading="lazy" />
					</a>
					<h3 class="intuteknoCover-title">
						<a href="{{ link('forums', $node) }}">{$node.title}</a>
					</h3>
					<xf:if is="$node.description">
						<div class="intuteknoCover-desc">{$node.description|raw}</div>
					</xf:if>
					<div class="intuteknoCover-stats">
						<span><b>{{ phrase('threads') }}:</b> {$extras.discussion_count|number_short(1)}</span>
						<span><b>{{ phrase('messages') }}:</b> {$extras.message_count|number_short(1)}</span>
					</div>
				</div>

				<div class="intuteknoCover-threads">
					<xf:set var="$latest" value="{{ latest_forum_threads($node.node_id, 5) }}" />
					<xf:if is="$latest is not empty">
						<ul class="intuteknoThread-list">
							<xf:foreach loop="$latest" value="$thread">
								<li class="intuteknoThread-item">
									<xf:avatar user="{$thread.User}" size="xxs" defaultname="{$thread.username}" class="intuteknoThread-avatar" />
									<div class="intuteknoThread-main">
										<div class="intuteknoThread-title">
											<xf:if is="$thread.prefix_id">{{ prefix('thread', $thread) }}</xf:if>
											<a href="{{ link('threads', $thread) }}">{$thread.title}</a>
										</div>
										<div class="intuteknoThread-meta">
											<a href="{{ link('members', $thread.User) }}" class="username">{$thread.username}</a>
											<span>ยท</span>
											<xf:date time="{$thread.last_post_date}" />
											<span>ยท</span>
											<span><xf:fa icon="fa-comment-alt" /> {$thread.reply_count|number_short(1)}</span>
										</div>
									</div>
								</li>
							</xf:foreach>
						</ul>
					<xf:else />
						<div class="intuteknoThread-empty">
							<xf:fa icon="fa-comments" />
							<span>Belum ada thread di forum ini</span>
						</div>
					</xf:if>
				</div>

			</div>
		</div>

	<xf:else />

		<!-- ===== ORIGINAL STYLE (sub-forum, depth >= 3) ===== -->
		<div class="node node--id{$node.node_id} node--depth{$depth} node--forum {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
			<div class="node-body">
				<span class="node-icon" aria-hidden="true">
					<xf:fa icon="{{ $node.Data.TypeHandler.getTypeIconClass() ?: 'fa-comments' }}" />
				</span>
				<div class="node-main js-nodeMain">
					<xf:if is="$chooseName">
						<xf:checkbox standalone="true">
							<xf:option labelclass="u-pullRight" class="js-chooseItem" name="{$chooseName}[]" value="{$node.node_id}" />
						</xf:checkbox>
					</xf:if>

					<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
					<h3 class="node-title">
						<a href="{{ link('forums', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
					</h3>
					<xf:if is="$descriptionDisplay != 'none' && $node.description">
						<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
					</xf:if>

					<div class="node-meta">
						<xf:if is="!{$extras.privateInfo}">
							<div class="node-statsMeta">
								<dl class="pairs pairs--inline">
									<dt>{{ phrase('threads') }}</dt>
									<dd>{$extras.discussion_count|number_short(1)}</dd>
								</dl>
								<dl class="pairs pairs--inline">
									<dt>{{ phrase('messages') }}</dt>
									<dd>{$extras.message_count|number_short(1)}</dd>
								</dl>
							</div>
						</xf:if>

						<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
							<xf:macro id="forum_list::sub_nodes_menu"
								arg-children="{$children}"
								arg-childExtras="{$childExtras}"
								arg-depth="{{ $depth + 1 }}" />
						</xf:if>
					</div>

					<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
						<xf:macro id="forum_list::sub_nodes_flat"
							arg-children="{$children}"
							arg-childExtras="{$childExtras}"
							arg-depth="{{ $depth + 1 }}" />
					</xf:if>

					<xf:if is="$bonusInfo is not empty">
						<div class="node-bonus">{$bonusInfo}</div>
					</xf:if>
				</div>

				<xf:if is="!{$extras.privateInfo}">
					<div class="node-stats">
						<dl class="pairs pairs--rows">
							<dt>{{ phrase('threads') }}</dt>
							<dd>{$extras.discussion_count|number_short(1)}</dd>
						</dl>
						<dl class="pairs pairs--rows">
							<dt>{{ phrase('messages') }}</dt>
							<dd>{$extras.message_count|number_short(1)}</dd>
						</dl>
					</div>
				</xf:if>

				<div class="node-extra">
					<xf:if is="{$extras.privateInfo}">
						<span class="node-extra-placeholder">{{ phrase('private') }}</span>
					<xf:elseif is="{$extras.LastThread}" />
						<div class="node-extra-icon">
							<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
								<xf:avatar user="{{ null }}" size="xs" />
							<xf:else />
								<xf:avatar user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" size="xs" />
							</xf:if>
						</div>
						<div class="node-extra-row">
							<xf:if is="$extras.LastThread.isUnread()">
								<a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
							<xf:else />
								<a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
							</xf:if>
						</div>
						<div class="node-extra-row">
							<ul class="listInline listInline--bullet">
								<li><xf:date time="{$extras.last_post_date}" class="node-extra-date" /></li>
								<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
									<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
								<xf:else />
									<li class="node-extra-user"><xf:username user="{$extras.LastPostUser}" defaultname="{$extras.last_post_username}" /></li>
								</xf:if>
							</ul>
						</div>
					<xf:else />
						<span class="node-extra-placeholder">{{ phrase('none') }}</span>
					</xf:if>
				</div>
			</div>
		</div>

	</xf:if>

	<xf:if is="{$depth} == 1">
		<xf:macro id="forum_list::node_list"
			arg-children="{$children}"
			arg-extras="{$childExtras}"
			arg-depth="{{ $depth + 1 }}" />
	</xf:if>
</xf:macro>

Save.

Penjelasan: Conditional $depth == 1 OR $depth == 2 membuat cover style berlaku untuk forum di root maupun di dalam kategori. Sub-forum (depth โ‰ฅ 3) tetap pakai layout original supaya rapi.

9. Tambahkan CSS

AdminCP โ†’ Appearance โ†’ Style properties โ†’ Extra LESS template โ†’ tambahkan blok ini:

/* ============================================
   Intutekno Cover Forum Style
   ============================================ */

.intuteknoCover {
    background: @xf-contentBg;
    border: 1px solid @xf-borderColor;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    border-top: 5px solid #06b6d4; /* default fallback */
}

.intuteknoCover-body {
    display: flex;
    gap: 0;
}

/* === LEFT: Cover + Info === */
.intuteknoCover-side {
    flex: 0 0 30%;
    max-width: 30%;
    padding: 14px;
    border-right: 1px solid @xf-borderColor;
    background: rgba(0,0,0,0.02);
}

.intuteknoCover-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 12px;
}

.intuteknoCover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.intuteknoCover-img:hover img {
    transform: scale(1.05);
}

.intuteknoCover-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.intuteknoCover-title a {
    color: @xf-linkColor;
}

.intuteknoCover-desc {
    font-size: 13px;
    color: @xf-textColorMuted;
    line-height: 1.5;
    margin-bottom: 12px;
}

.intuteknoCover-stats {
    display: flex;
    gap: 14px;
    padding-top: 10px;
    border-top: 2px solid #e74c3c;
    font-size: 13px;
}

.intuteknoCover-stats b {
    color: @xf-textColor;
}

/* === RIGHT: Daftar Thread === */
.intuteknoCover-threads {
    flex: 1;
    padding: 8px 14px;
}

.intuteknoThread-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.intuteknoThread-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid @xf-borderColorLight;
}

.intuteknoThread-item:last-child {
    border-bottom: 0;
}

.intuteknoThread-item .intuteknoThread-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0;
}

.intuteknoThread-item .intuteknoThread-avatar.avatar img,
.intuteknoThread-item .intuteknoThread-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
}

.intuteknoThread-item .intuteknoThread-avatar.avatar {
    font-size: 14px !important;
    line-height: 32px !important;
}

.intuteknoThread-main {
    flex: 1;
    min-width: 0;
}

.intuteknoThread-title {
    font-size: 14px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.intuteknoThread-meta {
    font-size: 12px;
    color: @xf-textColorMuted;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.intuteknoThread-meta .username {
    font-weight: 600;
    color: @xf-linkColor;
}

.intuteknoThread-empty {
    padding: 50px 20px;
    text-align: center;
    color: @xf-textColorMuted;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    justify-content: center;
}

.intuteknoThread-empty .fa {
    font-size: 36px;
    opacity: 0.25;
}

/* === Responsive Mobile === */
@media (max-width: 768px) {
    .intuteknoCover-body {
        flex-direction: column;
    }
    .intuteknoCover-side,
    .intuteknoCover-threads {
        flex: 1 1 100%;
        max-width: 100%;
        border-right: 0;
        border-bottom: 1px solid @xf-borderColor;
    }
}

Save.

10. Setup Cover Image

10.1. Buat folder cover

Via File Manager cPanel atau FTP, buat folder:

/data/forum_covers/

Set permission 755.

10.2. Cari node_id setiap forum

AdminCP โ†’ Forums โ†’ klik nama forum โ†’ lihat URL:

.../admin.php?nodes/nama-forum.5/edit
                              โ†‘
                          node_id = 5

10.3. Upload cover image

Upload file SVG/WebP/JPG ke /data/forum_covers/ dengan nama sesuai node_id:

/data/forum_covers/
โ”œโ”€โ”€ default.svg     โ† fallback wajib
โ”œโ”€โ”€ 5.svg           โ† forum dengan node_id 5
โ”œโ”€โ”€ 6.svg
โ”œโ”€โ”€ 7.svg
โ””โ”€โ”€ ...

Spesifikasi cover ideal:

  • Aspect ratio 3:2

  • Ukuran 600ร—400 px

  • Format SVG (paling ringan dan scalable) atau WebP

Catatan: Template di langkah 8 sudah pakai ekstensi .svg. Kalau Anda pakai .webp atau .jpg, ubah dua tempat di template dari .svg menjadi ekstensi yang Anda pakai.

11. Customize Border per Kategori

Border-top tiap card forum bisa diwarnai berbeda berdasarkan kategori induk-nya. Berkat class intuteknoCover--cat{X} yang otomatis disisipkan di langkah 8, kita tinggal target via CSS.

11.1. Cari node_id kategori

Sama seperti forum: AdminCP โ†’ Forums โ†’ klik kategori โ†’ lihat node_id di URL.

11.2. Tambahkan rules CSS

Tambahkan ke Extra LESS:

/* === Border Color per Kategori === */
.intuteknoCover--cat3 { border-top-color: #3b82f6; } /* Tutorial - biru */
.intuteknoCover--cat4 { border-top-color: #f59e0b; } /* Info - amber */
.intuteknoCover--cat5 { border-top-color: #10b981; } /* hijau */
.intuteknoCover--cat6 { border-top-color: #ec4899; } /* pink */
/* tambahkan sesuai kategori yang dimiliki */

Sesuaikan angka di --cat{X} dengan node_id kategori, dan warna sesuai branding masing-masing.

Save dan refresh

Setelah semua perubahan CSS:

  1. Save Extra LESS

  2. Tools โ†’ Rebuild caches โ†’ centang semua โ†’ Rebuild

  3. Buka homepage forum โ†’ Ctrl+F5

12. Troubleshooting

Error Function "latest_forum_threads" is not callable

Listener belum aktif atau salah class path. Cek:

  1. Add-ons โ€” add-on Status harus Active

  2. Code event listeners โ€” entry untuk templater_setup harus enabled, Class dan Method harus persis sama dengan file PHP

  3. Tools โ†’ Rebuild caches โ†’ centang semua

Cover tidak muncul, ada celah putih di kiri

Berarti gambar gagal dimuat. Cek:

  1. File ada di /data/forum_covers/?

  2. Permission folder 755, file 644?

  3. Nama file sesuai node_id?

  4. Path di template sesuai ekstensi file?

  5. Ada file default.svg sebagai fallback?

Layout tidak berubah, masih style asli

  1. Pastikan template node_list_forum ter-save dengan kode lengkap di langkah 8

  2. Rebuild templates wajib

  3. Ctrl+F5 untuk bypass cache browser

  4. Cek dengan inspect element โ€” class intuteknoCover harus muncul di div

Sub-forum jadi style cover juga (tidak diinginkan)

Cek conditional di template:

<xf:if is="$depth == 1 OR $depth == 2">

Sub-forum biasanya depth โ‰ฅ 3, jadi seharusnya tidak ter-cover. Kalau forum Anda strukturnya berbeda, sesuaikan condition.

Avatar ada celah ke kiri

Pastikan template pakai sintaks ini (avatar inline, bukan dibungkus <a>):

<xf:avatar user="{$thread.User}" size="xxs" defaultname="{$thread.username}" class="intuteknoThread-avatar" />

Class intuteknoCover--cat{id} tidak muncul di HTML

Berarti template belum ter-update. Edit ulang, save, dan rebuild templates.

13. Penutup

Setelah semua langkah di atas, halaman utama forum akan menampilkan card cover untuk setiap forum dengan layout 2 kolom dan border atas warna per kategori.

Pengembangan Selanjutnya

Beberapa peningkatan yang bisa dilakukan kapan-kapan:

  • Caching thread terbaru lewat XF registry supaya tidak query 5 thread per forum setiap homepage di-load

  • Custom field untuk upload cover via AdminCP (tanpa FTP)

  • Hover effect halus di card dan row thread

  • Lazy load cover image dengan blur placeholder

Struktur File Akhir

/src/addons/Intutekno/CoverForum/
โ”œโ”€โ”€ addon.json
โ”œโ”€โ”€ Listener.php
โ””โ”€โ”€ TemplateHelper.php

/data/forum_covers/
โ”œโ”€โ”€ default.svg
โ”œโ”€โ”€ 5.svg
โ”œโ”€โ”€ 6.svg
โ””โ”€โ”€ ... (sesuai jumlah forum)

AdminCP โ†’ Templates: node_list_forum (modified)
AdminCP โ†’ Style properties โ†’ Extra LESS (modified)
AdminCP โ†’ Code event listeners: templater_setup โ†’ Listener::templaterSetup

Tutorial dibuat berdasarkan implementasi nyata di forum.intutekno.com

Lisensi: silakan adaptasi dan bagikan ulang. Kalau bermanfaat, sebutkan sumber sebagai amal jariah โ€” pengetahuan yang terus bermanfaat.

]]>4Sun, 17 May 2026 08:30:50 +0000Cara Membuat PageSpeed Tester Sendiri untuk Bloghttps://lalu.pro/articles/tutorial/cara-membuat-pagespeed-tester-sendiri-untuk-blog-r2/

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:

  1. Akun Google (untuk Google Cloud Console)

  2. Akun Cloudflare (gratis, daftar di cloudflare.com)

  3. Blog Blogger Anda

Tidak perlu credit card untuk setup ini.

STEP 1: Dapatkan Google API Key

1.1 Aktifkan PageSpeed Insights API

  1. Buka Google Cloud Console

  2. Buat project baru (atau pilih yang sudah ada)

  3. Di sidebar kiri: APIs & Services โ†’ Library

  4. Search: "PageSpeed Insights API"

  5. Klik hasil, lalu Enable

1.2 Buat API Key

  1. APIs & Services โ†’ Credentials

  2. Create Credentials โ†’ API key

  3. Key baru muncul. Copy key tersebut dan simpan sementara di Notepad/text editor

  4. 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

  1. Login ke Cloudflare dashboard

  2. Sidebar kiri: Workers & Pages

  3. Klik Create application โ†’ Create Worker

  4. Beri nama, misal: pagespeed-proxy

  5. Klik Deploy (dengan default code)

  6. 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):

  1. Di Worker โ†’ tab Settings

  2. Scroll ke section Variables and Secrets

  3. Klik + Add

  4. Isi:

    • Type: Secret (penting! bukan Text)

    • Variable name: GOOGLE_API_KEY (case-sensitive, persis seperti ini)

    • Value: paste API key dari Step 1.2

  5. 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

  1. Blogger dashboard โ†’ Pages โ†’ New Page

  2. Klik mode HTML view (bukan Compose)

  3. Paste seluruh isi file pagespeed-tester.html

  4. Beri title halaman: "PageSpeed Tester"

  5. Publish

3.3 Test Tool

Buka halaman yang baru dipublish, lalu:

  1. Input URL, contoh: https://example.com

  2. Pilih Mobile atau Desktop

  3. Klik Mulai Tes

  4. Tunggu 15-40 detik

  5. 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:

  1. Cek di Settings โ†’ Variables and Secrets, pastikan ada GOOGLE_API_KEY (case-sensitive)

  2. Pastikan Type-nya Secret, bukan Text

  3. Edit kode Worker, save lagi untuk trigger redeploy

Error: "Requests from referer <empty> 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:

  1. Key disembunyikan di Worker secret โ€” encrypted di Cloudflare, tidak visible di dashboard setelah disimpan

  2. API restriction di Google โ€” key hanya bisa pakai PageSpeed Insights API, bukan Maps/Translate yang berbayar

  3. Website restriction di Google โ€” referer harus match domain Anda

  4. Worker forward referer โ€” memungkinkan website restriction bekerja meski request datang dari Cloudflare IP

  5. 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!

]]>2Sun, 17 May 2026 06:25:00 +0000Tutorial Komprehensif Membuat Homepage Kustom di Invision Community 5https://lalu.pro/articles/forum-software/tutorial-komprehensif-membuat-homepage-kustom-di-invision-community-5-r1/Panduan lengkap berdasarkan pengalaman membangun lalu.pro โ€” dengan Invision Community 5.0.18.

Target: Pengguna IPS 5 yang ingin membangun homepage editorial dengan data live dari berbagai aplikasi IPS (Forum, Pages, Downloads). ย 

Tingkat: Menengah (butuh dasar HTML/CSS, tidak butuh PHP advance).

Prasyarat

Sebelum mulai, pastikan Anda punya:

Sebelum mulai, pastikan Anda punya:

Teknis

  • Invision Community 5.0.x ter-install (panduan ini di-test di 5.0.18)

  • Aplikasi Pages aktif (wajib โ€” ini yang memungkinkan custom homepage)

  • AdminCP access sebagai administrator

  • Akses cPanel atau file manager (untuk backup tema, opsional tapi sangat direkomendasikan)

Pengetahuan

  • HTML dasar (tag, attribute, nested element)

  • CSS dasar (selector, properties, flexbox, grid)

  • Konsep template tag (mirip Twig, Liquid, atau Blade โ€” tidak perlu PHP)

  • Mengerti perbedaan client-side (HTML/CSS) vs server-side (PHP) rendering

Aplikasi IPS yang Direkomendasikan untuk Live Data

  • Forum (untuk fetch topik diskusi)

  • Pages dengan custom database (untuk artikel)

  • Downloads (untuk file/resources)

  • Calendar (untuk events โ€” opsional)

Persiapan Konten

  • Minimal 3-5 topik forum sudah dipost

  • Minimal 3-5 artikel sudah di-publish di Pages database

  • Minimal 2-3 file sudah di-upload di Downloads

Tanpa konten ini, section live data akan tampak kosong saat testing.

Konsep IPS 5 yang Wajib Dipahami

Sebelum nyentuh kode, pahami dulu konsep-konsep ini. Banyak frustrasi muncul karena pengguna tidak tahu vocabulary IPS 5.

1. Pages โ€” Aplikasi Pembuat Halaman

Pages adalah aplikasi IPS yang memungkinkan Anda membuat halaman custom di luar struktur forum standar. Homepage custom Anda akan jadi sebuah Page.

Path: AdminCP โ†’ Pages

2. Page Types

Saat membuat Page baru, ada dua tipe utama:

Tipe

Kapan Dipakai

Tutorial Ini Pakai?

Page Builder

Visual drag-and-drop dengan widget

Tidak

Manual

HTML/template tag custom penuh

Ya

Manual memberi Anda kontrol penuh atas HTML, sementara Page Builder cocok untuk yang tidak mau repot ngoding.

3. Use Suite HTML Wrapper โ€” Setting Paling Krusial

Ini setting yang sering bikin bingung. Ada dua mode:

Mode A: Suite Wrapper ON (Direkomendasikan untuk Production)

โœ… Konten Anda di-wrap dalam template global IPS (header, footer, sidebar, scripts)
โœ… Security IPS aktif (CSRF, session, auth)
โœ… JavaScript dan PHP IPS jalan native
โœ… Konsisten dengan halaman lain (forum, artikel detail)
โŒ Tidak bisa custom <head>, <body>, atau full HTML

Kapan pakai: Saat Anda mau pakai header & footer bawaan IPS, dan hanya custom area konten tengah.

Mode B: Suite Wrapper OFF (Full Custom)

โœ… Full kontrol dari <!DOCTYPE html> sampai </html>
โœ… Bisa pakai font, CSS, JS dari mana saja
โŒ Harus handle security sendiri
โŒ Tidak otomatis dapat update template IPS
โŒ Header/footer/user dropdown IPS hilang
โŒ Login/logout/notifications bawaan IPS tidak otomatis ada

Kapan pakai: Saat homepage benar-benar berbeda total dari sisa situs (misal, landing page marketing).

Rekomendasi panduan ini: Pakai Suite Wrapper ON. Lebih aman, maintenance-friendly, dan transisi antar halaman seamless.

4. Blocks โ€” Mesin Live Data

Blocks adalah komponen reusable yang bisa menampilkan data dari aplikasi IPS. Ada 4 tipe block di IPS 5:

Tipe

Fungsi

Contoh Penggunaan

Plugin

Feed otomatis dari aplikasi IPS

Topic Feed, Record Feed, File Feed

Manual HTML

HTML + expression tag + PHP inline

Counter, custom widget

Editor

Konten statis pakai WYSIWYG editor

Welcome message, announcement

Template

Reusable dengan input fields

Multi-purpose container

Tutorial ini akan beberapa pakai Plugin (untuk feed) dan Manual HTML (untuk stats counter).

5. Block Templates

Tampilan default block IPS sering tidak match dengan desain Anda. Solusinya: Block Template โ€” custom template yang bisa Anda terapkan ke block tertentu.

Path: AdminCP โ†’ Pages โ†’ Templates โ†’ Add โ†’ block template

Block Template menggunakan template tag IPS ({{foreach}}, {$variable}, dll) โ€” bukan PHP murni.

6. Template Tags vs Expression

Dua jenis sintaks yang akan sering Anda lihat:

Template Tag (logic flow):

{{if $count > 1000}}
{{foreach $items as $item}}
...
{{endforeach}}
{{endif}}

Expression (eksekusi PHP):

{expression="number_format($count)"}
{expression="$record->_title"}

Aturan: gunakan {{...}} untuk logic, {expression="..."} untuk output PHP.

7. Default Page Setting

Setelah membuat homepage, Anda harus set sebagai default agar muncul saat user buka root domain (https://situs.com/).

Path: AdminCP โ†’ System โ†’ Settings โ†’ Site Features โ†’ Default Page

Fase 1 โ€” Setup Halaman Homepage

Step 1.1: Backup Tema Anda (Wajib!)

Sebelum modifikasi apapun, backup tema aktif:

AdminCP โ†’ Customization โ†’ Appearance โ†’ Themes
โ””โ”€ Hover icon download di samping tema โ†’ Save .xml file

Simpan file .xml ini di komputer lokal. Kalau ada yang rusak, Anda bisa restore.

Step 1.2: Buat Page Baru

Path: AdminCP โ†’ Pages โ†’ Add Page

Pilih Content Editor-nya Manual HTML

Add_Page_Manual_HTML.webp

Lengkapi Page Details dengan isian seperti dalam tabel di bawah.

Add_Page_Details.webp

Isian mencakup:

Field

Isi dengan

Catatan

Page Name

Homepage

Display name internal

Page Filename

home

URL slug (tanpa ekstensi), jika dikosongkan otomatis namanya mengikuti isian Page Name

Page Folder

Select

Biarkan kosong untuk root, centang No Parent

Use suite HTML wrapper

ON (centang)

Critical setting

Page Title

Komunitas Blogger Indonesia

Untuk SEO <title>

Content

Kode HTML

Lihat step 1.3

Meta Description

(deskripsi singkat)

Untuk SEO

Klik Save & Edit.

Step 1.3: Struktur HTML Dasar

Karena Suite Wrapper ON, TIDAK butuh <!DOCTYPE>, <html>, <head>, atau <body>. IPS akan menambahkannya otomatis. Anda cukup tulis konten yang ada di dalam <body> saja.

Template dasar yang bisa Anda pakai sebagai starting point:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<style>
/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
--bg: #ebe7e0;
--ink: #181818;
--accent: #ff5c2b;
/* ... variabel lainnya ... */
}

/* Style section di sini */
</style>

<!-- HERO SECTION -->
<section class="hero">
<h1>Selamat datang di komunitas kami</h1>
<p>Deskripsi singkat tentang komunitas Anda.</p>
</section>

<!-- SECTION LAIN -->
<section class="features">
<!-- ... -->
</section>

Itu saja kerangka dasarnya.

Step 1.4: Penting โ€” Cara Paste Kode di Editor IPS

Editor IPS Pages punya mode Invision HTML Template dan Plain Text.

  1. Klik tab Content, secara default terpilih editor Invision HTML Template.

  2. Salin kerangka HTML pada langkah 1.3 di atas.

  3. Paste di kolom yang tersedia.

  4. Save.

Setelah Save tentukan View Page, centang saja semua agar homepage dapat dilihat oleh semua pengunjung.

Step 1.5: Set Homepage Sebagai Default

Setelah halaman terbuat, jadikan default, langsung saja klik ikon bintang, lalu geser tombol Set as default page ke kanan (ON). Klik Save. Sekarang akses https://situs-anda.com/ โ€” homepage Anda muncul.

Catatan: Jangan lupa atur aplikasi Pages menjadi default juga.

Step 1.6: Verifikasi

Buka homepage di browser baru (incognito) untuk pastikan tampil benar:

  • Tampil tanpa error

  • Header & footer IPS muncul (karena Suite Wrapper ON)

  • Konten custom Anda di tengah

  • Font Google Fonts loaded (cek dengan Inspector โ†’ Network)

Sampai di sini Anda sudah berhasil membuat homepage. Tapi masih sangat sederhana, hanya berisi teks selamat datang. Selanjutnya kita akan menambahkan beberapa block live.

Fase 2 โ€” Live Data Integration

Bagian ini yang membuat homepage Anda hidup โ€” menampilkan data real dari forum, artikel, dan files.

2.1 Strategi Konversi Bertahap

Urutan pekerjaan saya saat membuat homepage lalu.pro adalah per section.

Urutan

Section

Tipe Block

Tingkat Kesulitan

1

Stats counter (member, topic, artikel)

Manual HTML

Mudah

2

Latest articles

Plugin (Record Feed)

Sedang

3

Hot topics

Plugin (Topic Feed)

Sedang

4

Latest files (Download)

Plugin (File Feed)

Sedang

Tapi saya hanya akan memandu Anda membuat stat counter dulu agar Anda melihat tampilannya dan memahmi alur kerjanya.

2.2 Stats Counter โ€” Member Count

Kita perlu membuat sebuah block.

Path: AdminCP โ†’ Pages โ†’ Blocks โ†’ Create New Block โ†’ pilih "Manual HTML

Create_New_Block.webp

Setelah klik tombol Next, isi form Details dan Content.

Details_block.webp

Block_content.webp

Title: Stat Members Count
Template Key: lalu_stat_members, (tanpa spasi)
Description: (boleh kosong)
Content (paste persis):

{expression="number_format( \IPS\Db::i()->select( 'COUNT(*)', 'core_members', array( 'completed=?', 1 ) )->first() )"}

Penjelasan kode:

  • \IPS\Db::i() โ€” akses database IPS

  • select('COUNT(*)', 'core_members'...) โ€” hitung jumlah member

  • 'completed=?', 1 โ€” hanya yang sudah verifikasi email

  • number_format(...) โ€” format dengan koma (2,847)

Klik Save. Klik Save sekali lagi (set view page).

2.3 Stats Counter โ€” Topic Count

Sekarang buat block baru lagi, langkah-langkahnya seperti block member counter.

Isiannya:

Title: Stat Topics Count
Template Key: lalu_stat_topics
Content:

{{$count = \IPS\Db::i()->select( 'COUNT(*)', 'forums_topics', array( 'approved=?', 1 ) )->first();}}
{{if $count >= 1000}}
{expression="round( $count / 1000, 1 )"}<em>k</em>
{{else}}
{expression="number_format( $count )"}
{{endif}}

Penjelasan:

  • Hitung topic yang approved (approved=1)

  • Kalau โ‰ฅ1000, tampilkan format 14k, 1.5k

  • Kalau <1000, tampilkan angka penuh

2.4 Stats Counter โ€” Article Count

Cek dulu Database ID Articles:

AdminCP โ†’ Pages โ†’ Databases
โ””โ”€ Cari "Articles" โ†’ catat angka ID di kolom paling kiri

Misal ID = 1, maka tabel-nya adalah cms_custom_database_1.

Buat block dengan isian berikut:

Title: Stat Articles Count
Template Key: lalu_stat_articles
Content (ganti angka 1 dengan ID Anda):

{expression="number_format( \IPS\Db::i()->select( 'COUNT(*)', 'cms_custom_database_1', array( 'record_approved=?', 1 ) )->first() )"}

2.5 Pasang Stats Block di Homepage

Di Page Content homepage, di tempat yang sesuai:

<div class="hero-stats">
<div class="stat">
<div class="stat-num">{block="lalu_stat_members"}</div>
<div class="stat-label">Member aktif</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_topics"}</div>
<div class="stat-label">Diskusi</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_articles"}</div>
<div class="stat-label">Tutorial</div>
</div>
</div>

Anda bisa mencoba kode yang siap pakai berikut:

<style>
/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
--bg: #ebe7e0;
--ink: #181818;
--accent: #ff5c2b;
--muted: #6b6b6b;
--card: #ffffff;
--radius: 12px;
--gap: 1.5rem;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.6;
padding: 2rem 1rem;
}

/* HERO */
.hero {
max-width: 960px;
margin: 0 auto 3rem;
text-align: center;
padding: 3rem 1.5rem;
}

.hero h1 {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}

.hero h1::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: var(--accent);
margin: 1rem auto 0;
border-radius: 2px;
}

.hero p {
font-size: 1.1rem;
color: var(--muted);
max-width: 600px;
margin: 0 auto 2.5rem;
}

/* Hero stats */
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
max-width: 700px;
margin: 0 auto;
}

.stat {
background: var(--card);
padding: 1.5rem 1rem;
border-radius: var(--radius);
border: 1px solid rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease;
}

.stat:hover {
transform: translateY(-3px);
}

.stat-num {
font-size: 2rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
margin-bottom: 0.5rem;
}

.stat-label {
font-size: 0.9rem;
color: var(--muted);
}

/* Features section */
.features {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1rem;
}

/* Responsive */
@media (max-width: 600px) {
.hero-stats {
grid-template-columns: 1fr;
}

.hero {
padding: 2rem 1rem;
}
}
</style>

<!-- HERO SECTION -->
<section class="hero">
<h1>Selamat datang di komunitas kami</h1>
<p>Deskripsi singkat tentang komunitas Anda.</p>

<div class="hero-stats">
<div class="stat">
<div class="stat-num">{block="lalu_stat_members"}</div>
<div class="stat-label">Member aktif</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_topics"}</div>
<div class="stat-label">Diskusi</div>
</div>
<div class="stat">
<div class="stat-num">{block="lalu_stat_articles"}</div>
<div class="stat-label">Tutorial</div>
</div>
</div>
</section>

Save โ†’ Clear cache โ†’ Refresh.

Lihat hasilnya, harusnya seperti berikut:

Membuat_homepage_kustom_ips_v5.webp

Saya harap Anda memahami kerjanya dan bisa berkreasi.

]]>1Fri, 15 May 2026 23:37:35 +0000