Cara menyesuaikan halaman karier Anda dengan kode atau AI

Halaman karier sering kali menjadi tempat pertama kandidat benar-benar mengenal perusahaan Anda. Jika tampilannya senada dengan bagian lain situs web Anda, dengan font, warna, dan gaya bahasa yang sama, halaman itu terasa seperti bagian dari merek Anda, bukan sekadar halaman dari aplikasi rekrutmen.

Setiap perusahaan di Emploist mendapat halaman karier yang siap sejak hari pertama, lengkap dengan logo dan warnanya. Jika Anda menginginkan lebih, Anda dapat mengubah seluruh tampilannya dengan mengedit kodenya. Kedengarannya teknis, tetapi Anda tidak perlu menjadi developer. Panduan ini menunjukkan dua caranya:

Edit kode di Emploist. Cocok untuk perubahan kecil, seperti judul utama atau font baru. Anda bisa melihat setiap perubahan di pratinjau langsung sambil mengetik.
Minta asisten AI mengerjakannya. Cocok untuk perubahan yang lebih besar, seperti bagian baru. Anda mengunduh kodenya, menjelaskan keinginan Anda dengan bahasa sehari-hari, lalu mengunggah hasil yang dikirim kembali oleh asisten.

Kami akan menggunakan Northwind Labs, sebuah perusahaan contoh, untuk menunjukkan keduanya. Berikut halaman kariernya sebelum kita mulai.

northwind.emploist.com

Halaman karier Northwind Labs dengan desain bawaan Emploist.

Apa saja yang bisa Anda ubah

Halaman karier Anda dibangun dari enam file. Masing-masing berupa file teks kecil yang bisa Anda buka dan edit:

File	Yang diaturnya
`layout.liquid`	Bingkai di sekeliling setiap halaman: header, footer, dan apa saja yang dimuat di setiap halaman, seperti font
`jobs.liquid`	Halaman utama, berisi perkenalan Anda dan daftar lowongan yang dibuka
`job.liquid`	Halaman untuk satu lowongan
`apply.liquid`	Formulir lamaran
`applied.liquid`	Halaman terima kasih yang dilihat kandidat setelah melamar
`styles.css`	Tampilan semuanya: warna, font, ukuran, dan jarak

File-file ini menggunakan tiga bahasa sederhana. HTML menentukan isi halaman, seperti judul dan tombol. CSS menentukan tampilannya. Liquid menambahkan variabel, seperti {{ company.name }}, yang diganti Emploist dengan nama perusahaan, lowongan, dan detail lain milik Anda saat kandidat membuka halaman.

Anda tidak akan merusak halaman karier hanya karena mencoba-coba:

Tidak ada yang berubah bagi kandidat sampai Anda mengeklik Simpan.
Emploist memeriksa kode Anda sebelum menyimpannya, dan memberi tahu apa yang perlu diperbaiki jika ada yang salah.
Anda dapat kembali ke desain bawaan kapan saja.

Untuk memulai, masuk sebagai admin dan buka Halaman karier di bilah sisi. Tab Desain berisi warna dan kode halaman Anda. Jika yang Anda perlukan hanya warna merek, pilih warnanya di Warna utama, dan selesai. Tanpa kode sama sekali.

Tab “Design” pada pengaturan “Careers page” di Emploist: pemilih “Primary color”, dan bagian “Code” dengan tombol “Edit code”, “Download ZIP”, dan “Upload ZIP”. — Halaman karier → Desain. Bagian Kode berisi semua yang digunakan dalam panduan ini.

Opsi 1: Edit kode di Emploist

Buka editor

Klik Edit kode. Kode halaman Anda ada di sebelah kiri, dengan tab untuk setiap file dan catatan singkat tentang fungsi file tersebut. Di sebelah kanan ada pratinjau langsung halaman karier Anda, yang diisi dengan contoh lowongan.

Editor kode Emploist: tab file dan kode layout.liquid di sebelah kiri, dan pratinjau langsung halaman karier di sebelah kanan. — Editor kode. Pratinjau di sebelah kanan diperbarui saat Anda mengetik.

Di atas pratinjau, Buka halaman memungkinkan Anda beralih ke setiap halaman yang dapat dilihat kandidat: daftar lowongan, sebuah lowongan, formulir lamaran, halaman terima kasih, lowongan yang ditutup, dan “Page not found”. Mengeklik tab sebuah file juga menampilkan halaman yang diatur oleh file itu.

Ubah judul utama

Klik tab jobs.liquid. Baris 3 berisi judul besar di bagian atas halaman:

<h1 class="hero-title">Join {{ company.name }}</h1>

Ubah kata “Join” menjadi “Build what’s next at”. Biarkan {{ company.name }} apa adanya: Emploist mengisinya dengan nama perusahaan Anda. Sesaat setelah Anda berhenti mengetik, pratinjau menampilkan judul yang baru.

File jobs.liquid di editor dengan judul yang diubah menjadi “Build what's next at {{ company.name }}”, dan pratinjau yang menampilkan “Build what's next at Northwind Labs”. — Edit teks di antara tag, dan pratinjau langsung mengikutinya.

Gunakan font Anda sendiri

Mengganti font cukup dengan dua perubahan kecil. Kami akan menggunakan Fraunces, font gratis dari Google Fonts.

Muat fontnya. Di Google Fonts, buka font tersebut, klik Get font, lalu Get embed code, dan salin baris <link> yang berisi fonts.googleapis.com/css2. Di layout.liquid, tempel baris itu pada baris baru tepat di atas baris yang berisi stylesheet_url:
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=swap">
```
Gunakan fontnya. Di styles.css, cari baris di dekat bagian atas yang diawali --font:, lalu tulis nama font dalam tanda kutip di awal daftar, diikuti koma:
```
--font: "Fraunces", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
```
Font lain dalam daftar itu adalah cadangan, untuk berjaga-jaga jika browser tidak dapat memuat font Anda.

File styles.css di editor dengan Fraunces ditambahkan ke baris --font, dan pratinjau yang menampilkan halaman karier dalam font Fraunces. — Kini Fraunces digunakan di seluruh halaman.

Periksa di ponsel

Banyak kandidat akan membuka halaman karier Anda di ponsel. Klik ikon ponsel di atas pratinjau untuk melihat halaman dalam ukuran ponsel.

Pratinjau editor yang dialihkan ke ukuran ponsel, menampilkan halaman karier dengan judul dan font baru dalam kolom yang sempit. — Ikon ponsel menampilkan pratinjau dalam ukuran ponsel.

Perbaiki kesalahan sebelum tayang

Jika sebuah perubahan merusak sesuatu, Emploist langsung memberi tahu Anda. Tab file tersebut diberi tanda merah, pratinjau menampilkan apa yang salah alih-alih halamannya, dan daftar di bawah kode menjelaskan masalahnya beserta barisnya. Klik sebuah masalah untuk langsung menuju ke sana. Sebagian besar masalah berupa salah ketik atau tag penutup yang hilang, dan mengurungkan perubahan terakhir (Cmd+Z di Mac, Ctrl+Z di Windows) biasanya sudah cukup untuk memperbaikinya.

Editor dengan sebuah masalah: tab jobs.liquid diberi tanda merah, baris 4 digarisbawahi, pratinjau menyatakan bahwa halaman tidak dapat ditampilkan, dan daftar di bawah kode menyebutkan 1 masalah yang perlu diperbaiki sebelum menyimpan: jobs.liquid, baris 4, tag tidak ditutup. — Jika {% endif %} terhapus tanpa sengaja, {% if %} pasangannya tetap terbuka, dan Emploist menunjukkan baris persisnya.

Anda tidak dapat menyimpan selama masih ada masalah, sehingga kandidat tidak akan pernah melihat halaman yang rusak.

Cari tahu apa yang bisa Anda gunakan

Klik Referensi di bagian atas editor untuk melihat semua variabel yang dapat Anda gunakan, seperti lokasi lowongan atau deskripsi perusahaan Anda, beserta catatan tentang apa yang ditampilkan masing-masing.

Panel “Reference” yang terbuka di atas editor, berisi daftar variabel seperti company.name dan company.description beserta apa yang ditampilkan masing-masing. — Referensi berisi semua yang dapat ditampilkan oleh template.

Simpan perubahan Anda

Jika Anda sudah puas dengan pratinjaunya, klik Simpan. Halaman karier Anda langsung diperbarui untuk kandidat.

Berubah pikiran? Menu Tindakan lainnya (tiga titik di samping Buang) berisi Atur ulang ke kode bawaan, yang mengembalikan desain bawaan Emploist. Seperti perubahan lainnya, tidak ada yang berubah di halaman karier Anda sampai Anda menyimpan.

Menu “More actions” di editor, dengan “Download ZIP”, “Upload ZIP”, dan “Reset to default code”. — Tindakan lainnya: unduh atau unggah kode sebagai ZIP, atau mulai dari awal.

Opsi 2: Minta asisten AI membuat perubahannya

Untuk perubahan yang lebih besar, seperti bagian baru atau tata letak yang berbeda, sering kali lebih mudah menjelaskan keinginan Anda dan membiarkan asisten AI menulis kodenya. Kami akan menggunakan Claude, tetapi asisten apa pun yang dapat membaca dan mengirim kembali file akan bekerja dengan cara yang hampir sama.

Unduh kode Anda

Di tab Desain, klik Unduh ZIP. Anda akan mendapatkan file bernama careers-page.zip yang berisi:

Enam file Anda, termasuk perubahan apa pun yang sudah Anda simpan.
Sebuah panduan, README.md, yang menjelaskan aturan untuk halaman karier dan setiap variabel yang dapat Anda gunakan. Panduan inilah yang membantu asisten AI menulis kode yang benar sejak percobaan pertama.
Kit pratinjau (preview.mjs dan company.json) untuk melihat pratinjau halaman di komputer Anda. Kit ini opsional, dan kami membahasnya di bagian akhir.

Anda tidak perlu mengekstraknya: Claude dapat membaca file ZIP apa adanya.

Minta perubahannya

Buka claude.ai, mulai chat baru, dan lampirkan careers-page.zip dengan tombol +. Lalu jelaskan apa yang Anda inginkan dengan bahasa sehari-hari, seperti saat berbicara dengan desainer. Berikut permintaan kami:

Ini kode halaman karier kami di Emploist. Tolong buat halaman lowongan terasa lebih hangat dan ramah: bagian pembuka yang lebih besar dengan tombol menuju lowongan yang dibuka, dan bagian “Why join us” berisi beberapa benefit (bisa kerja jarak jauh, anggaran belajar, cuti 30 hari, acara offsite tim). Ikuti README.md dan kirimkan kembali file ZIP yang bisa saya unggah.

Chat baru di claude.ai dengan careers-page.zip terlampir dan permintaan untuk halaman lowongan yang lebih hangat, dengan bagian pembuka yang lebih besar dan bagian “Why join us”. — Lampirkan ZIP dan jelaskan apa yang Anda inginkan.

Meminta Claude mengikuti README.md dan mengirim kembali ZIP bisa menghemat beberapa putaran tanya jawab.

Dapatkan kode yang diperbarui

Claude butuh waktu sekitar empat menit. Ia membaca panduan dan kodenya, membuat perubahan, lalu memeriksa hasil kerjanya sendiri: melihat pratinjau halaman dalam ukuran desktop dan ponsel dengan kit pratinjau, dan menjalankan pemeriksaan yang sama dengan yang dijalankan Emploist sebelum menyimpan. Setelah itu, Claude mengirim kembali careers-page.zip yang baru, beserta ringkasan perubahannya:

Bagian pembuka yang lebih besar dan hangat, dengan judul baru, kalimat sambutan, dan tombol “See open roles” yang langsung menuju daftar lowongan.
Bagian “Why join us” dengan empat kartu: bisa kerja jarak jauh, anggaran belajar, cuti 30 hari, dan acara offsite tim.
Sentuhan kecil pada daftar lowongan, seperti perkenalan singkat di atas daftar.

Balasan Claude di claude.ai: careers-page.zip siap diunggah, daftar perubahan di jobs.liquid dan styles.css, catatan bahwa judul baru berupa teks tetap, dan file ZIP dengan tombol “Download”. — Claude menjelaskan apa yang diubahnya dan mengirim kembali ZIP untuk diunduh.

Baca ringkasannya sebelum mengunggah. Di sini, Claude menyebutkan bahwa ia mengganti judul baru kami dengan judul buatannya sendiri, “Come build what’s next with us”, dan memberi tahu baris mana yang perlu diedit untuk mengubahnya. Claude juga membuat benefitnya tetap umum, tanpa mengarang detail seperti besaran anggaran belajar, sehingga kami bisa menambahkan detail kami sendiri.

Jika hasilnya belum sesuai, lanjutkan percakapannya: “buat tombolnya hijau”, “tambahkan benefit asuransi kesehatan”, atau “persingkat bagian pembukanya”. Setelah selesai, minta ZIP yang sudah diperbarui.

Unggah ke Emploist

Kembali ke tab Desain, klik Unggah ZIP dan pilih ZIP dari Claude. Emploist membuka editor dengan kode baru yang sudah dimuat, tetapi belum disimpan, sehingga Anda dapat memeriksanya sebelum ada yang berubah bagi kandidat.

Editor tepat setelah ZIP diunggah: status menunjukkan “Unsaved changes”, sebuah pesan menyatakan bahwa file dimuat dari careers-page.zip dan meminta Anda memeriksa pratinjau lalu menyimpan, dan pratinjau menampilkan bagian pembuka yang didesain ulang dengan tombol “See open roles”. — Kode yang diunggah terbuka di editor, siap diperiksa.

Gunakan Buka halaman dan ikon ponsel untuk memeriksa setiap halaman. Jika ada yang kurang pas, perbaiki di editor atau minta Claude lagi. Jika semuanya sudah terlihat bagus, klik Simpan.

Hasilnya

Berikut halaman karier Northwind Labs setelah kedua perubahan: font Fraunces dari editor, dan desain ulang dari Claude. Bandingkan dengan desain bawaan di awal panduan ini.

Halaman karier Northwind Labs yang didesain ulang dalam font Fraunces: label “Careers at Northwind Labs”, judul “Come build what's next with us”, deskripsi perusahaan, kalimat sambutan, tombol “See open roles” dengan jumlah lowongan yang dibuka, dan bagian “Why join us” dengan empat kartu: “Remote-friendly”, “Learning budget”, “30 days off”, dan “Team offsites”. — Halaman karier yang sudah jadi, dengan daftar lowongan lebih ke bawah.

Dan di ponsel:

Halaman karier yang didesain ulang di ponsel: judul, deskripsi perusahaan, dan tombol “See open roles” selebar layar, dengan bagian “Why join us” yang dimulai di bawahnya. — Halaman yang sama di ponsel.

Pratinjau di komputer Anda (opsional)

Jika Anda ingin mencoba perubahan di komputer sebelum mengunggahnya, kit pratinjau dalam ZIP menampilkan halaman karier Anda dengan contoh lowongan, sama seperti pratinjau di Emploist. Kit ini memerlukan Node.js 22 atau yang lebih baru.

Ekstrak careers-page.zip.
Buka terminal di folder hasil ekstraksi, lalu jalankan node preview.mjs.
Buka http://localhost:4321 di browser Anda, dan muat ulang setiap kali Anda selesai mengubah sesuatu.

Untuk memeriksa masalah pada kode Anda dengan cara yang sama seperti Emploist sebelum menyimpan, jalankan node preview.mjs check. Jika Anda menggunakan asisten AI yang bekerja dengan file di komputer Anda, seperti Claude Code, Anda dapat memintanya menjalankan perintah-perintah ini untuk Anda.

Perlu diketahui

Hanya admin yang dapat mengedit kode. Anggota tim lainnya dapat melihat tab Desain, tetapi tidak dapat mengubahnya.
JavaScript tidak dijalankan di halaman karier. Ini menjaga keamanan halaman dan kandidat Anda. Semua yang ada di panduan ini berfungsi tanpa JavaScript.
Gambar, font, dan stylesheet dapat dimuat dari situs web lain, selama alamatnya diawali https://. Begitulah cara Google Fonts bekerja.
Formulir lamaran tetap berfungsi bagaimanapun Anda mengubah desainnya, sehingga lamaran tetap masuk ke kotak masuk setiap lowongan.

Ingin melihat halaman karier Anda sendiri? Mulai uji coba gratis, dan halaman karier Anda siap begitu Anda menyiapkan perusahaan. Setelah itu, buat sesuai gaya Anda.