Cara menggunakan download template html gratis

Indonesian (Bahasa Indonesia) translation by Muhlis Tirowali (you can also view the original English article)

Ada banyak cara untuk membuat situs web resume pribadi anda.

Anda dapat menggunakan salah satu dari banyak pembuat situs web atau anda dapat memilih CMS seperti WordPress, Drupal, atau yang serupa. Anda juga bisa menyewa seorang developer profesional untuk membuatkan satu situs bagi anda.

Dengan begitu banyak pilihan, sulit mengetahui di mana harus memulai. Lebih rumit lagi, masing-masing pilihan ini dilengkapi dengan serangkaian pro dan kontra yang berbeda, belum lagi tingkat kesulitan atau label harga yang terlibat.

Tetapi ada cara bagus lainnya untuk membuat situs pribadi anda dalam jumlah waktu yang wajar, yakni menggunakan template resume HTML. Mudah untuk digunakan dan diunggah ke server hosting anda.

Berikut adalah beberapa template yang terbaik (agar cepat menelusuri sebelum membaca):

Selain itu, kode di balik template situs web resume profesional jauh sedikit lebih rumit bagi pemula dibandingkan bahasa pemrograman yang lebih kompleks dalam sistem pengelolaan konten.

Dalam bagian seri “Membuat Situs Web Resume Pribadi yang Hebat” ini, kami memandu anda melalui proses sederhana tentang bagaimana memodifikasi dan mengunggah template resume HTML.

Ikuti alur kerja berikut ini untuk membuat situs web resume anda dan menyesuaikannya dengan merek pribadi anda sehingga anda dapat meluncurkan situs anda dalam waktu singkat.

Apa yang Anda Perlukan untuk Membuat Website Resume Anda Hidup?

Sebelum memulai tentang modifikasi template situs, mari kita bahas terlebih dahulu alat yang anda perlukan agar situs web resume HTML anda aktif dan berjalan:

1. Perusahaan Hosting yang Tepat

Membeli nama domain untuk situs anda hanyalah langkah pertama dalam perjalanan anda. Anda juga memerlukan server hosting tempat anda akan mengunggah file untuk situs anda. Menemukan perusahaan hosting yang tepat tidaklah mudah, apalagi jumlah mereka yang begitu banyak. Kebanyakan penyedia hosting menawarkan paket hosting dasar antara $5 dan $10 per bulan. Beberapa perusahaan menawarkan bandwidth dan ruang tak terbatas, sementara yang lain menawarkan rencana yang lebih terbatas.

Hal penting yang perlu diingat adalah hampir semua penyedia hosting mendukung template HTML. Saat berbelanja untuk mencari perusahaan hosting, baca FAQ mereka dan pastikan perusahaan itu memberikan dukungan pelanggan bila suatu saat anda memerlukan bantuan untuk situs web anda. Anda juga harus melakukan sedikit riset dan membaca ulasan host tertentu di situs web independen untuk melihat seberapa puaskah pelanggan mereka.

2. Klien FTP

Begitu anda menemukan perusahaan hosting, anda perlu mendownload klien FTP. Klien FTP akan mengizinkan anda mengunggah template anda ke server hosting. Pilihan program FTP akan bergantung pada sistem operasi yang digunakan komputer anda.

Salah satu program yang paling populer adalah FileZilla. Ini adalah program FTP gratis yang sangat mudah digunakan dan tersedia di Windows, Mac, serta Linux.

3. Editor Kode

Anda juga memerlukan editor teks untuk membuat perubahan pada file template anda. Meskipun anda bisa menggunakan Notepad atau TextEdit untuk membuat perubahan, menggunakan editor kode akan membuatnya lebih mudah. Tidak seperti editor teks biasa, editor kode menyertakan alat yang memudahkan pengeditan, seperti penggunaan warna yang berbeda untuk berbagai bagian kode sehingga mempermudah anda untuk melihat apa yang sedang anda edit.

Untuk keperluan tutorial ini, saya akan menggunakan Sublime Text yang bisa digunakan di Mac, Windows, dan Linux, serta versi trial gratis untuk diunduh. Pelajari lebih lanjut tentang cara bekerja dengan editor kode yang populer ini:

4. Template HTML dan Gambar untuk Situs Resume Anda

Dua hal terakhir yang anda butuhkan adalah template resume HTML dan gambar yang anda rencanakan untuk digunakan di situs anda.

Untuk keperluan tutorial ini, saya akan menggunakan template situs web resume Flatrica HTML, yang ditunjukkan di sini:

Template Situs Web Resume HTML Flatrica.

Anda dapat menemukan template situs web anda di area Unduhan akun Envato anda setelah anda melakukan pembelian. Setelah mengunduh template situs HTML, unzip foldernya dan simpan ke desktop anda agar mudah mengaksesnya.

Ketika sampai pada gambar, anda memerlukan headshot dan foto pribadi lainnya yang anda rencanakan untuk gunakan. Anda juga bisa menggunakan gambar atau pola latar belakang. Jadi, pastikan anda menyimpan semua gambar di komputer sehingga anda bisa menambahkannya ke template anda.

Cara Mengedit Konten Template Situs Web Resume Anda

Sekarang anda memiliki segalanya, maka sekarang saatnya untuk mempersonalisasi template dengan informasi anda. Mari lanjutkan melalui cara kustomisasi template HTML Flatrica:

1. Struktur Template Resume HTML Flatrica

Sebelum mulai memodifikasi filenya, mari kita lihat struktur template HTML ini. Saat anda meng-unzip folder, anda akan melihat isinya terdapat dua folder: satu dengan dokumentasi dan satunya lagi dengan file template yang sebenarnya.

Lihat file yang disertakan dalam template situs web resume HTML ini.

Folder dengan file template situs sebenarnya memiliki beberapa subfolder di dalamnya, yaitu:

• Warna, yang memiliki semua kode warna dan variabel yang digunakan dalam template situs.
• Huruf, yang berisi semua font ikon.
• Gambar dengan semua gambar placeholder.
• Folder memiliki semua kode JavaScript yang dibutuhkan agar template berfungsi dengan benar. Dalam kebanyakan kasus, anda tidak perlu mengedit folder ini atau file di dalamnya karena JavaScript menyediakan fungsi tambahan seperti toggling menu untuk dibuka, pegendali animasi slide, dan validasi formulir.
• Folder PHP yang berisi kode PHP diperlukan agar formulir kontak berfungsi. Anda hanya perlu mengedit satu baris kode di sini untuk menambahkan alamat email anda.
• Folder Sass berisi semua variabel untuk stylesheet.
• Stylesheets berisi file CSS, yang perlu diedit untuk menambahkan styling ke template dan mencocokkannya dengan merek anda.

Selain dari folder ini, ada juga beberapa file HTML: index-normal.html, index-video.html, single-blog.html, dan single-portfolio.html.

Ingatlah bahwa template anda mungkin tidak memiliki semua file dan folder ini. Namun, dalam banyak kasus, anda akan menemukan folder stylesheet, gambar, JavaScript, dan PHP. Template anda mungkin juga memiliki lebih sedikit atau lebih banyak file HTML.

2. Mengganti Informasi Template HTML Default

Klik dua kali index-normal.html (atau index.html jika anda menggunakan template yang berbeda). Ini akan membuka filenya di browser sehingga memudahkan anda untuk memahami bagian kode mana yang perlu anda edit dan bagaimana menemukannya di file template HTML anda.

Pemeriksa kode browser melihat kode template HTML

Jika anda melihat template di browser anda, anda akan melihat bahwa anda perlu mengedit bagian-bagian berikut ini:

• Nama dan informasi kontak.
• Uraian teks di atas tombol untuk mengunduh CV anda.
• Bagian yang berbeda berisi informasi tentang pendidikan, keterampilan, pengalaman, portofolio, klien masa lalu, dan masih banyak lagi.

Begitu anda tahu apa yang harus diubah, anda bisa mulai mencari kode yang sesuai.

Klik kanan pada nama yang bertuliskan John Doe dan pilih Inspect. Anda akan melihat sebuah panel muncul di bagian bawah yang menunjukkan kode HTML yang membentuk template kami.

Baris kode yang berisi nama dipilih di sisi kiri panel Inspektur, dengan style yang sesuai di sebelah kanan.

Seperti yang dapat anda lihat dari tangkapan layar di atas, namanya ada di antara tag

yang merupakan tag HTML yang digunakan mewakili judul.

Dalam kebanyakan kasus, pasangan tag seperti ini memiliki pembuka dan tag penutup, dan konten harus ditempatkan di antara tag tersebut untuk ditampilkan di laman web, seperti ini:

John Doe

Untuk mengedit template, semua yang perlu anda ketahui adalah tag mana yang berisi bagian halaman yang ingin anda edit, temukan di kode, dan gantilah dengan informasi anda.

Buka File HTML di dalam Editor Anda

Kembali ke folder template, klik kanan pada index-normal.html, dan pilih Open with Sublime Text. Anda sekarang harus melihat kode HTML lengkap yang membentuk template anda.

Untuk mulai mengedit template, anda ingin menemukan kode yang sama dengan yang anda lihat di panel Inspektur pada browser anda.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        

Gulir ke bawah hingga anda temukan pada baris ke 150-151. Lalu klik antara tag

dan ganti dengan informasi anda.

Terus ulangi langkah-langkah ini hingga anda mengganti semua informasinya dengan informasi anda sendiri.

Setelah itu, klik di antara tag

, hapus teks dan masukkan profesi Anda.

Terus ulangi langkah-langkah ini hingga anda mengganti semua informasinya dengan informasi anda sendiri.

Jika ada bagian dalam template yang tidak anda butuhkan, cukup hapus saja bagian itu. Pada gambar di bawah, saya telah memilih semuanya di bagian Tabel Penentuan Harga dan menghapus semua kode di dalamnya.

Anda dapat menghapus bagian kode yang tidak anda butuhkan.

Cara Mengganti Gambar Dengan Anda Sendiri

Untuk mengganti gambar dengan gambar anda sendiri, cukup pilih semua gambar di folder yang sesuai, hapus, dan letakkan gambar anda di dalam folder yang sama. Jika anda mengikuti saran sebelumnya, anda dapat memberi nama gambar anda dengan nama yang sama dengan placeholder sehinga lebih cepat untuk mengedit templatenya.

Jika anda ingin menambahkan informasi lebih lanjut, pilih kode di bagian yang diinginkan, salin dengan mengklik Control/Command + C, kemudian tempelkan di bawah ini dengan Control/Command + V. Pada gambar di bawah, saya ingin menambahkan bar keterampilan lain, jadi saya memilih kode untuk bar keterampilan keempat dan langsung menyalinnya di bawah ini:

Anda bisa menduplikat bagian HTML jika diperlukan.

Dan hasil akhirnya terlihat seperti ini:

Produk akhir menambahkan bar keterampilan lainnya.

Bagaimana Mengubah Tampilan Situs Resume HTML Anda

Setelah anda mengganti semua informasinya, ini saatnya menyusun template situs web resume sesuai dengan keinginan anda. Secara default, template HTML Flatrica hadir dengan beberapa stylesheet yang berbeda. Jika anda melihat folder stylesheet, anda akan menyadari bahwa foldernya dinamai setelah warnanya digunakan:

Flatrica hadir dengan banyak pilihan stylesheet

Anda dapat menyesuaikan warna secara cepat dengan mengganti stylesheet di bagian kepala dokumen dengan nama stylesheet pilihan anda. Cari baris kode yang menyebutkan:

Mengubah nama menjadi style_blue.css akan memberi warna dan tampilan baru templatenya:

Hasil penerapan blue stylesheet.

Jika anda merasa berjiwa petualang, anda bisa mengedit stylesheet utama yang disebut style.css dengan font dan warna pilihan anda sendiri. Misalnya, anda dapat mengedit warna latar belakang dalam style.css dengan memasukkan kode HEX dari warna yang anda inginkan seperti:

Background-color: # 65b5c1;

Mengedit CSS bisa dilakukan dengan cara yang sama seperti kita mengedit HTML. Klik kanan unsur yang ingin anda ubah dan klik Inspect. Kali ini, anda akan mencari kode di sisi kanan tab Inspektur dan kemudian menemukan kode yang sama di editor kode.

Lihat file CSS template situs.

Cara Unggah File Situs Web Anda ke Server

Setelah anda memodifikasi file template situs sesuai dengan keinginan, anda harus mengunggahnya ke server hosting anda. Anda seharusnya sudah menerima email dari host anda yang berisi informasi penting untuk mentransfer file melalui FTP.

Untuk memulai proses unggah, jalankan program FTP anda. Dalam kasus ini, saya menggunakan FileZilla. Masukkan informasi yang diberikan oleh host anda di bilah atas, lalu klik QuickConnect:

Memasukkan informasi ke FileZilla.

Cari folder dengan template anda pada komputer anda di sisi kiri layar dan klik di bagian atas untuk memperluasnya. Di sisi kiri bawah, pilih semua file dan folder, lalu geser ke sisi kanan layar.

Pastikan untuk mengunggahnya ke folder root server hosting anda di folder public_html.

Mengunggah file ke server via FTP.

Setelah semua file diunggah, buka browser anda dan masukkan nama domain anda. Selamat, situs resume baru anda sekarang hidup!

4 Tips Cepat Membuat Situs Resume Anda Mengagumkan

Sekarang setelah anda tahu cara menggunakan template resume HTML, berikut adalah empat tip cepat yang akan membantu anda membuat situs pribadi anda menjadi lebih hebat lagi:

1. Kompres Gambar anda - Sebelum mengunggah file ke server hosting anda, pastikan untuk mengurangi ukuran file gambar anda dengan mengoptimalkannya. Hal ini akan membantu mempercepat situs web anda. Anda bisa menggunakan alat seperti TinyJPG untuk mengurangi ukuran gambar tanpa mempengaruhi kualitasnya.
2. Pertimbangkan untuk Meminimalkan Stylesheets dan File JavaScript Anda - Seperti halnya gambar, mengurangi ukuran file akan membantu situs anda memuat lebih cepat. Alat seperti CSS Minifier dan JSCompress dapat membantu anda dalam hal ini.
3. Tambahkan Situs Anda ke Profil Media Sosial Anda - Anda bekerja keras untuk membuat situs anda, maka sekarang adalah saatnya untuk memberi tahu kepada dunia tentang ini. Tingkatkan visibilitas anda dengan menambahkan situs anda ke profil media sosial anda.
4. Gunakan Ini sebagai Bagian dari Tanda Tangan Email Anda - Salah satu cara terbaik untuk mempromosikan situs anda adalah menambahkannya ke tanda tangan email anda. Sederhana saja, gratis, dan butuh beberapa detik persiapan, namun manfaatnya sangat banyak.

Set Up Template Resume HTML Anda

Mengedit template HTML mungkin terasa mengintimidasi pada awalnya, tetapi tidak sesulit begitu anda mengerti bagaimana template terstruktur dan apa saja yang perlu diedit. Jika anda meluangkan waktu untuk membaca beberapa tutorial, maka anda akan menguasai HTML dan CSS dalam waktu singkat. Gunakan panduan di atas untuk memodifikasi template situs resume anda dan meningkatkan kesempatan anda untuk dipekerjakan.