fbpx

Order Now - Dedicated Server High Performance

Panduan

Cara Menggunakan Codepen Pada Blogger Secara Mudah dan Benar

Wiliam

Cara menggunakan codepen pada blogger kini dilakukan dengan menempelkan kode edit html. Saat ini banyak dari kalangan para pengguna blog membahas topik seperti pemrograman. Sehingga dengan menggunakan cara menggunakan codepen pada blogger ini dirasa sangat menarik. 

Untuk menerapkan cara menggunakan codepen pada blogger ini membutuhkan skill atau keahlian di bidang pemrograman. Sebenarnya semua kalangan masyarakat tidak perlu belajar secara mendalam untuk bisa menerapkan cara tersebut. 

Ada satu hal yang harus dipelajari dan pengenalan secara dasar pada bahasa pemrograman. Beberapa bahasa yang harus diketahui oleh para pemula adalah html, css dan juga javascript. 

Pada kesempatan kali ini akan dibahas secara lebih jelas mengenai cara menggunakan code in pada blogger. Sedangkan untuk bizzie yang penasaran mengenai beberapa cara menggunakan codepen pada blogger tersebut bisa langsung saja simak penjelasan dibawah ini. 

Pengertian Cara Menggunakan Codepen Pada Blogger

Codepan merupakan salah satu komunitas yang dilakukan secara online dan dipergunakan untuk menampilan beberapa kode. Untuk beberapa kode yang ditampilkan adalah HTML, CSS dan juga JavaScript. 

Pada saat menggunakan codepen ada satu fungsi yang didapatkan. Untuk satu fungsi yang didapatkan adalah dapat melakukan editor dengan menggunakan kode berbasis web online. 

Macam-Macam Cara Menggunakan Codepen Pada Blogger

Tentunya untuk membuat akun codepen harus mengikuti beberapa cara atau langkah terlebih dahulu. Untuk beberapa cara menggunakan codepen pada blogger yang bisa dipergunakan adalah:

  • Langkah pertama yang harus dilakukan adalah mengunjungi alamat situs dari Codepen. 
  • Ketika sudah berada di halaman utama bisa langsung saja memberikan klik pada “sign up”. 
  • Setelah memberikan klik pada menu tersebut bisa langsung dialihkan ke halaman lain. 
  • Berikan centang pada captcha yang sudah tersedia. Selain itu, juga berikan lagi klik pada setiap gambar captcha untuk proses verifikasi. 
  • Selanjutnya bisa langsung saja memberikan klik pada menu “log in”. 

Pada saat proses sign up pada codepen ini bisa dilakukan dengan menggunakan beberapa media sosial. Untuk beberapa media sosial yang bisa dipergunakan adalah twitter, facebook dan juga github. 

Cara Menggunakan Codepan Pada Blogger Dengan Postingan

Setelah membuat akun codepen, maka untuk langkah selanjutnya adalah proses pemasangan. Masih sama seperti yang sebelumnya bahwa ada beberapa langkah atau cara menggunakan codepen pada blogger yang bisa dilakukan pada  kali ini. Untuk cara yang bisa dilakukan adalah:

  • Pada saat di halaman utama bisa langsung saja membuat pen dengan memberikan klik pada menu “profil” dan “new pen”. 
  • Setelah itu, akan langsung diarahkan pada halaman editor kode. Ketika di halaman editor kode akan diberikan tiga kolom yang sangat penting. Untuk ketiga kolom kode tersebut adalah HTML, CSS dan JavaScript. 
  • Selanjutnya bisa langsung memasukkan kode pemrograman pada kolom code editor. Pada saat menggunakan kode harus disesuaikan lagi dengan kode tersebut. 
  • Ketika proses memasukkan kode selesai sudah bisa langsung memberikan klik pada menu “save”. Pada saat memberikan klik “save” maka akan otomatis muncul tombol embed. Biasanya akan muncul di bagian bawah pojok kanan. 
  • Pilih menu “tombol embed” dan otomatis akan muncul form “embed this pen”. Di menu tersebut juga akan muncul halaman theme. Untuk halaman theme ini mempunyai fungsi untuk mengatur tema warna background. 

Theme default merupakan salah satu inframe codepen yang akan dibuat pada load ketika sudah memberikan klik. Sedangkan menu “make code editable” merupakan salah satu untuk para pengguna untuk menggunakan fitur premium. 

  • Perhatikan empat kode yang dapat dijadikan untuk melakukan copy kode. Untuk empat kode tersebut adalah HMTL, Wordpres Shorcode, Preffil Embed dan juga Iframe. 

Pada masing-masing kode tersebut akan diberikan pilihan dan mempunyai fungsi masing-masing. Untuk proses pemasangan codepen membutuhkan iframe supaya benar-benar berhasil. 

  • Untuk langkah yang paling akhir adalah melakukan copy code dan pastikan  bahwa postingan blog sudah benar-benar ditempatkan. 

Baca Juga : Apa itu Blogspot (Blogger)? Pengertian dan Fungsinya

Cara Menggunakan Codepen Pada Blogger Dengan Memasang Postingan 

Setelah menggunakan cara sebelumnya, bisa melanjutkan ke tahap selanjutnya. Tahap selanjutnya yaitu memasang codepen pada postingan blogger. Ada beberapa cara yang bisa dipergunakan untuk melakukan pemasangan codepen postingan blogger. Untuk beberapa cara menggunakan codepen pada blogger dengan memasang postingan adalah:

  • Cara yang pertama yaitu log in terlebih dahulu pada situs blogger. 
  • Ketika sudah berada di menu utama bisa langsung membuat halaman atau postingan baru. 
  • Pada halaman postingan tersebut bisa langsung memilih “tampilan html”. Satu hal yang harus diingat untuk pilihan menu tersebut bukan menjadi tampilan penulisan. 
  • Setelah berada di halaman tersebut bisa langsung meletakkan pada kode yang sudah disalin dari codepen. Untuk beberapa codepen ini akan langsung ditampilkan pada bagian postingan. 
  • Di saat sudah meletakkan kode, maka bisa langsung memindahkan ke tampilan penulisan dan juga tampilan HTML. 
  • Pada saat sudah benar-benar yakin bisa langsung klik pada menu “publikasi”. 

Dengan melakukan pemasangan codepen pada postingan blogger ini bisa berguna untuk memudahkan dalam melihat hasil kode. Selain itu, codepen ini juga memberikan alternatif seperti embed code bagia siapa saja yang telah memasukkan kode tersebut. 

Menariknya lagi dengan menggunakan beberapa cara menggunakan codepen pada blogger di atas bisa memberikan tampilan yang blog yang menarik dan lebih ciamik. Bahkan untuk para pengunjung blog juga tidak merasa monoton maupun bosan. 

Sekian penjelasan mengenai beberapa cara menggunakan codepen pada blogger. Besar harapan dengan penjelasan diatas membantu bizzie untuk tetap bisa berkarya pada saat mengelola blogger. 

Baca Juga :Fungsi dan Cara Menggunakan Google Trends Bagi Blogger

Baca Juga