Cara embed Codepen ke halaman posting blogger untuk konten tutorial

Saya baru terpikir perihal judul di atas, padahal sudah mengutak atik codepen milik admin dalam beberapa bulan terakhir. Padahal Editor HTML Codepen memiliki antar-muka yang sangat user friendly, simpel dan mudah di fahami.

1. Langkah pertama silahkan masuk ke CodPen terlebih dahulu.

Jika telah masuk Anda akan mengunjungi halaman awal codepen dalam bentuk tampilan antarmuka editorial HTML:

Silahkan klik 'Pen' yang dilingkari merah, anggaplah itu adalah rancangan atau desain yang akan kita buat menggunakan bahasa pemrograman web dan akan kita tampilkan pada halaman blog.

2. Setelah lembar kerja berbentuk blanko kosong terbuka kita dapat menuliskan perintah perintah atau pengaturan HTML kedalam blanko tersebut, seperti di tunjukan pada gambar berikut:

Contoh di atas adalah penulisan yang telah jadi yang saya buat untuk menampilkan sumber kode sekaligus demo pada tutorial membuat menu sidebar yang telah saya posting di halaman blog ini. 

3. Untuk membuatnya tampil alami di halaman postingan blogger anda harus mengklik tombol kecil 'Embed' seperti ditunjukan mata panah. Akan tampil kode embed sebagai berikut:

Maka setelah mengklik 'Embed' tadi akan muncul kode yang harus Anda copy dan di pastekan ke dalam halaman postingan blogger dalam bentuk opsi HTML. Beruntungnya opsi HTM ini telah direkomendasikan penggunaannya. 

4. Cara memasangnya ke dalam halaman postingan blogger adalah sebagai berikut: Anda harus membuka halaman postingan dengan opsi HTML  view bukannya opsi Compose View (penulisan normal), perhatikan contoh gambar:

Gambar di atas adalah contoh menulis melalui halaman Compose view, umumnya para blogger menulis melalui cara normal ini, mulai dari mengetik tulisan, menambahkan gambar dan juga video. Sampai konten diteebitkan dan dibaca oleh pengunjung. 

Akan tetapi perhatikan gambar berikut:

Cara penulisan ini adalah melalui HTML view,  biasanya di perlukan untuk menampilkan kode kode ke dalam bentuk visual kita dapat menyamakan penulisan sebagai bentuk input dan hasilnya setelah diterbitkan berbentuk output. 

Malangnya pada tampilan antarmuka pengaturan dasbor blogger terbaru format HTML view tampak rapat satu sama dengan yang lain sehingga bagi yang tidak terbiasa akan kesulitan menempatkan kode yang akan di embed pada tempat yang tepat dan benar di dalam konten tulisan. 

Nah untuk menampilkan untuk menampilkan kode 'embed' dari halaman CodePen, Anda harus meng 'embed'nya langsung ke dalam halaman postingan dengan opsi HTML ini. 

Contoh tampilan kode embed:

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="sufyan-yaan" data-slug-hash="QWKYMro" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="QWKYMro">

  <span>See the Pen <a href="https://codepen.io/sufyan-yaan/pen/QWKYMro">

  QWKYMro</a> by Sufyan Yaan (<a href="https://codepen.io/sufyan-yaan">@sufyan-yaan</a>)

  on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Agar halaman menjadi lebih tinggi, Anda bisa merobah nilai atau angka yang saya merahkan menjadi lebih tinggi, saya menggantinya dengan nilai 565px.

Contoh tampilan visualnya di halaman postingan setelah di publikasikan:

See the Pen QWKYMro by Sufyan Yaan (@sufyan-yaan) on CodePen.

Saya masih belum punya akun CodePen jadi giliran hanya main main dengan Codepen milik dua Admin blog ini buat belajar dan menulis kode kode HTML buat desain kecil kecilan.

Demikian caranya menerapkan embed ke dalam HTML blogger blogspot.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: