Cara Membuat Pembungkus Kode Postingan di Blogspot

Cara membuat syntax highlighter di blog - ini memiliki banyak sekali fungsi, selain memudahkan dalam penulisan sebuah kode di blog, juga dapat dengan mudah untuk membedakan mana yang kode dan keterangan, sehingga pembaca lebih mudah memahaminya.

cara membuat syntax highlighter di blog

Dengan style yang beda tentunya juga akan mempercantik postingan dan juga tampilan blog kita. Nah untuk memberikan style ini di blogger, caranya cukup mudah kok.. Jika sobat mau, berikut ini akan saya berikan tutorialnya.

1. Pertama masuklah di akun blogger sobat, kemudian masuk dasbor blog sobat -> Template -> Edit HTML, setelah ketemu, cari kode </head> dan copy kan kode berikut ini tepat diatas kode </head>.

[<script src='https://cdn.rawgit.com/Arlina-Design/frame/0c5e9584/highlightpacks.js'/><script>hljs.initHighlightingOnLoad();</script>]

2. Selanjutnya, setelah langkah diatas selesai, langkah berikutnya adalah, cari kode ]]></b:skin> atau </style> kemudian pastekan kode di bawah ini tepat diatasnya.

[/* syntax highlighter SOLARIZED DARK STYLE www.arlinadzgn.com */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}]

3. Setelah sobat selesai melakukan ke dua langkah diatas, silahkan simpan template sobat.

4. Nah untuk menerapkannya pada blog atau postingan sobat. Ketika sobat akan melakukan posting yang terdapat script di dalamnya, maka sobat harus meletakkan script sobat yang telah di parse, diantara kode berikut ini.

[<pre> <code> TULIS KODE DISINI </code></pre>]

5. Setelah selesai silahkan publish postingan sobat. dan lihat hasilnya.

Itulah tutorial hari ini yang bisa saya berikan, semoga bermanfaat. Terima kasih

sumber code : Arlina Design

0 Response to "Cara Membuat Pembungkus Kode Postingan di Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel