Cara menampilkan codepen.io di blog

Bagaimana cara menampilkan codepen.io di blog.

Nah kali ini banyak mungkin yang minat dengan trik ini. Karena embbed codepen hanya di peruntukkan user premium. Lalu bagaimana cara menampilkan kode kita yang sudah di edit dari codepen.io ke blog kita ?.
Mari kita mulai.

1. Mula mula kita harus daftar di codepen.io dulu, lalu membuat atau mengedit sesuatu kode (Html css js) di codepen.io dan bila selesai di save.

2. Lihat bagian URL address browser anda. Contohnya seperti ini -> http://codepen.io/msvbg/pen/sGIof
URL codepen.io kita seperti berikut formatnya -> https://codepen.io/USERNAME/pen/KODE UNIK

Lalu ubah url anda seperti ini -> http://codepen.io/USERNAME/embed/KODE_UNIK?height=TINGGI&slug-hash=KODE_UNIK&default-tab=TARGET&host=http%3A%2F%2Fcodepen.io

 Misalkan: 
1. Menampilkan Result Sebagai Tab Utama
http://codepen.io/msvbg/embed/sGIof?height=300&slug-hash=sGIof&default-tab=result&host=http%3A%2F%2Fcodepen.io

2. Menampilkan HTML Sebagai Tab Utama
 http://codepen.io/msvbg/embed/sGIof?height=300&slug-hash=sGIof&default-tab=html&host=http%3A%2F%2Fcodepen.io

3. Menampilkan CSS Sebagai Tab Utama.
http://codepen.io/msvbg/embed/sGIof?height=300&slug-hash=sGIof&default-tab=css&host=http%3A%2F%2Fcodepen.io

4. Menampilkan JAVASCRIPT Sebagai Tab Utama.
http://codepen.io/msvbg/embed/sGIof?height=300&slug-hash=sGIof&default-tab=javascript&host=http%3A%2F%2Fcodepen.io

5. Menampilkan Dengan Tingi 500px
http://codepen.io/msvbg/embed/sGIof?height=500&slug-hash=sGIof&default-tab=result&host=http%3A%2F%2Fcodepen.io

Deskripsi

USERNAME: msvbg
KODE_UNIK: sGIof
TINGGI: 300 (dihitung dalam pixels/px)
TARGET: Tab yang akan ditampilkan diawal atau default.

Pertanyaan: Kenapa tidak menggunakan HTTPS protokol ?. Karena beberapa website atau apalah itu yang tidak memiliki syarat shah di rules codepen.io maka iframe anda tidak akan tampil di website anda. Namun bila anda menggunakan HTTP coba aja ubah ke HTTPS kalo bisa ya alhamdulillah.

Selesai. Semoga artikel ini membantu permasalahan anda atau keingintahuan anda. Bantu share yah....

Peringatan: bila mengcopy artikel yang ada di website ini anda harus memberikan url source ke url source artikel kami. Karena kami sudah mendaftarkan blog ini ke DMCA dan COPYSCAPE. Bila anda menggunakan adsense siap-siap saja akan saya dropdown blog anda, dan di banned dari adsense. Selamat terbanned.

0 Response to "Cara menampilkan codepen.io di blog"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...