Cara membuat Kotak Kode Html CSS & JavaScript di Postingan Blog

Halo..sob kembali lagi dengan Heripedia, Banyak orang yang request Cara membuat Kotak Kode Html CSS & JavaScript di Postingan Blog ? Nah kali ini saya berikan untuk kalian. Kotak Kode biasanya digunakan untuk menyisipkan kode - kode program seperti Html, JavaScript ,CSS ataupun kode lainnya. Penggunaan Kotak ini bertujuan agar kode - kode yang ada di postingan blog tersusun rapi. Ada banyak cara yang digunakan untuk membuat kotak kode ini yang terpenting ialah bisa diaplikasikan dihtml.

Beberapa kode tersebut memang sangat simpel namun kalian harus teliti saat penerapan dihtml. Terkadang banyak publisher menyepelekan hal tersebut dan yang terjadi box kode tersebut tak bisa digunakan. Sebenarnya ada solusi lain jika kalian tidak ingin menggunakan kotak kode ini. Bisa kalian gunakan tanda kutip (") yang terdapat di bagian kanan atas saat kalian menulis artikel.

Baca juga : Cara memasang Meta Tag theme color di blogspot

Cara membuat Kotak Kode Html CSS & JavaScript di Postingan Blog

Penggunaan tanda kutip tersebut cukup membantu agar kode yang akan kalian masukan kedalam postingan tersusun rapi. Namun jika kalian ingin tampilan kode lebih rapi dan keren bisa gunakan Script yang akan saya bagikan dibawah ini.

Kode Pertama

<textarea cols="70" rows="5">Kode yang akan kalian sisipkan</textarea>

Hasilnya

kode yang akan kalian sisipkan

Kode Kedua

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

Hasilnya

Kode Script Anda Disini

Kode Ketiga

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

Hasilnya

Kode Script Anda Disini

Kode Keempat

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

Hasilnya

Kode Script Anda Disini

Nah itulah beberapa kode untuk membuat Box kotak Kode Html, JavaScript dan CSS didalam postingan blog.

Cara memasang Script box/Kotak kode di postingan

1. Langkah pertama kalian buka draft blogger terus buat postingan baru/entri baru

2. Selanjutnya kalian ganti bagian compose ke mode html (karena kalian akan memasang Script html)

3. Langkah berikutnya pastekan kode yang sudah disiapkan tadi dibagian yang kalian inginkan

4. Setelah kalian pasang atau paste kode kotak box tadi coba kalian ganti ke mode Compose lagi apabila kotak kode sudah ada berarti berhasil. Nah kotak kode belum ada mungkin kalian salah memasang atau biasanya ada kode yang kalian belum tulis misalkan <br />. Terkadang kalian lupa memberi kode penutup pada script yang akan kalian pasang

5. Semoga berhasil

Nah itulah sedikit Tips cara membuat Kotak kode html JS dan CSS dipostingnya blog dengan mudah . Semoga artikel ini bermanfaat bagi kalian semua. Terimakasih

Share this post