Cara Membuat Syntax Highlighter (Kotak Script) Berwarna Di Blogger - Minta Ilmu Cara Membuat Syntax Highlighter (Kotak Script) Berwarna Di Blogger - Minta Ilmu

Cara Membuat Syntax Highlighter (Kotak Script) Berwarna Di Blogger

Mintailmu.com - 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 Membuat Syntax Highlighter (Kotak Script) Berwarna Di Blogger

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. Setelah anda menemukan salah satu kode ]]></b:skin> atau </style>, lalu copy kode di bawah ini dan paste dibawah 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 dibawah kode </body>
 <script src='https://rawgit.com/hilmay619/pribadi/master/sintax.js' type='text/javascript'/> <script> $(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;); Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)}) </script> <script type='text/javascript'> var pres = document.getElementsByTagName(&quot;pre&quot;); for (var i = 0; i &lt; pres.length; i++) { pres[i].addEventListener(&quot;dblclick&quot;, function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection Highlighter 
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script> 

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 dibawah 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.


Show comments
Hide comments

0 Response to "Cara Membuat Syntax Highlighter (Kotak Script) Berwarna Di Blogger"

Posting Komentar

Silahkan Anda berkomentar yang baik, menarik Dan Benar sesuai dengan isi Postingan Minta Iilmu .com.
Komentar-Komentar yang tidak diperbolehkan Di dalam Postingan Ini :

1. Berbau penghinaan SARA ,PXXN & SPAM
2. Komentar dengan Link hidup (SPAM)
3. Komentar tidak nyambung dengan isi postingan

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Mau Dapat Informasi Lebih Banyak? Bisa Gabung Di Grup Telegram Dan Download App Mintailmu.com