Cara Memasang Preview CodePen di Artikel Blog

Kali ini saya akan menjelaskan tutorial bagaimana caranya memasang (Embed) atau menambahkan Preview CodePen ke artikel blog.

Bahasa lainnya yaitu cara Embed atau Insert Preview CodePen ke postingan blog.

Buat yang belum tahu apa itu CodePen, klik di sini: Pengertian CodePen dan Cara Membuat Akun CodePen Lengkap dengan Gambar.

Cara Memasang Preview CodePen di Artikel Blog

Preview CodePen yang akan disematkan, akan ditampilkan di dalam postingan blog yang sedang kalian baca sekarang ini, lho!

Contohnya, CodePen dari Julia Miocene dengan judul Pure CSS "Biker": https://codepen.io/miocene/pen/jLzmJq.

Sekarang kita pasang CodePen dari Pure CSS "Biker" tersebut ke postingan!

Keterangan: Pada contoh di atas, miocene adalah username, sedangkan jLzmJq adalah ID Script CodePen.

Untuk membuat Preview dari CodePen agar mau muncul di artikel seperti contoh di atas, kalian harus menggunakan kode ini:

<div class="cp_embed_wrapper">
<iframe id="cp_embed_ID Script CodePen" src="//codepen.io/username/embed/preview/ID Script CodePen?default-tab=result&amp;height=265&amp;preview=true&amp;slug-hash=ID Script CodePen&amp;theme-id=light&amp;user=username" scrolling="no" frameborder="0" height="265" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" name="CodePen Embed" title="Ganti Teks ini dengan Nama CodePen" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe>
</div>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>

Kalian harus menyesuaikan atau mengganti (ubah) teks username dengan username pemiliknya atau milik kalian sendiri.

Lalu kalian juga harus mengganti teks ID Script CodePen dengan ID dari Script CodePen yang ingin ditampilkan.

Keren banget, kan? Itulah tutorial bagaimana caranya Embed atau Insert Preview CodePen ke postingan blog. Semoga berguna.