Halo sobat jagoan. Dikesempatan kali ini admin akan menunjukan cara memasang codepen didalam postingan blog kita. Terkadang ini dibutuhkan bagi sebagian blogger indonesia untuk bisa membuat preview dari script yang akan ditampilkan lewat postingan blognya. Jika dilakukan secara manual sebenarnya bisa dan sah saja dilakukan namun hal itu akan beresiko sangat berat bagi blog. Dan kekurangan nya banyak sekali. Salah satunya adalah kita jarang bisa memproses kode javascript didalam postingan kita. Untuk itulah kita butuh suatu iframe atau wadah dimana, kita bisa memunculkan keseluruhan fungsi dan hasil. Kemudian ditampilkan didalam artikel kita.
Nah wadah yang bisa menampung kode antara html, css dan javascipt ini ialah codepen. Didalam codepen tak hanya menyimpan project atas kode yang telah kita tulis maupun buat. Disini result atau hasil bisa langsung ditampilkan. Inilah kelebihannya maka dari itu. Tak jarang blogger blogger besar yang memiliki trik atau sebuah kode khusus menampilkannya lewat ini. Terdapat fungsi lain yakni kita bisa secara mudah melihat apa yang terjadi atas kode kode yang telah dirangkai. Ini memudahkan para pengunjung untuk mengerti mengenai apa yang mereka cari saat ini.
Cara ambil kode embed(sematan) codepen
Sebenarnya caranya sangat mudah sekali. Codepen sendiri telah menyediakan alternatif berupa embed kode bagi siapapun yang ingin meletakan hasil kodenya kedalam platform blog yang mereka punya. Bagi kalian yang bingung silahkan ikuti cara berikut ini:
1. Silahkan daftar codepen terlebih dahulu jika kalian telah memiliki akun. Maka lanjut pada langkah kedua.
2. Silahkan buat pen baru/ newpen dengan mengklik gambar icon disebelah pojok kanan atas
3. Oke disana terdapat 3 kolom yakni HTML,CSS dan javascript. silahkan kalian inputkan kode kalian sesuai dengan role pemrogramannya. Jika sudah jangan lupa menekan tombol SAVE. Kalau kalian ingin memberikan nama project nya perhatikan tanda panah dibawah.
4. Selanjutnya perhatikan sebelah kanan bawah terdapat tombol embed. Klik tombol tersebut. Lalu atur lah sesuai keinginan anda. pada bagian theme (untuk pengaturan tema warna background pada embed codepen anda. anda bisa memilih hitam atau putih). Default state adalah iframe codepen akan di load saat di klik. Sedangkan editable state adalah untuk kalian member yang menggunakan fitur premium.
5. Oke selanjutnya scroll kebawah dan anda akan menemukan kodenya.Disana terdapat 4 macam kode yakni HTML, Iframe, Prefil dan wordpress shortcode. Masing masing disedikan untuk fungsi dan kegunaan dari masing masing. Kita akan menjelaskanya nanti setelah kode tersebut dipasang didalam artikel yang akan kita posting.
6. Oke sampai disini kita telah berhasil mendapatkan kode embed yang nantinya akan kita sematkan kedalam postingan kita.
Langkah memasang codepen kedalam postingan artikel Blogger
Sip pada langkah selanjutnya kita mulai memasang codepen embed.
- Silahkan masuk kedalam dashboard blogger anda.
- Buka bagian postingan.
- Silahkan beri tanda dahulu posisi yang akan anda letakan embed codepen ini dengan tulisan. Contohnya seperti gambar dibawah
- Jika sudah pindahkan mode Tampilan menulis menjadi mode tampilan HTML
- Jika sudah copy codepen embed paste di tulisan yang sudah kita tandai tadi. Setelah itu balik lagi ke mode Tampilan menulis dan lihat hasilnya
Catatan :
Untuk blogger maka codepen embed yang harus kalian pilih adalah IFRAME
HASIL :
Langkah memasang codepen kedalam postingan artikel Di WordPress
Oke untuk tutorial selanjutnya kita akan memasang embed codepen kedalam postingan di wordpress.
- Login ke wordpress anda masing masing
- Silahkan klik tanda tambah disudut kiri atas
- cari HTML khusus lalu klik
- Silahkan pastekan codepen embed anda
- Jika sudah klik tombol perbarui postingan dan jangan lupa untuk lihat hasilnya
HASIL :
Catatan:
Untuk pengguna wordpress kalian bisa memilih yang mana saja dari embed code yang telah disediakan oleh codepen. Karena semuanya bisa dintegrasikan dengan wordpress
Demikianlah cara memasang codepen di wordpress dan blogger semoga artikel ini dapat membantu teman teman semua.
