Membuat kotak kode di dalam postingan. Pernahkah temen-temen saat berkunjung ke sebuah blog
dan di blog tersebut ada kotak / tempat yang di gunakan untuk menampilkan
kode-kode script pemrograman? Mungkin untuk temen-temen yang bergelut dalam
dunia pemrograman sudah tidak asing lagi dengan “kotak kode di dalam postingan”
tersebut. Bisasnya blog dengan topik pemrograman selalu menggunakan kotak kode untuk
menampilkan kode-kode yang bertujuan agar syntak/kode dapat lebih memudah untuk
di pahami. Lalu bagaimana cara membuat kotak kode di dalam postingan tersebut?
Ok langsung di simak ya .
Pada kesempatan kali ini NH Tutorials
ingin berbagi tips cara membuat kotak kode HTML di dalam postingan blog.
Pembutan kotak kode ini bertujuan untuk menampilkan kode-kode seperti HTML,
CSS, PHP, Javascript, Syntak SQL dan lain sebagainya. Agar lebih kelihatan
rapih, mudah di baca dan lebih mudah di pahami tentunya.
Langkah-langkah nya pun cukup simpel dan mudah sekali.
Login ke dashboard blogger, setelah
masuk Pilih new entry atau buat postingan baru, pilih pada menu HTML bukan pada
menu Compose. Masukan kode berikut pada menu HTML.
<div style="border: 1px solid #eee; height: auto; padding: 10px; width: auto;">
<code>
Masukan kode anda disini..
</code>
</div>
<code>
Masukan kode anda disini..
</code>
</div>
Setalah kode di atas dimasukan pergi
ke menu Compose. Maka akan menjadi seperti gambar di bawah ini. Hapus tulisan “Masukan
kode anda” dengan kode/syntak yang ingin temen-temen masukan.
Done. Cukup mudah sekali bukan. Sekarang
kode-kode yang akan di tampilkan di postingan blog akan kelihatan lebih rapih
dan tertata.
Jika kita perhatikan lagi sepertinya
masih ada yang kurang. Kira-kira apa yang masih kurang ? Scroll, iya. Kode di
atas jika di tampilkan masih belum ada efek scroll untuk menggeser kode. Sampai
di sini silahkan temen-temen apakah ingin menambahkan efek scroll atau tidak. Jika
kode yang ingin di tampilkan tidak terlalu banyak efek scroll tidak perlu di
buat juga tidak apa-apa. Lalu bagaimana jika kode yang ingin di tampilkan ada
puluhan baris atau bahkan ratusan baris. Di sini penggunaan scroll pada kotak
kode sebaiknya di pasang. Agar kode-kode yang di tampilkan tidak memakan
halaman postingan. Cara nya untuk membuat scroll di postigan pun sangat mudah. Tinggal
di tambah saja atribut overflow: auto
dan setting atur lebar height di dalam tag div di atas. Bisa di perhatikan
pada kode di bawah. Kode di bawah ini untuk menambahkan scroll pada kotak kode
di dalam postingan. Jadi sebanyak apapun kode yang ingin di tampilkan maka
tidak akan memakan ruang pada halaman postingan, karena lebar height nya sudah
di atur dan bisa digeser menggunakan scroll.
<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: auto;">
<code>
Masukan kode anda disini..
</code>
</div>
<code>
Masukan kode anda disini..
</code>
</div>
Di atas adalah cara memebuat kotak kode di postingan di
sertai scroll. Bila kita perhatikan lagi sepertinya masih ada yang kurang nih..
hehe. Efek warna background pada kotak kode di atas belum kita setiing. Jika
temen-temen ingin membuat warna latar belakang nya tinggal tambahkan saja
atribut style="background-color:pink;"
dalam tag div untuk membuat latar
warna belakang. Atur warna sesuai keinginan dengan mengganti jenis warna nya. Untuk
contoh ini saya menggunakan warna orange. untuk lebih jelas nya bisa di
perhatikan pada kode dan hasilnya di bawah.
<div style="background-color: #ffd15e; border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width: auto;">
<code>
Masukan kode anda disini...
</code>
</div>
<code>
Masukan kode anda disini...
</code>
</div>
Bagaimana teman-teman? Sangat mudah sekali bukan. Untuk artikel
kali ini mungkin cukup sampai disini dulu. Silahkan kode di atas jika menurut
teman-teman masih kurang bisa di kembangkan lagi. Kode di atas hanya sebagai
contoh dasarnya saja. Terimakasih sudah berkunjung dan membaca. 😊
