EDITBLOGTEMA

Sebenarnya bukan hanya hanya codepen, hampir setiap halaman dengan topik pembelajaran koding pasti memiliki halaman editor HTML dimana kita bisa menulis kode kode dan bereksprimen (juga mengekspresikan) buah tulisan kita dalam bentuk visual bahasa bahasa mark up ini.  Namun di laman codepen tidak semata menulis atau 'pen' karya kita,  kita juga dapat melihat, mempelajari dan bahkan menerapkan hasil tulisan orang lain misalnya untuk desain halaman web kita bukan? Contohnya disini saya tertarik mempelajari model model navbar atau menu navigasi yang dapat diterapkan ke dalam template blogger blogspot, nah saya menemukan model yang menurut saya simpel dan tidak ribet jika diterapkan untuk blogger: See the Pen bootstrap 4 navbar by Piyush ( @piyushpd ) on CodePen . Penulisnya Piyush, tekniknya menggunakan bootstrap, oke oke saja sih, saya tertarik dengan model sederhana namun dapat di modifikasi mengikuti selera kita.  Adapaun keuntungan mencomot sumber kode kode yang t

1. Code pen CodePen adalah komunitas online untuk menguji dan menampilkan cuplikan kode HTML, CSS, dan JavaScript buatan pengguna. Codepen berfungsi sebagai editor kode online dan lingkungan pembelajaran sumber terbuka, tempat pengembang dapat membuat cuplikan kode, yang disebut "pena," dan mengujinya. Contoh paling praktis bagi saya sebagai blogger adalah ketika membuat top navigasi menu blog responsif berikut, yang telah banyak saya terapkan pada template template bawaan (default ) blogger: See the Pen topnav responsif plus menu dropdown by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Kalian dapat melihat sumber kode HTML dengan mengklik tombol HTML, melihat sumber kode Javascript dengan menyentuh tombol JS, dan melihat sumber kode CSS dengan mengklik tombol CSS.  Lalu mengklik tombol 'Result' untuk melihat hasil visualnya pada browser. Berikut adalah rancangan saya untuk membuat halaman homepage blog mirip Google Pencarian: DEMO 2. JSitor Sama seperti

S aya baru terpikir perihal judul di atas, padahal sudah mengutak atik codepen milik admin dalam beberapa bulan terakhir. Padahal Editor HTML Codepen memiliki antar-muka yang sangat user friendly, simpel dan mudah di fahami. 1 . Langkah pertama silahkan masuk ke CodPen  terlebih dahulu. Jika telah masuk Anda akan mengunjungi halaman awal codepen dalam bentuk tampilan antarmuka editorial HTML: Silahkan klik 'Pen' yang dilingkari merah, anggaplah itu adalah rancangan atau desain yang akan kita buat menggunakan bahasa pemrograman web dan akan kita tampilkan pada halaman blog. 2 . Setelah lembar kerja berbentuk blanko kosong terbuka kita dapat menuliskan perintah perintah atau pengaturan HTML kedalam blanko tersebut, seperti di tunjukan pada gambar berikut: Contoh di atas adalah penulisan yang telah jadi yang saya buat untuk menampilkan sumber kode sekaligus demo pada tutorial membuat menu sidebar yang telah saya posting di halaman blog ini.  3 . Untuk membuatnya tampil alami di ha