Cara Membuat Pre Code di Blog Blogger by Rian SEO

Cara Membuat Pre Code di Blog Blogger by Rian SEO Images @rian_seo
Cara Membuat Pre Code di Blog

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.


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

Cara Membuat Pre Code di Blog

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.

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.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter