Cara Memasukkan Preview Codepen Kedalam Postingan

Cara Memasukkan Preview Codepen Kedalam Postingan

Akihiko

8/09/2018

Assalamualaikum.
Hai para pembaca yang budiman, kita berjumpa lagi disini. melalui untaian untaian kata yang telah tersusun dengan rapi. yang akan menambah wawasan serta ilmu yang akan berguna nanti.

Ok lupakan saja sajak diatas -_-. langsung saja masuk ke materinya.

Codepen merupakan salah satu website penyedia layanan penyimpanan script maupun project lainnya. dan semua itu dapat dilihat atau dibagikan secara publik maupun dapat disimpan untuk pribadi.

Kita dapat membagikan script di codepen dengan mengirimkan alamat atau URL dari script yang ingin di bagikan. memang ini sangat membantu untuk mengerjakan project besar seperti web design misalnya. Dikarenakan kita juga dapat melihat bagaimana script tersebut bekerja secara realtime.

Jadi disaat kita melakukan Codding script, hasil akan langsung terlihat di sebelah bawah script ( tergantun ente yang mengatur tata letaknya ).

Kita dapat juga memasukan ( Embed ) script tersebut kedalam blog ataupun website yang kita miliki dengan cara menekan perintah Embed ( Disebelah pojok kanan bawah, di samping share ).

Namun masalah baru muncul, di perangkat android kita tidak dapat melakukan embed tersebut dan kita harus membukanya di perangkat komputer untuk melakukannya.

Seperti masalah yang dialami oleh salah satu teman yang ane punya. dia juga yang mendasari terbentuknya artikel ini.

Ok tanpa berlama lama lagi, berikut

1. Silahkan membuka blogger.com > lalu pilih entri baru / postingan baru
2. Buka HTML editor
3. Silahkan copy script Dibawah ini

<div class="cp_embed_wrapper">
<iframe id="cp_embed_grXZRQ" src="//codepen.io/MoOx/embed/preview/grXZRQ?default-tab=result&amp;height=265&amp;preview=true&amp;slug-hash=grXZRQ&amp;theme-id=light&amp;user=MoOx" scrolling="no" frameborder="0" height="265" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" name="CodePen Embed" title="Ganti Sama Sesuai Judul Code Pen" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe>
</div>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>

4. Edit yang ane tandai menjadi sesuai tautan Url yang ingin ente embed. Berikut contoh link yang ane gunakan.

https://codepen.io/MoOx/pen/grXZRQ

Penjelasan :
MoOx adalah nama user codepen
grXZRQ merupakan ID dari script codepen

5. Lalu Simpan Dan lihat hasilnya. untuk hasil yang ane bikin bisa lihat di bawah ini.

Tak usah di tunggu pak, itu memang css loading. jadi tetep aja begitu :v. cara ini memang mudah tapi menjadi sangat sulit bagi mereka yang tak mengetahui.

Cukup sampai disini saja, semoga dapat bermanfaat. Jika ada yang ingin ditanyakan, silahkan saja bertanya melalui kolom komentar.
Wassalamualaikum. (^^)/

Akihiko