Cara Menciptakan Pre Code Sintax Highlighter Di Blogger Terbaru

Baca Juga

Pre Code Sintax Highlighter ialah sebuah tempat text area yang didalamnya berupa berisi instruksi programan seperti; Java Script, JQuery, CCS, HTML, PHP dan lain-lain. Fungsi Pre Code Sintax Highlighter ini ialah untuk memudahkan pengunjung dalam mengelompokkan suatu kode. Jika anda menggunakan Pre Code Sintax Highlighter ini tampilan desktop dan mobile akan terasa responsive tidak menciptakan awut-awutan instruksi yang anda bagikan. Selain itu Pre Code Sintax Highlighter ini memudahkan pengunjung juga dalam menyalin kode, alasannya hanya double click secara otomatis instruksi terseleksi semua dan anda hanya tinggal menyalinnya.

Screenshoot:

Anda sering membagikan sebuah instruksi di tutorial anda? Jika iya, berarti anda sangat cocok sekali memakai tutorial yang aku bagikan kali ini. Jika anda ingin membagikan sebuah instruksi di artikel anda sebaiknya menggunakan Pre Code Sintax Highlighter. Jika anda membagikan sebuah instruksi memakai kotak script yang lain, jadinya instruksi nya awut-awutan sehingga terkadang instruksi tidak bekerja. Dengan adanya Pre Code Sintax Highlighter ini instruksi yang anda bagikan tidak lagi berantakan. Ok, pribadi saja ke proses pembuatan.

Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru

Cara Pertama :

1. Buka Blogger - Kemudian Login
2. Dashboard - Tema.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan instruksi ]]></b:skin> atau </style>
2. Copy & Paste instruksi berikut ini, dan letakkan diatas instruksi ]]></b:skin> atau </style>

pre{background:#fff;white-space:pre;word-wrap:break-word;overflow:auto;} pre.code{background:#374760;margin:20px 25px;max-height:500px;border-radius:2px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08);border: 3px solid #374760;} pre.code label{font-family:sans-serif;font-weight:normal;font-size:13px;color:#444;position:absolute;left:1px;top:16px;text-align:center;width:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none;} pre.code code{font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;border: 3px solid #374760;display:block;margin:0 0 0 60px;padding:15px 16px 14px;overflow-x:auto;font-size:13px;line-height:19px;color:#444;} pre::after{content:" DOUBLE CLICK TO SELECTION ";padding:0;width:auto;height:auto;position:absolute;right:18px;top:10px;font-size:12px;color:#aaa;border:1px solid #fff;border-radius:4px;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease;}} pre.code-html{color:#fff;background: #374760;}  pre.code-css{color:#fff;background: #374760;}  pre.code-javascript{color:#fff;background: #374760;}  pre.code-jquery{color:#fff;background: #374760;}  pre:hover::after{opacity:0;visibility:visible;} pre.code-css code{color:#e1fc61;background:#374760;border:1px solid #fff;} pre.code-html code{color:#33d30e;border:1px solid #fff;background:#374760;} pre.code-javascript code{color:#ff8100;background:#374760;border:1px solid #fff;} pre.code-jquery code{color:#f85050;background:#374760;border:1px solid #fff;}

3. Jika sudah? Temukan lagi instruksi </body>
4. Copy & Paste instruksi berikut ini, dan letakkan diatas instruksi </body>

<script type='text/javascript'> //<![CDATA[ //Pre Auto Selection $('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 Menggunakan :

Untuk memanggil kode, silakan anda copy & paste instruksi dibawah ini di postingan anda. Untuk bab HTML, JS, JQuery harus di PARSE terlebih dahulu.

• PARSE HTML

<pre class='code code-html'><label><span style="color: #fff">HTML</span></label><code> KODE HTML (PARSE) DISINI </code></pre> <pre class='code code-css'><label><span style="color: #fff">CSS</span></label><code> KODE CSS DISINI </code></pre> <pre class='code code-javascript'><label><span style="color: #fff">JS</span></label><code> KODE JAVA SCRIPT (PARSE) DISINI </code></pre> <pre class='code code-jquery'><label><span style="color: #fff">JQUERY</span></label><code> KODE JQUERY (PARSE) DISINI </code></pre>   

Demikian, kalau anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Pre Code Sintax Highlighter di Blogger Terbaru