Pada kesempatan kali ini saya akan menjelaskan cara embed CodePen di Website. Perlu teman-teman ketahui sebelumnya, CodePen adalah Editor Online untuk melakukan pengembangan website. dengan Editor tersebut memungkinkan teman-teman untuk dapat menulis kode di browser melalui situs online dari CodePen tersebut, dan dapat langsung melihat hasilnya secara realtime. Editor tersebut masuk ke dalam kategori Tools yang bersifat bebas lisensi, CodePen berfokus terutama pada bahasa front-end seperti sintaks HTML, CSS, JavaScript, dan preprocessing yang berubah menjadi hal-hal tersebut.
Tidak hanya itu saja, untuk Editor CodePen tersebut teman-teman bisa gabungkan ke dalam Website yang teman-teman buat, seperti contoh didalam halaman setiap artikel Website teman-teman. Mungkin sebagian dari teman-teman sudah sering melihat Editor tersebut di dalam halaman Website orang lain, kenapa bisa demikian ? Karena Editor Online tersebut memang menyediakan Embed yang dapat teman-teman manfaatkan untuk kebutuhan di Website yang teman-teman buat dan kurang lebih sama halnya seperti ketika teman-teman melakukan Embed Video Youtube yang di pasang di Website teman-teman.
Tidak hanya itu saja, Tools Editor Online CodePen tersebut sangat berguna untuk teman-teman dalam mempresentasikan pekerjaan dan melihat secara langsung sekaligus teman-teman dapat belajar lebih banyak lagi dari user-user lainnya yang bergabung di CodePen. Menurut saya Tools Editor Online CodePen tersebut sangat baik untuk memecahkan problem solving coding karena disamping itu teman-teman bisa mendapatkan banyak pemasukan kritik dan saran dari komunitas lainnya yang ada bergabung di CodePen. Dan untuk melakukan cara embed CodePen di Website, teman-teman bisa ikuti saya.
Berikut Tahapannya
- Sebelumnya saya asumsikan, teman-teman sudah memiliki Website yang siap untuk mendukung Embed tersebut
- Jika sudah, teman-teman kunjungi situs CodePen, jika belum terdaftar silahkan Daftar terlebih dahulu
- Jika sudah, selanjutnya teman-teman Login terlebih dahulu.
- Selanjutnya klik menu NewPen yang berada diatas nama profil teman-teman.
- Jika sudah, isi kotak kode tersebut dengan kodingan yang ingin teman-teman buat atau kode yang ingin ditampilkan di Website teman-teman.
- Jika sudah, selanjutnya klik Embed yang ada dipojok bawah kanan.
- Setelah itu selanjutnya akan muncul jendela baru yang disertai dengan caption DRAG TO RESIZE. Klik pada kotak Drag to Resiz tersebut, sesuaikan ukuran yang ingin teman-teman tampilkan di Website nantinya, jika sudah Block dan Copy code Embed tersebut, seperti gambar di bawah ini :
Sampai disini penjelasan saya mengenai cara embed CodePen di Website, semoga bermanfaat.