MENYISIPKEN Kodepen Ke Blogger


Blogger atau Blogspot masih menjadi platform blogging yang populer di Indonesia. Banyak pengembang web, desainer UI/UX, dan hobiis koding ingin membagikan karya mereka melalui blog. Salah satu cara terbaik menampilkan karya kode adalah dengan menyematkan (embed) hasil dari CodePen.io. Tapi, bagaimana caranya?

Artikel ini akan membahas secara lengkap, teknis, dan SEO-friendly tentang cara menyisipkan CodePen ke Blogger, termasuk langkah demi langkah, tips optimalisasi, dan kesalahan umum yang perlu dihindari.


cara menyisipkan CodePen ke Blogger,cara embed CodePen di Blogspot,menyematkan CodePen di Blogger,cara menampilkan hasil CodePen di Blogger,tutorial embed CodePen Blogspot,cara menambahkan project CodePen ke blog,embed HTML CSS JS dari CodePen ke Blogger, menyisipkan iframe CodePen ke blog, menampilkan demo coding di blogspot, codepen embed di blog pribadi,blog pemrograman dengan CodePen,cara menulis artikel coding interaktif di Blogger

Apa Itu CodePen.io?

CodePen.io adalah platform online yang memungkinkan pengembang dan desainer web untuk menulis, mengedit, dan melihat hasil HTML, CSS, dan JavaScript secara langsung di browser. CodePen sangat populer untuk:

  • Mencoba snippet kode cepat

  • Membuat eksperimen UI/UX

  • Berbagi demo dengan komunitas

Setiap proyek di CodePen disebut sebagai Pen, dan dapat dibagikan atau disematkan ke situs web lain — termasuk Blogger.

Mengapa Perlu Menyisipkan CodePen ke Blogger?

Menyisipkan Pen dari CodePen ke Blogger memberikan banyak keuntungan:

Visualisasi Langsung

Pengunjung blog dapat langsung melihat dan berinteraksi dengan kode yang kamu tampilkan, tanpa harus menyalin atau membuka jendela baru.

Portofolio Profesional

Untuk programmer atau UI/UX designer, menyematkan Pen ke blog adalah cara menunjukkan keterampilan secara nyata.

Pengajaran & Tutorial Lebih Menarik

Jika kamu membuat blog tutorial HTML, CSS, atau JavaScript, menyisipkan Pen akan meningkatkan pemahaman pembaca.

Persiapan Awal Sebelum Embed CodePen ke Blogger

Sebelum mulai menyematkan, pastikan kamu memiliki:

  • Akun CodePen (gratis atau berbayar)

  • Akun Blogger yang aktif

  • Akses ke dashboard Blogger dan editor HTML

Juga, siapkan Pen yang sudah kamu buat di CodePen. Kamu bisa membuat satu dari nol atau mengambil dari pen lain milikmu.

Langkah-langkah ? memasang CodePen ke Blogger

Berikut adalah panduan langkah demi langkah untuk menyisipkan Pen dari CodePen ke dalam blog Blogger:

Buka Pen di CodePen

  1. Login ke akun CodePen kamu.

  2. Klik salah satu Pen yang ingin disematkan.

  3. Di kanan bawah, cari dan klik ikon </> atau tombol Embed.

Salin Kode Embed Codepen.Io

Setelah klik tombol Embed:

  • Akan muncul popup berisi pilihan tampilan (theme light/dark, tab yang ditampilkan, tinggi frame, dsb).

  • Salin seluruh kode <p> dan <script> yang ditampilkan.

Contoh kode embed:

<p class="codepen" data-height="400" data-theme-id="light" data-default-tab="html,result" data-user="username" data-slug-hash="hash" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Judul Pen">
  <span>See the Pen <a href="https://codepen.io/username/pen/hash">Judul Pen</a> by Username (<a href="https://codepen.io/username">@username</a>) on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Masuk ke Blogger

  1. Buka https://blogger.com dan login.

  2. Pilih blog tempat kamu ingin menampilkan CodePen.

  3. Klik New Post atau edit postingan yang sudah ada.

Tempelkan Kode Embed Kodepen di Mode HTML

  • Ubah editor menjadi HTML view (bukan Compose).

  • Tempelkan kode embed dari CodePen pada posisi yang kamu inginkan.

  • Simpan postingan.

Pratinjau dan Publikasikan

Setelah kode ditambahkan:

  • Klik Preview untuk melihat apakah Pen sudah muncul.

  • Jika semua terlihat baik, klik Publish.

Tips Tambahan agar Kodepen Tampil Maksimal di Blogger

Gunakan Ukuran yang Proporsional

Sesuaikan data-height pada tag <p> agar tidak terlalu kecil atau terlalu besar di tampilan mobile dan desktop.

Sisipkan Script ei.js Hanya Sekali

Jika kamu menyisipkan beberapa Pen dalam satu halaman, cukup masukkan tag <script src="...ei.js"> sekali saja, di bagian paling bawah sebelum </body> (jika menggunakan template custom).

Perhatikan Kecepatan Loading

Semakin banyak Pen yang kamu embed, semakin berat halaman blog kamu. Gunakan secukupnya.

Gunakan Tema yang Sesuai

CodePen menyediakan light theme dan dark theme untuk penampilan embed. Pilih yang cocok dengan tema blog kamu.

Cara Menyisipkan Banyak CodePen dalam Satu Postingan

Jika kamu ingin menambahkan beberapa Pen:

  • Tempelkan banyak tag <p class="codepen"...> di tempat yang diinginkan.

  • Tapi, hanya satu tag <script src="...ei.js"> yang perlu kamu masukkan (di bagian bawah halaman).

Contoh:

<p class="codepen" data-slug-hash="abc123" ...></p>
<p class="codepen" data-slug-hash="xyz789" ...></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Kesalahan Umum Saat Menyisipkan CodePen ke Blogger

Menempelkan Kode di Mode Compose

Solusi: Pastikan kamu dalam mode HTML saat menempelkan embed.

Lupa Menyertakan <script>

Solusi: Jangan hapus baris <script async src="...ei.js"> karena ini yang memuat Pen secara dinamis.

Embed Tidak Tampil di Pratinjau

Solusi:

  • Cek koneksi internet

  • Pastikan JavaScript di browser tidak diblokir

  • Tunggu beberapa detik setelah preview

Tidak Responsif di Mobile

Solusi: Gunakan gaya CSS tambahan di template kamu untuk menjadikan iframe CodePen responsif.

Alternatif Cara: Embed via iframe (Opsional)

CodePen juga memungkinkan kamu menyematkan pen menggunakan iframe, meskipun ini bukan metode yang direkomendasikan (karena tidak interaktif penuh).

Contoh:

<iframe height="400" style="width: 100%;" scrolling="no" title="Pen Title" src="https://codepen.io/username/embed/slughash?default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

Optimasi SEO untuk Postingan CodePen di Blogger

Agar postinganmu tetap SEO-friendly:

  • Tambahkan deskripsi di atas dan di bawah Pen (jangan hanya menempelkan embed).

  • Gunakan heading (H2, H3) yang tepat.

  • Tambahkan kata kunci utama dan LSI (Latent Semantic Indexing).

  • Gunakan tag gambar jika menyisipkan preview atau cuplikan.

Penutup: Apakah Menyisipkan CodePen Aman untuk Blogger?

Ya, menyematkan Pen dari CodePen sangat aman karena:

  • CodePen menggunakan CDN dan file yang sudah di-minify.

  • Script yang dipanggil adalah script resmi milik CodePen.

  • Tidak akan mengganggu struktur blog selama dimasukkan di mode HTML.

FAQ (Pertanyaan yang Sering Ditanyakan)

Apakah saya harus punya akun CodePen?
Tidak harus. Tapi untuk membuat dan menyematkan pen milik sendiri, kamu harus login.

Apakah bisa menyematkan Pen milik orang lain?
Bisa, selama Pen tersebut tidak diatur menjadi private.

Kenapa Pen tidak muncul di postingan?
Biasanya karena script ei.js tidak dimuat atau ditempel di mode Compose.


Artikel Terkait

0 Komentar