Cara Mudah Pasang Editor Script keren di Blogger dengan Codepen

Assalamualaikum warahmatullahi wabarakaatuh, Alhamdulillah segala puji bagi Allah ta'ala yang telah melimpahkan nikmat dan rezekinya sehingga admin dapat kembali hadir memberikan tutorial yang InsyaAllah bermanfaat bagi kita semua.

Kali ini admin ingin membagikan tutorial cara emmbed syntax highlighter dengan codepen di blog agan-agan. Syntax highligter berguna untuk dapat membedakan tulisan biasa dan script coding, selain itu syntax highligter juga memudahkan manusia membaca script, karena script diberi warna dan tanda tertentu.

Apa Itu Codepen ?

Codepen adalah script editor online, anda dapat membuat dan mengedit halaman web secara online dengan codepen editor. Selain itu, codepen juga menyediakan preview instan dari kode yang kita buat. Apa yang kita ketikkan akan langsung ditampilkan di layar preview codepen.Di codepen anda dapat membuat banyak project dan dishare untuk dilihat oleh jutaan manusia di seluruh manusia. Bagi, para developer pastinya codepen dapat menjadi referensi instan untuk mencari ide kreatif dari contoh projek yang ada.

Selain itu anda dapat menempelkan codepen di blog atau situs-situs milik anda. Hasilnya sangat keren. Syntax highlighter yang dibuat dengan codepen memiliki 3 tab yang juga memisahkan script html, css dan javascript yaitu tab html, tab css, dan tab javascript. Selain itu, yang paling menarik ada preview instan yang menampilkan hasil dari script halaman yang dibuat.

Cara Emmbed Codepen di Blogger

Simple dan sangat mudah, anda hanya perlu mempraktekkan beberapa tahap di bawah ini

• Buka situs codepen disini https://codepen.io/, lakukan pendaftaran. Anda dapat menggunakan akun facebook, twitter, atau email

• Setelah berhasil mendaftar, anda akan diarahkan ke halaman seperti di bawah ini. Isi kolom html dengan script html, kolom css dengan script css, dan kolom javascript dengan kode javascript.

• Klik Save
• Lalu pilih emmbed di sebelah kanan bagian bawah.
• anda dapat menggunakan drag to resize untuk menyesuaikan ukuran box script di blogger anda
• copy script di bawahnya, ada 3 pilihan script wordpress, iframe, dan HTML, pilih HTML untuk diemmbed di blogger

• Masuk ke blogger, buat entri baru pilih tab html dan pastekan scipt tadi. publikasikan

• lihat hasilnya seperti gambar di bawah ini

Selamat anda baru saja berhasil menempelkan codepen pada blog anda. Mudah sekali bukan ?. tampilannya keren dan makin membuat tampilan blog anda semakin kece. Demikian tutorial emmbed codepen kali ini, selamat mencoba para developer!!