Cara Membuat Kotak Kode Script HTML/Javascript di Dalam Postingan Blogger

Cara membuat kotak kode script HTML/Javascript di dalam postingan blog itu sebenarnya mudah asalkan kita tahu caranya dan bagaimana membuatnya, untuk itulah artikel ini dibuat.

Di dalam menulis sebuah artikel tentang tutorial blogger, biasanya penulis membagikan sebuah script kode HTML atau Javascript. Namun untuk menuliskan kode-kode script itu tidak bisa asal tulis saja tapi perlu perhatian khusus dalam penulisannya agar kode yang telah dibagikan tidak terjadi error nantinya pada saat digunakan.

Untuk mengatasi masalah di atas dan untuk memudahkan penulisan kode-kode script HTML atau Javascript di dalam postingan blog, biasanya seorang blogger perlu membuat sebuah kotak kode khusus untuk script HTML atau Javasript.

Dengan menggunakan kotak kode khusus script HTML atau Javascript tersebut penulisan kode akan terlihat lebih rapih, enak di lihat dan mudah dibaca. Lantas bagaimana cara membuatnya ? Cukup mudah koq, silahkan anda lanjutkan membaca artikel dibawah ini.

Cara Membuat Kotak Kode HTML dalam Postingan Blog

1. Login ke Blogger
2. Buat Entri Baru
3. Pilih mode HTML

4. Masukkan kode di bawah ini

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>

5. Klik mode Compose, untuk melihat hasilnya.

Maka hasilnya seperti  di bawah ini :

Kode Script Anda Di Sini

.
Untuk style-style lainnya dari kotak kode Script HTML/Javascript anda bisa gunakan kode-kode di bawah ini.
Style 1

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
Masukkan Kode Script HTML/Javascript anda disini
</div>

Style 2

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;">
Masukan kode script HTML/Javascript atau tulisan anda disini
</div>

Style 3

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: auto; text-align: left;">
Silahkan masukan kode script/tulisan anda disini
</div>

Style 4

<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>

Style 5

<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>

Style 6

<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>

Style 7

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

Style 8

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

Style 9

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">
Kode Script Anda Disini
</div>

Style 10

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>

Bonus 1

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>

Bonus 2

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>

Bonus 3

<div style="background-color: #eaeaea; border: 3px double #1780dd; padding: 10px; text-align: left;">
Kode Script Anda Di Sini
</div>

Demikianlah tutorial "Cara Membuat Kotak Kode Script HTML/Javascript di Dalam Postingan Blog". Terima kasih berkunjung dan telah meluangkan waktunya untuk membaca artikel yang singkat ini. Semoga setelah membaca tulisaan ini dapat menambah ilmu dan wawasan anda.
Salam sukses untuk kita semua

Silahkan berkomentar jika ada yang ingin ditanyakan.