Cara Menggunakan Custom HTML di SitePro

Ingin menambahkan fitur khusus atau elemen unik di website Anda? Dengan Custom HTML di SitePro, Anda bisa memperluas kemampuan editor visual bawaan dan memasukkan kode sesuai kebutuhan, seperti widget tools, formulir pihak ketiga, hingga script analitik. Banyak pengguna pemula hingga profesional membutuhkan fleksibilitas ini untuk meningkatkan fungsi dan tampilan pada website mereka.

Kabar baiknya, proses menambahkan custom HTML di SitePro sangat mudah dan dapat dilakukan langsung melalui editor, tanpa harus mengubah struktur inti website. Yuk, pelajari langkah-langkahnya pada panduan berikut!

Fitur Custom HTML SitePro

SitePro adalah web builder yang memudahkan siapa pun membuat website melalui fitur drag and drop. Dengan platform ini, Anda dapat membangun website sederhana namun tetap profesional, seperti company profile, landing page, atau portofolio pribadi.

Salah satu fitur yang cukup penting dalam SitePro adalah Custom HTML. Fitur ini memungkinkan Anda untuk memasukkan embed atau skrip tambahan ke dalam website, misalnya video dari media sosial, Google Maps, Google Form, dan berbagai elemen interaktif lainnya. Namun perlu diperhatikan, fitur ini hanya mendukung kode berbasis HTML.

Catatan!

Fitur Custom HTML hanya tersedia di versi berbayar seperti paket Basic, Pro, dan Business. Cara upgrade lisensi SitePro bisa Anda pelajari di sini.

Contoh Penggunaan Custom HTML

Dalam tutorial ini, kami akan menggunakan fitur Custom HTML untuk menambahkan elemen-elemen umum seperti embed video dari media sosial, kode iklan Google (Google AdSense), Google Maps, hingga Google Form. Sebenarnya, fitur ini juga bisa digunakan untuk embed video YouTube. Namun, khusus YouTube terdapat langkah tersendiri yang sudah kami bahas pada panduan berikut.

Berikut ini beberapa contoh penggunaan custom HTML di SitePro:

Video Instagram

Fitur ini bisa digunakan untuk melakukan embed video dari postingan akun Instagram Anda.

1. Pilihlah video instagram yang akan ditampilkan ke dalam website, kemudian klik bagian titik tiga.

2. Kemudian akan muncul tampilan seperti berikut, pilih yang Embed.

3. Kemudian akan tampil block yang berisikan script, klik tombol copy embed code.

4. Masukkan script tersebut ke dalam fitur custom HTML di SitePro dengan klik icon pensil. Kemudian klik apply untuk menyimpan.

5. Hasil akan seperti berikut. Anda dapat menyesuaikan ukuran pada bagian Size atau modifikasi di script embed di bagian width dan height.

6. Tampilan preview akan seperti berikut:

Video Tiktok

Fitur ini bisa digunakan jika ingin menampilkan hasil video yang sudah diunggah di akun Tiktok Anda.

1. Pilih video yang akan digunakan, lalu klik icon <> untuk melakukan generate code embednya.

2. Setelah itu akan ada informasi script, klik tombol copy code.

3. Pasangkan script embed ke dalam Custom HTML dan klik apply untuk menyimpan.

4. Anda dapat menyesuaikan ukuran sesuai keinginan di bagian Size (mirip seperti contoh video instagram. Hasil preview video akan seperti berikut:

Video Facebook

Fitur ini bisa digunakan untuk melakukan embed video dari postingan akun Faacebook Anda.

1. Pilih video yang akan digunakan lalu klik titik tiga dan pilih embed.

2. Kemudian klik copy code. Anda bisa centang Include full post jika memerlukannya.

3. Memasukkan kodenya ke dalam Custom HTML dan klik Apply.

4. Anda dapat menyesuaikan size di bagian kanan atau melalui script embed pada area width dan height sesuai keinginan.

5. Hasil preview akan menjadi seperti berikut:

File video di hosting

Apabila Anda punya video sendiri yang belum diupload ke aplikasi sosial media maupun Youtube. Pada SitePro bisa langsung upload file video menggunakan fitur Media. Namun, file video hanya dibatasi maksimal 1 MB saja.

Jika video yang akan Anda gunakan lebih dari 1 MB, maka bisa Anda upload dahulu ke hosting pada file manager > public_html. Kemudian membuat folder untuk meletakkan video yang akan dipakai. Nantinya untuk pemanggilan link video akan menjadi http://namadomain.com/folder/nama-file.

• namadomain.com = nama domain Anda
• /folder = nama folder video di hosting Anda
• /nama-file.mp4 = nama file video di hosting Anda. Jangan lupa extensi videonya

Setelah itu, Anda dapat menggabungkan link video dengan script HTML seperti

<!DOCTYPE html>
<html>
<body>

<iframe width="100%" height="345" src="link file video">
</iframe>

</body>
</html>

Setelah itu dimasukkan ke fitur Custom HTML di SitePro dan klik Apply untuk menyimpan.

Anda juga dapat menyesuaikan ukuran di bagian Size atau pada script bagian <iframe width=”100%” height=”345″

Setelah itu, hasil preview video akan menjadi seperti berikut:

Google Form

Fitur custom HTML juga bisa digunakan untuk menambahkan Google Form.

1. Pastikan sudah menyiapkan Google Form yang ingin digunakan, setelah itu klik titik 3 lalu pilih embed atau sematkan HTML.

2. Anda dapat menyesuaikan ukuran form yang akan ditampilkan. Setelah itu, klik salin/copy untuk mendapatkan script kodenya.

3. Masukkan script tersebut ke dalam custom HTML di SitePro. Kemudian klik Apply untuk memasangnya.

4. Hasil preview akan seperti berikut:

Google Adsense

Apabila Anda ingin memasang Iklan di website SitePro, hal tersebut dapat dilakukan menggunakan fitur Custom HTML. Pastikan website Anda sudah memenuhi persyaratan untuk menampilkan iklan dari Google terlebih dahulu.

Setelah Anda mendaftarkan akun Google Adsense dan mendapatkan kode iklannya. Anda dapat langsung memasangannya melalui Custom HTML. Untuk alur caranya sudah kami bahas pada artikel Cara Memasang Script Google Adsense di SitePro

Google Maps

Anda juga dapat memanfaatkan fitur tersebut untuk memasang Maps google di website Anda. Opsi ini lebih praktis selain mendapatkan API Google Maps. Biasanya Maps akan dipasang di menu Kontak, namun tidak menutup kemungkinan dipasang di bagian yang lainnya di dalam website.

Pastikan titik lokasi yang akan Anda gunakan sudah tepat, setelah itu Anda dapat menemukan script kodenya melalui google maps. Untuk detail referensi pemasangannya dapat Anda baca pada artikel Cara Menambah Maps Google pada SitePro

Penutup

Dengan fitur custom HTML, Anda bisa menambahkan berbagai elemen yang belum tersedia secara langsung di SitePro. Mulai dari embed video, kode iklan Google AdSense, Google Form, Google Maps, hingga elemen lain berbasis script HTML sesuai kebutuhan Anda. Fitur ini memberikan fleksibilitas lebih dalam mempercantik tampilan website, sekaligus meningkatkan fungsionalitasnya.

Demikian panduan mengenai penggunaan custom HTML di SitePro. Semoga bermanfaat dan selamat berkreasi membangun website yang lebih profesional!