Cara Membuat Syntax Highlighter (Kotak Script) Berwarna Di Blogger

Halo selamat siang, kali ini saya akan memberikan tutorial tentang anda bagaimana cara membuat Syntax Highlighter pada blogger. Syntax Highlighter hampir mirip dengan blockquote atau codepen, namun tampilan dari Syntax Highlighter lebih rapi dan bisa kita atur sesuai keinginan. Syntax Highlighter sudah banyak digunakan oleh para blogger untuk membungkus kode atau script mereka mulai dari kode CSS, HTML, Java Script, PHP, Jquery  dan code lain-lainnya.

Cara Membuat Syntax Highlighter (Kotak Script) Berwarna Di Blogger dan menggunakannya juga cukup mudah bahkan sangat gampang. Jika kalian tertarik untuk membuatnya silahkan ikuti cara berikut ini :

Cara Pertama 

1. Buka Blogger lalu login
2. Masuk ke halaman utama blogger
3. klik Tema
4. Pilih Edit HTML

Cara Kedua
1. Cari kode ]]></b:skin> atau </style>
2. Copy kode di bawah ini dan paste di bawah kode ]]></b:skin>  atau </style>

 /* CSS Sintax Haighlighter MINTAILMU.COM */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#374760;position:relative;border-radius:4px;max-height:500px;}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;}
pre::after{content:'</>';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out;}
code{font-family:Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;padding:1px 2px;font-size:12px;}
pre code{display:block;background:none;border:none;color:#e9e9e9;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;}
code .token.punctuation{color:#ccc;}
pre code .token.punctuation{color:#fafafa;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata{color:#777;}
code .namespace{opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number{color:#e5dc56;}
code .token.selector,code .token.attr-name,code .token.string{color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name{color:#fafafa;}
pre code .token.string{color:#40ee46;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string{color:#ccc;}
code .token.operator{color:#1887dd;}
code .token.atrule,code .token.attr-value{color:#009999;}
pre code .token.atrule,pre code .token.attr-value{color:#1baeb0;}
code .token.keyword{color:#e13200;font-style:italic;}
code .token.comment{font-style:italic;}
code .token.regex{color:#ccc;}
code .token.important{font-weight:bold;}
code .token.entity{cursor:help;}
pre mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre{padding:10px 10px 15px 10px;background:#2c323c;}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border-radius:4px;border:none;}
.comments pre::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code{position:relative;}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype='HTMLku']:before{background-color:#3cc888;}
pre[data-codetype='CSSku']:before{background-color:#00a1d6;}
pre[data-codetype='JQueryku']:before{background-color:#e5b460;}
pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0;}
pre[data-codetype='PHPku']:before{background-color:#75d6d0;}
pre::after{content:" DOUBLE CLICK TO SELECTION ";padding:0;width:auto;height:auto;position:absolute;right:18px;top:10px;font-size:12px;color:#fff;border:1px solid #fff;border-radius:4px;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease;}} 

3. Setelah itu , temukan lagi kode </body> 
4. Copy dan Paste kode berikut ini pass di bawah kode </body> 

5. Simpan Template.!

Cara Terakhir
1. Buka postingan anda
2. Ada 2 menu postingan Compose dan HTML
3. Pilih  HTML
4. Lalu copy dan paste code di bawah ini di postingan anda

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> ISI KODE </code></pre> 

<pre data-codetype="CSSku" title="CSS"><code class="language-css"> ISI KODE </code></pre> 

<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> ISI KODE </code></pre>

<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">  ISI KODE </code></pre>
<pre data-codetype="PHPku" title="php"><code class="language-javascript"> ISI KODE </code></pre>  

5. Gunakan sesuai kebutuhan anda 
6. Simpan dan lihat hasilnya.