Cara Membuat Pre Code di Blog Blogger by Rian SEO

Apa itu pre code buat blog Anda? Sekilas kata ini buat bingung bagi kamu yang baru mengenal kode yang berada di Blog, fungsi dari kode kata pre dan code ini adalah membuat bungkus sebuah kode didalam tulisan postingan blog kamu.

Apa saja kelebihan yang kita gunakan saat memakai pre code ini dalam sebuah postingan? Tentunya jawabanya adalah untuk mempercantik dan merapikan sebuah tampilan tulisan yang isinya berbau kode-kode rumit.

Baca juga : Cara Melindungi Blog dari Copy Paste

Sebenarnya kode pre code ini adalah dari kata asli Syntax Highlighter yang sudah banyak membahasnya untuk tutorial cara memasangnya.

Dibawah ini adalah contoh kode pre code yang saya terapkan didalam tulisan blog ini.

pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

Sebenarnya tampilan diatas saya rasa sudah cukup jelas buat kamu memahami apa itu pre code di dalam postingan.

Namun masih ada kurang dari segi tampilan, sebab itu masih menggunakan kode standar yang sudah di atur dalam Template blog.

Agar lebih keren dan berwarna, kamu bisa ikuti tips yang saya bagikan dibawah ini.

Cara Membuat Widget Syntax Highlighter Keren di Blogger

Buka Blogger > Template > Edit HTML >

Langkah ini kamu harus memberi kode tambahan kedalam template blogger, caranya salin dulu kode CSS dibawah ini agar tulisannya berwarna.

.hljs{display:block;overflow-x:auto;padding:.5em;background:#333;line-height: 1.3em!important;color:#fff}
.hljs span{font-family:Consolas,Monaco,'Andale Mono',monospace!important;font-weight:400}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}
.hljs-bullet,.hljs-string{color:#a2fca2}
.hljs-attribute,.hljs-built_in,.hljs-builtin-name,.hljs-quote,.hljs-section,.hljs-title,.hljs-type{color:#ffa}
.hljs-bullet,.hljs-number,.hljs-symbol{color:#d36363}
.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}
.hljs-code,.hljs-comment,.hljs-deletion{color:#888}
.hljs-link,.hljs-regexp{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}

Letakan kode tadi, di atas kode ]]></b:skin> atau </style>

Selanjutnya menyalin kode script pendukung dibawah kolom kotak ini.

<script rel='stylesheet' src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
    <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;index&quot;}'>
 &lt;/div&gt;
 </b:if>

Letakan kodenya tepat dibagian kode penutup </body> atau </head>

Langkah terakhir SIMPAN

Cara Memasang Syntax Highlighter di Postingan Blog

Buka Blogger > Post > mode HTML

Saat menulis masukan kode ini <pre><code> kode CSS / kode Script / jQuery / HTML. Jangan lupa juga, setiap kode pasti memerlukan penutup jadi setelah memasukan kode <pre><code> maka harus di tutup seperti ini </code></pre>

Jangan sampai kamu hanya menuliskan kode <pre> saja didalamnya, maka tampilannya akan mengikuti gaya standar CSS bawaan template. Jadi harus bergabung antara kode <pre> dan <code> jangan sampai terpisah.

Contoh Halaman

Penutup

Bagaimana? cukup mudah bukan, untuk mengubah atau membuat kolom sebuah kode terbungkus rapi didalam postingan blogger kamu. Jika ada langkah diatas kurang kamu pahami dan mengerti, silahkan tulis di kolom komentar blog ini.

Berbagi :