Cara Membuat Kotak Kode dengan CSS di Blogger - Kali ini aku akan membagikan car menciptakan kotak arahan CSS/HTML/JavaScript (Syntax Highlighter) sederhana di postingan blogger dengan mengunakan CSS atau tanpa j4vascript.
Syntax Highlighter yakni teks markup arahan pada halaman website yang biasa berisi goresan pena berwarna warni untuk mempermudah melihat arahan tersebut. Biasanya berbentuk menyerupai background hitam dan berisi goresan pena arahan berwarna di dalamnya.
Sebenarnya sebelumnya aku sudah pernah menjelaskan cara menciptakan kota arahan syntax highlighter dengan memakai JavaScript biar kodingnya tersebut berwarna-warni. Namun pada kesempatan ini aku membuatnya murni memakai CSS biar lebih ringan dan tidak mengganggu kecepatan loading blog.
Cara Membuat Kotak Kode Dengan CSS di Blogger
1. Buka Blogger > pilih Tema > klik Edit HTML
2. Letakkan arahan dibawah ini, sempurna berada diatas arahan </style> atau ]]></b:skin>
/* Code Box */ 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:10px solid #000;color:#cfcfa7;} mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}| Kode | Keterangan |
|---|---|
| 12px | Ukuran teks (font) |
| #000 | Warna border kiri |
| #cfcfa7 | Warna teks |
| #f24a4a | Warna Mark (Stabilo/Background color) |
3. Jika sudah pilih Simpan Tema
Cara Menggunakan Kota Kode di Postingan Blog
1. Buat Postingan baru
2. Pilih Menu HTML (Bukan Compose)
3. Kemudian letakkan arahan ini di dalamnya
<pre><code>TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>Jika ingin menciptakan warna stabilo menyerupai diatas (Background color/mark) gunakan arahan ini di dalamnya:
<mark>Stabilo Kode</mark>Penting: Perlu kalian ketahui bahwa bahwa untuk menulis arahan HTML atau JavaScript dalam kotak koding (Syntax Highlighter), kalian wajib melaksanakan parse HTML terlebih dahulu disini Parse HTML.
Demikianlah Tutorial dari analisyuki.com perihal Cara Membuat Kotak Kode dengan CSS di Blogger, semoga tutorial ini dapat berkhasiat untuk kalian yang memfokuskan pada kecepatan blogger, Terimakasih.
Sumber http://www.analisyuki.com/
