Cara Membuat Kotak Kode dengan CSS di Blogger




Kotak script atau yang biasa para blogger sebut yaitu text box area adalah sebuah kotak yang di dalam nya dapat dimasukkan tulisan atau script code baik yang biasa maupun dengan fungsi scroll agar terlihat rapi dan teratur pada sebuah postingan di blogspot, wordpress, atau website sehingga pengunjung pun nyaman ketika sedang membaca artikel yang ada di situs web tersebut. Untuk memasang / membuat kotak html blog kita hanya perlu memasukkan / menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Pada kesempatan kali ini saya akan berbagi cara membuat sebuah kotak kode script pada postingan blogger

 

Cara Membuat Kotak Kode dengan CSS di Blogger

Blogger > Tema > Edit HTML

 

Simpan kode di bawah ini, di atas kode </style> atau ]]></b:skin>

pre{white-space:pre-wrap;padding:10px;margin:10px;font-size:12px;line height:1.5;background:rgba(27,27,27,0.91);border-left:10pxsolid #000;color:#cfcfa7}mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}


Untuk menampilkan kotak kode CSS tersebut, kita perlu menggunakan kode markup HTML seperti di bawah ini:

<pre><code> Letak CSS/HTML/JAVASCRIPT di Sini </code></pre> 

 

Atau kalau ingin menandai kode tertentu dengan warna stabile, gunakan kode markup HTML ini:

 <mark> Letak Kode Stabilo di Sini </mark>

 

Gampang, kan? Itulah cara membuat dan menampilkan kode CSS di Blogspot.


SUMBER: kodebloggerku.blogspot.com