Cara Menambah Kode Box di Postingan Blogger

Membuat kode box dipostingan blog terkadang anda perlukan. Pada saat membuat artikel tutorial blog pasti sering menjumpai kode atau sourcode script blog. Kode ini harus di buatkan BOX agar dapat dengan mudah dibedakan antara artikel dengan sourcecode.

Istilah lain dari kode box ini adalah syntax highlighter dengan CSS. Syntax highlighter mempunyai beberapa metode untuk dapat menerapkannya di artikel blog kita. Pilihan metode ini terpulang kepada anda, apakah syntax highlighter atau kode box ini langsung ditanam didalam template blog, atau cukup hanya diartikel blog saja.

Pada kali ini saya membuat syntax highlighter atau kode box tanpa ditanam di template blog. Cara ini terbilang lebih efektif dan aman. Kata 'aman' maksudnya, tidak menggangu kode template yang kita miliki. Kode template blog yang kita gunakan tidak kita tambahkan script atau kode lain, sehingga terjaga kemampuannya atau tetap aman.

Bagaimanapun template tidak boleh diubah, dipertahankan sebagaimana bentuk aslinya dari developer tema blog anda. Kode box atau syntax highlighter ini, mungkin... Mungkin saja akan memberi pengaruh yang tidak baik kepada template blog anda. Bisa saja terjadi, yang awalnya ramah mesin pencari, setelah ditambah script syntax highlighter ditanam ditema blog berubah menjadi kurang ramah mesin pencari. Jangan ambil resiko ini, pertahankan keoriginalan template blog anda.

Cara Menambah Kode Box atau syntax highlighter di Postingan Blogger

Cara Menambah Kode Box atau syntax highlighter di Postingan Blogger kali cukup mudah dan terbilang tidak menggangu. Hanya saja memang, anda perlu bolak balik view mode, dari html ke compose. Semoga anda tidak keberatan dengan hal ini, karena memang tidak ada pilihan lain untuk saat ini.

Ketika membuat postingan, silahkan berpindah ke HTML view, lalu copy dan pastekan kode dibawah ini didalam postingan. Untuk mengubah mode ini sangat mudah, cukup klik icon pena yang berada dipojok kiri atas dashboard edit postingan. 

Setelah memilih html view, tampilan edit postingan akan berubah seperti gambar dibawah ini. Dimana paragraph yang anda tulis sebelumnya berubah dan ada banyak tambahan kode-kode script dari blogger. Bentuk ini normal, tidak perlu dikhawatirkan. Ketika anda memilih mode compose view, artikel yang anda tulis akan terlihat normal kembali.

Setelah anda copy dan pastekan, silahkan lanjutkan untuk mengetik artikel. Kembali ke compose view dan lanjut mengetik artikel sebanyak mungkin, karena Kode Box atau syntax highlighter di Postingan Blogger ini sudah berada diartikel dan tidak menggangu tampilan secara signifikan.

<pre style="background: rgb(238, 238, 238); border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 10px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 5px 0px 0px; color: #444444; font-family: &quot;Courier New&quot;, Courier, monospace; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 12px; vertical-align: baseline;"><span style="font-size: 13px;">Replace the text with codes</span></pre><p>Start write the next paragraph here </p>

Jika anda kurang berminat dengan Cara Menambah Kode Box atau syntax highlighter langsung di Postingan Blogger ini. Silahkan ikuti artikel ini untuk membuat syntax highlighter sourcode di template linkmagz. Semoga berhasil.