Pasang Kode HTML, CSS, Javascript di Postingan Blogspot

Cara Menampilkan Kode HTML, CSS di Blog ~ Membuat sebuah postingan yang menarik memang menjadi target utama seorang penulis blog, berbagai cara mereka ulik, beragam sudut pandang mereka cari yang tidak lain adalah untuk membuat blog mereka menjadi tampil profesional yang tampil elegan dan berkelas.

Masih berkaitan dengan komponen-komponen untuk mempercantik tampilan postingan blog dimana kali ini saya akan memposting tentang bagaimana menambahkan kode HTML, CSS, Javascript dan teman-temannya ke dalam sebuah postingan di blog. Kode atau syntax sebetulnya bisa langsung saja kita tempel dalam mode compose di postingan blogger dan akan melakukan parsing secara otomatis, namun tampilannya standar-standar saja kan.

Hal yang berbeda jika kita menambahkan bantuan css untuk mempercantik tampilan kode-kode program yang akan di masukan ke dalam sebuah postingan. Sepertinya kalian juga sudah sering lihat di blog-blog tentang tutorial yang ada kode html, css di postingannya.

CSS Syntax Highlighter

Yapps, itulah nama dari sebuah box atau kotak yang nantinya akan ditempati oleh kode-kode di dalamnya, kebetulan kemarin-kemarin saya temukan saat berjelajah di dunia si maya. Mohon maaf karena saya tidak tahu siapa yang buatnya, dan css ini juga di pasang di blog ini jadi kalian tidak akan asing lagi liatnya.

Cara membuatnya adalah masuk Blogger > Template > Edit HTML > letakaan tepat di atas kode </b:skin>.

 /* CSS Syntax Highlighter */

pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#eeedef;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}

pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}

pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#FFFFFF;display:block;margin:0;text-indent:15px}

pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#FFFFFF;top:0;right:0;padding:9px 14px;position:absolute}

pre code{display:block;background:none;border:none;color:#000000;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}

code .token.important {font-weight:bold;}

code .token.entity {cursor:help;}

pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}

pre[data-codetype="CSSku"]:before {
    background-color: #00a1d6;
}

pre[data-codetype="HTMLku"]:before {
    background-color: #3cc888;}

pre[data-codetype="JavaScriptku"]:before {
    background-color: #75d6d0;
} 

pre[data-codetype="JQueryku"]:before{background-color:#e5b460;box-shadow:inset 0 0 0 1px #eee;}

Setelah itu Simpan Template, kemudian cara pemanggilannya seperti kode yang ada di kotak masing-masing.

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
. . . kode kalian
</code></pre>

<pre data-codetype="CSSku" title="CSS"><code class="language-css"> 
. . . kode kalian
</code></pre>

<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">
. . . kode kalian
</code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">
. . . kode kalian
</code></pre>

Tempelkan kode pemanggilan tersebut di mode HTML ya, ketika kalian berada di postingan.

Demikian postingan kali ini tentang cara memasang kode-kode di dalam postingan dengna box yang keren, kalian bisa modifikasi sesuka kalian, di tunggu kritik dan sarannya. See you

Tweet