Cara Menambahkan Nomor Halaman, Tanggal, dan Judul ke PDF Anda

Jika Anda hanya menyimpan resep masakan, tangkapan layar (screenshot) biasa mungkin sudah cukup.

Namun, jika Anda menyimpan halaman web untuk bukti hukum, penelitian akademis, atau arsip bisnis, gambar biasa tidak akan cukup. Anda butuh konteks. Anda perlu tahu persis kapan halaman itu disimpan, dari mana asalnya, dan nomor halaman untuk referensi yang mudah.

Alat kami memiliki fitur "Header & Footer" profesional yang terintegrasi. Ini memungkinkan Anda menyisipkan informasi penting ini secara otomatis ke setiap halaman PDF Anda.

Berikut cara menggunakannya, termasuk beberapa templat copy-paste yang bisa langsung Anda pakai.

Cara Kerjanya

Di bagian "Advanced Settings" pada alat kami, Anda akan menemukan dua kotak teks:

1. Header HTML (Muncul di bagian paling atas setiap halaman)
2. Footer HTML (Muncul di bagian paling bawah setiap halaman)

Anda dapat menulis HTML standar di sini, tetapi keajaiban sebenarnya ada pada CSS Classes Khusus kami. Jika Anda menggunakan nama kelas (class) ini, konverter kami akan otomatis mengisinya dengan data yang benar:

• <span class='date'></span> → Menyisipkan tanggal pencetakan saat ini.
• <span class='title'></span> → Menyisipkan judul halaman web.
• <span class='url'></span> → Menyisipkan URL sumber.
• <span class='pageNumber'></span> → Menyisipkan nomor halaman saat ini.
• <span class='totalPages'></span> → Menyisipkan jumlah total halaman.

3 Templat Copy-Paste

Kami telah menulis kode ini menggunakan CSS standar (style="...") yang solid, sehingga akan tampil sempurna di hasil PDF tanpa perlu file CSS tambahan.

1. "Nomor Halaman Sederhana" (Footer)

Ini adalah gaya klasik. Menampilkan nomor halaman kecil di tengah bawah setiap halaman.

Tempel ini ke dalam "Footer HTML":

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>

2. Footer "Pengarsipan" (Legal/Penelitian)

Sangat cocok untuk menangkap bukti digital. Ini mencantumkan URL sumber di kiri dan tanggal penyimpanan di kanan.

Tempel ini ke dalam "Footer HTML":

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">Source: <span class="url"></span></span>
  <span style="float: right;">Saved: <span class="date"></span></span>
</div>

3. Header "Laporan Profesional"

Membuat hasil tangkapan web Anda terlihat seperti dokumen resmi. Ini menempatkan Judul dengan huruf tebal di kiri dan Tanggal di kanan.

Tempel ini ke dalam "Header HTML":

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

Tips Penting

1. ⚠️ Anda HARUS Mengatur Margin: Header dan Footer dicetak di dalam margin halaman. Jika margin Anda diatur ke "0", header Anda tidak akan terlihat! Anda harus mengatur margin Top (Atas) dan Bottom (Bawah) setidaknya 0.4in (atau 10mm) agar templat ini muncul.
2. Ukuran Font: Mesin PDF memperlakukan ukuran font sedikit berbeda dari layar. Kami menyarankan menggunakan 8px hingga 10px. Apa pun yang lebih kecil mungkin akan sulit terbaca.

Siap untuk naik level? Menguasai header hanyalah satu langkah. Untuk tips lebih lanjut tentang cara membuat dokumen profesional, lihat Panduan Lengkap Membuat PDF Halaman Web yang Sempurna.