Cara Embed CodePen Di Website

Di kesempatan kali ini saya akan menjelaskan cara embed CodePen di Situs. Perlu teman-teman ketahui sebelumnya, CodePen ialah Editor Online bagi mengerjakan pengembangan blog.  dengan Editor tersebut memungkinkan teman-teman bagi dapat menulis kode di browser lewat situs online dari CodePen tersebut, dan dapat seketika melihat hasilnya secara realtime. Editor tersebut masuk ke pada kategori Tools yang bersifat bebas lisensi, CodePen berfokus terutama di bahasa front-end seperti sintaks HTML, CSS, JavaScript, dan preprocessing yang berubah menjadi hal-hal tersebut.



Tak hanya itu saja, bagi Editor CodePen tersebut teman-teman dapat gabungkan ke pada Situs yang teman-teman bikin, seperti contoh didalam halaman setiap artikel Situs teman-teman. Mungkin beberapa dari teman-teman telah sering melihat Editor tersebut di pada halaman Situs orang lain, kenapa dapat demikian ? Karena Editor Online tersebut memang menyediakan Embed yang dapat teman-teman manfaatkan bagi keperluan di Situs yang teman-teman bikin dan kurang lebih sama halnya seperti ketika teman-teman mengerjakan Embed Video Youtube yang di pasang di Situs teman-teman.



Tak hanya itu saja, Tools Editor Online CodePen tersebut amat bermanfaat bagi teman-teman pada mempresentasikan kegiatan dan melihat secara seketika sekaligus teman-teman dapat belajar lebih banyak lagi dari user-user lainnya yang bergabung di CodePen. Menurut saya Tools Editor Online CodePen tersebut amat bagus bagi memecahkan problem solving coding karena disamping itu teman-teman dapat memperoleh banyak pemasukan kritik dan saran dari komunitas lainnya yang terdapat bergabung di CodePen. Dan bagi mengerjakan cara embed CodePen di Situs, teman-teman dapat ikuti saya.



Berikut Tahapannya




  • Sebelumnya saya asumsikan, teman-teman telah mempunyai Situs yang siap bagi mendukung Embed tersebut


  • Apabila telah, teman-teman kunjungi situs CodePen, bila belum terdaftar silahkan Daftar terlebih dahulu


  • Apabila telah, berikutnya teman-teman Login terlebih dahulu.


  • Berikutnya klik fitur NewPen yang berada diatas nama profil teman-teman.


  • Apabila telah, isi kotak kode tersebut dengan kodingan yang ingin teman-teman bikin atau kode yang ingin ditampilkan di Situs teman-teman.


  • Apabila telah, berikutnya klik Embed yang terdapat dipojok bawah kanan.


  • Setelah itu berikutnya akan muncul jendela baru yang disertai dengan caption DRAG TO RESIZE. Klik di kotak Drag to Resiz tersebut, sesuaikan ukuran yang ingin teman-teman tampilkan di Situs nantinya, bila telah Block dan Copy code Embed tersebut, seperti gambar di bawah ini :



Pada



Hingga disini penjelasan saya mengenai cara embed CodePen di Situs, semoga bermanfaat.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Membuat Table Warna Berselang dengan PHP