KODE IKLAN DFP 1 Cara Gampang Memasang Syntax Highlighter Pada Postingan Di Blogger | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Cara Gampang Memasang Syntax Highlighter Pada Postingan Di Blogger

    KODE IKLAN 200x200
    KODE IKLAN 336x280
    Cara Praktis Memasang Syntax Highlighter Pada Postingan Di Blogger Cara Praktis Memasang Syntax Highlighter Pada Postingan Di Blogger

    Syntax Highlighter yaitu sebuah fitur unik yang difungsikan untuk mempermudah penempatan aba-aba pemrograman kedalam sebuah postingan blog.

    Dengan adanya Syntax Highlighter ini pula aba-aba pemrograman yang ditempatkan pada post blog akan lebih menarik dan terlihat profesional. Sebab Syntax Highlighter ini akan menyeleksi warna secara otomatis sesuai dengan aba-aba pemrograman yang anda tempatkan.

    Makara suatu misal anda memasukkan aba-aba HTML kedalam post blog anda, maka nanti aba-aba HTML tersebut akan ditandai dengan warna tertentu yang membedakan dengan aba-aba pemrograman lain. Begitu pula dengan aba-aba pemrograman lainnya menyerupai CSS dan Javascript.

    Hal ini tentu akan mempermudah pengunjung blog memahami isi dari script aba-aba pemrograman yang anda bagikan.

    Penggunaan Syntax Highlighter ini tentunya akan sangat cocok bagi anda yang sering menciptakan post berupa tutorial pemrograman. Selain efektif, penggunaan Syntax Highlighter ini juga akan menciptakan pengunjung blog lebih merasa bahagia dan betah berada di blog anda.

    Dari sekian banyak manfaat yang didapat dari penggunaan Syntax Highlighter, ternyata untuk membuatnya pun tidak terlalu sulit. Anda hanya perlu memasukkan beberapa aba-aba pemanis kedalam tema blog anda, dan kemudian anda bebas memakai Syntax Highlighter ini.

    Nah untuk sanggup memakai Syntax Highlighter ini anda harus melewati dua tahap. Tahap pertama yaitu memasang script aba-aba Syntax Highlighter, dan tahap kedua yaitu cara mengunakan Syntax Highlighter pada post blog.

    Baiklah untuk anda yang sudah menanti bagaimana cara memasang Syntax Highlighter ini, silahkan ikuti saja panduan berikut:

    Tahap I : Memasang Syntax Highlighter Pada Tema Blog

    Catatan:
    Syntax Highlighter akan bekerja secara optimal, apabila script aba-aba jquery sudah terpasang di blog anda. Contoh sederhana dari script aba-aba jquery yaitu : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
    1. Login ke blogger.com
    2. Pada dashboard blogger pilih Tema>>Edit HTML
    3. Copy aba-aba berikut, dan pastekan sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
    <style type='text/css'> /* Highlighter */ pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem} .post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0} </style>
    4. Lalu tambahkan juga aba-aba berikut diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
    <script type='text/javascript'> //<![CDATA[ // Highlighter $('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1); function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>
    5. Kemudian "Simpan Tema"


    Tahap II : Cara Menggunakan Syntax Highlighter Pada Postingan


    1. Pada dashboard blogger pilih Postingan>>Entri Baru
    2. Masuk pada mode "HTML" (bukan "Compose")
    3. Masukkan aba-aba berikut pada tab HTML tersebut
    <pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>
    Catatan:
    Ganti goresan pena yang bertanda Merah dengan aba-aba Html, Css, atau Javascript anda.
    Catatan:
    Silahkan Parse terlebih dahulu aba-aba Html, Css atau Javascript yang akan anda masukkan. Di HTML Converter
    4. Lakukan "Pratinjau" untuk mengetahui hasilnya
    5. Selesai.
    Catatan:
    Untuk penggunaan aba-aba pemrograman lain menyerupai CSS, Javascript, Php, dan sebagainya. Cara penggunaannya sama saja, tidak ada perbedaan.
    Sedikit info saja bagi yang belum tahu menyerupai apa sih bentuk dari Syntax Highlighter. Anda sanggup melihatnya pada gambar berikut ini:
    Cara Praktis Memasang Syntax Highlighter Pada Postingan Di Blogger Cara Praktis Memasang Syntax Highlighter Pada Postingan Di Blogger
    Yap benar sekali, gambar diatas merupakan bentuk dari Syntax Highlighter. Bagaimana keren bukan? ini juga merupakan hasil simpulan dari penerapan Syntax Highligher pada post blog. Untuk lebih jelasnya anda sanggup mencobanya sendiri dengan mengikuti panduan diatas ya.


    Penutup

    Oke saya rasa anda sudah mulai paham bagaimana cara memakai Syntax Highlighter didalam postingan blog. Untuk selebihnya anda sanggup berkreasi sendiri ya.

    Oh ya, sedikit info saja bahwa Syntax Highlighter ini tidak akan memberatkan loading blog anda. Makara aman-aman saja untuk digunakan.

    Itu saja yang sanggup saya sampaikan, kurang lebihnya mohon maaf, dan simpulan kata saya ucapkan terimakasih.
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2